[RELEASED] Simply SVG - Vector Graphics and Unity Live happily ever after

We are finding a tool, which can read svg into inner svg-model in ram (not just convert to mesh and texture), also there is a need to manipulate svg at runtime, for example: change scale (from 1 to 10000), blending and etc, without artefacts and quality lost, like adobe flash. Does this tool do this?
And how about performance on editing svg and rendering it at runtime (Does the 3d acceleration present? Will there be any lags?)

 

Can i extrude svg lines (to make 3D objects from SVG)?

 

** bump ** Anyone out there that can answer this???

 

I would like to know the same... is there a way to import them as a 3d mesh so they can be extruded? that would be extremely useful.

 

Hi everybody! For some reason I haven't got any alerts from this thread and thus wasn't aware of all these questions. I will try to resolve them now.

Simply SVG supports svg files. It does not import any other types including pdfs.

1.
Simply svg doesn't support Text elements as text but if you convert them into outlined shape then Simply SVG can generate the mesh.
To convert text to outlines goto Select > Select All. Then use Type > Create Outlines.

2. + 3. Could you send me a private message with the actual 1MB svg file and I can test it out for you?

Simply SVG comes with one very optimized and light shader. It doesn't support shadows. However, with other shaders you should get shadows working (more discussion about vertex colors and shadows in this topic https://forum.unity3d.com/threads/vertex-color-shadows.191389/)

Generating mesh is a heavy opration, so you should do it when your game is paused. Mesh will always be a rough estimation of your shape. Triangles (in mesh and gpu) can't present a smooth curve, unless you have one vertex for every pixel but when zooming in you would need unlimited vertices.

Simply SVG generates 2d meshes. It would be quite easy to extrude one 2D mesh to 3D and you could use the mesh that Simply SVG generates as a starting point.


I'm very sorry about the delay and thanks for the one who notified me via email.

 

Hello I'm interested in your extension, could you show me how my svg would look in unity?

Code (CSharp):

1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2. <!-- Created with Inkscape (http://www.inkscape.org/) -->
3.  
4. <svg
5.    xmlns:dc="http://purl.org/dc/elements/1.1/"
6.    xmlns:cc="http://creativecommons.org/ns#"
7.    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
8.    xmlns:svg="http://www.w3.org/2000/svg"
9.    xmlns="http://www.w3.org/2000/svg"
10.    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11.    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12.    width="210mm"
13.    height="297mm"
14.    viewBox="0 0 744.09448819 1052.3622047"
15.    id="svg2"
16.    version="1.1"
17.    inkscape:version="0.91 r13725"
18.    sodipodi:docname="WeaponItemBulletsTriple.svg">
19.   <defs
20.      id="defs4" />
21.   <sodipodi:namedview
22.      id="base"
23.      pagecolor="#000000"
24.      bordercolor="#666666"
25.      borderopacity="1.0"
26.      inkscape:pageopacity="1"
27.      inkscape:pageshadow="2"
28.      inkscape:zoom="0.98994949"
29.      inkscape:cx="232.34194"
30.      inkscape:cy="543.51978"
31.      inkscape:document-units="px"
32.      inkscape:current-layer="layer1"
33.      showgrid="false"
34.      inkscape:window-width="1920"
35.      inkscape:window-height="1003"
36.      inkscape:window-x="-9"
37.      inkscape:window-y="-9"
38.      inkscape:window-maximized="1" />
39.   <metadata
40.      id="metadata7">
41.     <rdf:RDF>
42.       <cc:Work
43.          rdf:about="">
44.         <dc:format>image/svg+xml</dc:format>
45.         <dc:type
46.            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
47.         <dc:title></dc:title>
48.       </cc:Work>
49.     </rdf:RDF>
50.   </metadata>
51.   <g
52.      inkscape:label="Layer 1"
53.      inkscape:groupmode="layer"
54.      id="layer1">
55.     <g
56.        id="g4148">
57.       <circle
58.          r="224.28572"
59.          cy="522.36218"
60.          cx="342.85715"
61.          id="path4684"
62.          style="fill:none;fill-opacity:0;fill-rule:nonzero;stroke:#ffffff;stroke-width:10;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
63.       <path
64.          inkscape:connector-curvature="0"
65.          id="path4686"
66.          d="M 202.85714,505.93363 230,578.79077 267.14286,535.93363 Z"
67.          style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
68.       <path
69.          inkscape:connector-curvature="0"
70.          id="path4686-0"
71.          d="m 327.14286,376.64792 27.14286,72.85714 37.14286,-42.85714 z"
72.          style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
73.       <path
74.          inkscape:connector-curvature="0"
75.          id="path4686-6"
76.          d="m 263.57143,435.93364 27.14286,72.85714 37.14286,-42.85714 z"
77.          style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
78.       <path
79.          d="m -218.5651,507.58069 a 12.586069,173.87549 0 0 1 -6.31618,150.76472 12.586069,173.87549 0 0 1 -12.60912,-0.55442 12.586069,173.87549 0 0 1 -6.24658,-151.31709 l 12.58581,1.10679 z"
80.          sodipodi:end="3.1479581"
81.          sodipodi:start="0"
82.          sodipodi:ry="173.87549"
83.          sodipodi:rx="12.586069"
84.          sodipodi:cy="507.58069"
85.          sodipodi:cx="-231.15117"
86.          sodipodi:type="arc"
87.          transform="matrix(0.55452582,-0.83216652,0.71636693,0.69772374,0,0)"
88.          id="path4713"
89.          style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:5.26485491;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
90.       <path
91.          d="m -122.40954,528.37537 a 12.586069,173.87549 0 0 1 -6.31617,150.76471 12.586069,173.87549 0 0 1 -12.60913,-0.55441 12.586069,173.87549 0 0 1 -6.24658,-151.31709 l 12.58581,1.10679 z"
92.          sodipodi:end="3.1479581"
93.          sodipodi:start="0"
94.          sodipodi:ry="173.87549"
95.          sodipodi:rx="12.586069"
96.          sodipodi:cy="528.37537"
97.          sodipodi:cx="-134.99561"
98.          sodipodi:type="arc"
99.          transform="matrix(0.55452582,-0.83216652,0.71636693,0.69772374,0,0)"
100.          id="path4713-4"
101.          style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:5.26485491;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
102.       <path
103.          d="m -33.099325,551.9718 a 12.586069,173.87549 0 0 1 -6.316176,150.76472 12.586069,173.87549 0 0 1 -12.609126,-0.55441 12.586069,173.87549 0 0 1 -6.246581,-151.3171 l 12.585814,1.10679 z"
104.          sodipodi:end="3.1479581"
105.          sodipodi:start="0"
106.          sodipodi:ry="173.87549"
107.          sodipodi:rx="12.586069"
108.          sodipodi:cy="551.9718"
109.          sodipodi:cx="-45.685394"
110.          sodipodi:type="arc"
111.          transform="matrix(0.55452582,-0.83216652,0.71636693,0.69772374,0,0)"
112.          id="path4713-3"
113.          style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:5.26485491;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
114.     </g>
115.   </g>
116. </svg>
117.  

 

Hi,

I purchased this without noticing that it hasnt had any updates in over a year and didnt mention supporting the latest unity and inkscape. I am using unity 5.5 and inkscape 0.92 and am unable to get the plugin to work using a pretty simple SVG file. After exporting the svg using the settings in the pdf doc, unity throws an exception converting the coordinates to float. I was able to debug the script and determined that inkscape is exporting cooridnates in scientifc notation with an "e" and that the plugin does not support this. I verified that I am exporting with svg file with only 3 signific digits and searched for an inkscape solution but none exits.

Are there any updates planned to support this?

Can I get a refund if not?

 

Hello,

Hows the performance using this bad boy vs PNGs? Does it affect frame rate or memory?

-Mitch

 

I'm interested in this asset.
Is there a problem using Unity 5.6?

 

Have you got a chance to try it recently? I really don't know if buy THIS or SVG importer... As I'm totally new in Unity I need to import vectors for my 2D platformer ....trees moutains rocks...

 

Just getting the SVGs into your game is one thing, the format they become after they are imported is another thing. I went though this a year and a half ago and bought at least 3 of the various SVG handling assets on the asset store. One SVG asset importer would do some things but not other things and work with Puppet2D/Anima2D in some ways but not in others. (Anima2D, which Unity acquired, is now Unity Anima2D and you can get for free now. I paid a lot of money for it. Damn!).

The best way is to get the SVG assets converted to some format native to Unity as early as possible in your pipeline. It's been a while but I think I finally went with SVG to PNG: https://www.assetstore.unity3d.com/en/#!/content/29298

SVG to PNG is the most simple solution and it gave me the least trouble when working with Puppet2D/Anima2D (now Unity Anima2D). But it's been a year and a half. Many things have changed.

 

mmm..tha's a good point.... In the meantime I decided to buy SVG importer and actually it really imported all my SVG vectors just fine. About what they become after they're imported I honestly don't knowl.. I'm very new to Unity and I just need to use vectors to create the background of my platformer without have to worries about the loss of quality during the stretching/scaling of images. Actually It seems to work very well... expecially if you do not use any gradient..
I still have to test deeply on the device to check peformance in ios... hope it will not disappoint me...

 

Hello!

We have aquired this plugin recently and we have a critical problem with it.

We are creating an app for both Android and iOS and on iPad and Tablets all assets are showing like they aren't vector graphics at all, instead simple images with low resolution.

The next picture shows a demo asset on a 10'' tablet.



We can't continue developing our App with this level of detail. So I am asking for your help.

Thanks and sorry for my english level, it isn't my first language.

 

Wow that's really awesome!

You gave more power to Unity 2D!

 

Are the generated polygon colliders strictly convex? ie. Would I be able to subtract a cave from a filled region in my SVG editor and then have collision for that in Unity?

 

hi,
I purchased your plugin and I have a problem.when I change the graphicMesh from the code it doesn't work unless I click on gameobject in the hierarchy, then it's rendered new mesh!!!what should I do to fix it?

 

Hey guys. Tkoknordic updated this package about 2 weeks ago so it is not dead. There are a few strange things though. When you load the svg into a canvas the material property is hidden, you can reach it via script or debug inspector. I'm sure you could also expose the material as public, haven't tried it yet though.

I am using the google material design icons in svg format and they import as solid black instead of solid white. When I load these svgs in a standalone editor they are white which is strange. This is not really an issue when you override the material with something like unlit/color.

It would be nice if we could increase the quality past 100. It would also be nice if we could 9slice the svgs. The other major svg importer on the asset store has both of these features and slightly makes me regret my purchase. On the other hand this asset is very clean and simple, so I will hope for these improvements in a future update and possibly try to hack in the material and quality changes myself. I'm sure setting up 9slice would be pretty difficult though.

 

That should only be a problem with example scene where I have manually added material at some point. There is no material set when you create new scene, new canvas and add new clean Simply SVG Image there. Default material works nicely with Simply SVG Images and has color tinting.

I downloaded couple of Material icons and the problem is that there the fill color is defined inside <svg>-element. Simply svg gets fill color from the current element and not from parent elements.

Code (CSharp):

1. White svg:
2. <svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
3.  
4. Black svg:
5. <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">

For now, you can set Inspector to debug mode and change Min Subdivision Distance Delta value. Ever lower value results better quality and more triangles. The value should always be more than 0. For example 0.001 equals to Quality of 1000. You can also change the limit by editing ImportSettingsEditor.cs file's line 44 in EditorGUILayout.Slider function the third parameter is the upper limit. I will make some changes to this in next version.

9-slice and gradient support are the most asked new features. Both are quite hard to do well and I'm not sure when we have time to implement them.

 

Has anyone else tested this on the newest version of Unity2017.3? The demo scene is riddled with errors and I cannot drag and drop any SVG into the scene..including those that came with the demo.

 

Turns out I was just dragging in the generated file instead of the actual SVG file...I do have another issue though the SVG is coming in black instead of green as its supposed to be.

 

Hi there, I'm interested in buying this asset. I do have a concern however, I work out of Expression Design instead of Illustrator. I checked, and it does export to version 1.1. If I sent a test file, would you mind showing me how it looks in Unity before I make the purchase? Thanks!

 

Hi, guys. Could you tell me, Could I use custom shaders and material with vector UI image?

 

Hello,

When importing our SVGs the meshes contain a huge amount of polygons. The attached (ignoring the background) without the colours stacked creates a 3k mesh. This seems like a crazy amount of polys for what is a UI button.

Is there anything we should be considering when importing our SVGs?

 

Hello! I am Lassi from NordicEdu and I'll be answering the questions here on out with my colleague Konsta. If you have anything to ask about Simply SVG, just let us know!

Here are answers to the latest unanswered questions.

Q: The SVG is coming in black instead of green as its supposed to be.
A: Is the SVG colour gradient? If it is, unfortunately Simply SVG doesn't support gradient colours. If not, could we have a look at the SVG-file in question?

Q: If I sent a test file, would you mind showing me how it looks in Unity before I make the purchase?
A: Sure, send on over.

Q: Could I use custom shaders and material with vector UI image?
A: Simply SVG creates a mesh that works just as any other mesh.

As for FlamingTroll's question, we answered that in more detail in another conversation and created a PDF file concerning it. We'll upload that here too, so if anyone else has the same question, they can consult that file.

 

Question: Can you ungroup an svg file from within Unity?

I want to import an svg of a bird like character and ungroup it to make the eye rotate(using a component script attached to the eye object) . I would rather not import 2 seperate images because unity doesn't have alignment features. (and for more complex images it will be time consuming to seperate each components before importing, then trying to realign them)

 

Hello DropinScience! We already discussed this via email, but I'll add our reply here in case someone else thinks of the same question.

Simply SVG provides a "Split meshes by layers" function for importing SVG assets (see picture). You can then control the different layers as different game objects which, if I understood correctly, was your end goal.

 

Is it still supported, as the last review is ages ago?