SVG Importer | Vector Graphics | Unity UI Supported [OPEN SOURCE]

I just bought svg-importer on sale. I wanted it for a while now but i have a limited budget.
Now i finally have it I noticed the .cvg files i added to my project look worse then my sprites not better.
Circles are very cornered. Lines are very pix-elated. If i zoom out the effects are terrible. lines are broken up or not visible any more. Transparent window isn't transparent any more after import and even hole parts seem to be missing from the original .svg files.
I am wondering what is going on.
I tried to increase the vertex per Meter by a factor of ten but that didn't help eater.
Also the Scale doesn't seem to improve anything ether.
I do notice however when i select the SVG Editor window the drawing is a hole lot sharper then in the game or scene view.
I did use Inkscape (On windows machine) and also DrawPlus to export to .svg with different settings but all what happens is that it gets worse not better.
As everyone seems to be so exited about the addin i must do something wrong but i can't put my finger on it.
I also noticed that when i add an converted svg object to the scene two times it increases the draw call also two times even do it's the same object on the same layer. If i do that with two sprites I just get one draw call.
I don't have adobe illustrator because the simple fact it's way to expensive.

 

I purchased this asset today and it's so great! I love it, the best asset ever! It feels just like something that would be built into Unity. I haven't used it that much but so far it's quite amazing, I wish all assets could be this quality

The one negative(Well not negative but lack of a positive IMO) is that no antialiasing makes everything look jaggy even on my 1080p phone screen. The nature of the 2D meshes really lends itself to per object antialiasing maybe using this method?

 

Please send me your SVG Files to my email
so I can investigate them further,
I had never a report like this, so I am very interested
to see your case. you can find my email on my website
http://svgimporter.com/contact/

Thank you!

 

Hi!
thanks, I have this method on my eye for a long time
but there are some catches.

This method works only if you don't zoom your camera too much.
Also, it adds up a lot of vertices and triangles. Actually it doubles the original.
So your antialiasing would be heavy by the complexity of the scene,
which Fullscreen anti-aliasing is only heavy by the screen resolution.
I want to implement it, but I have to explain the pros and cons really good

thanks for your feedback!

 

Hi I just got your product yesterday, and it works great so far... but I've only played around with AI files.

But I want to move away from Adobe Products.... and I'm really thinking on either Affinity Designer or Corel Draw.

Are there any... restrictions I should be aware when Using any of those programs to make compatible SVG files with your side?...

 

Hi,

Affinity designer and Corel Draw should be ok.

What you should avoid are masks.
They are simply too complex to render, so there is almost no benefit of having them.
But you can use clip-paths, they are supported in the latest version.

Also don't use bitmaps inside SVG, I did not found a pleasing solution how to support bitmaps in SVG
so it is easier for me, to concentrate on pure vector graphics.

Still, if you would have any problem, just email me
and we could solve that.

Best regards!

 

Hello in regards of Draw Calls and Sprite Packing, what is the impact on the GPU and can you still pack your sprites into atlases?

 

Hello,

there is no sprite packing involved.
Draw Calls can be easily optimised with Static Batching.
The optimisation workflow is the same as with 3D graphics.
The impact on the GPU depends on the complexity of your screen.
But even modern mobile GPU chips can handle more than 4 million triangles and more than 200 draw calls.
So it should not be a problem at all, and our game Mimpi Dreams proves that.
Mimpi Dreams will be available by the end of this year on iOS and it runs around 60fps even on iPad 2.

 

I have sent the files by e-mail I hope you can give me some tips.
Here is an example screenshot: the top versions are sprites (.png)
the bottom versions are the svg converted objects.

 

Thanks.
Turn on anti-aliasing please
http://docs.unity3d.com/Manual/class-QualitySettings.html

 

I tought i did but as i never touched the settings before i now saw i did not turn them on after all.
This makes a big difference in quality indeed! thanks!

Now i only have 2 problems left:

1 the drawcalls:
every object i add gives a extra drawcall even if it is the same source object and the same sorting layer.

2 parts of the svg file are hidden. (like the helicopter mouth)

 

Good to know

1)
For static objects, you can use static batching
which will reduce your static objects just to one draw call.

for dynamic objects, it is quite complicated because that is
actually the limitation of Unity native dynamic batching.
http://docs.unity3d.com/Manual/DrawCallBatching.html

The reason why this does not happen with sprites is simply
because they have only 4 vertices and 2 triangles per sprite.
In practice if you don't have hundreds of moving highly detailed
helicopters it should not be a problem. But for thousand moving helicopters
it would be actually smarter to use sprites.

For one or two really sharp looking helicopter filling whole screen, you would have hard time to
get the same quality and performance with sprites.

It is wise to use both for different cases.

2) The hidden part you mentioned is probably an Image embedded into the file.
I can prove that simply if you open your SVG file in google chrome, it will
show you an broken image symbol

 

I'm having a small issue. I have a SVG (icon) that's all black. I want to recolor it at runtime in Unity... but setting it's color doesn't do anything. Do I have to import white icons only to change their color?

 

Hi,
Please import your icon as white.
The recolor function works the same way as with sprites in Uniy
and if you try to recolor black sprite it will remain black as well.

 

Hi,
I'm thinking about buying this extension, but I'm a bit concerned regarding the lack of SVG animation support. Is this a feature that will eventually be supported? And if not, why? I think vector transformations and deformations are one of the most interesting features of vector graphics.

Either way, the extension looks great, I'll surely get my hands on it soon.

 

Hi,

I am actually right now working on a interface which would be able
to modify the original mesh. That means possibility for

decorators,
warp modifiers,
bone animation and so on.

But It would take some time to make it robust..

Glad to hear that.

 

I'm not sure what you mean by decorators and warp modifiers. What I would be most interested in would be to change the coordinates of individual points.

The game I'm working on relies heavily on vector graphics, so I'm hoping to make the most out of your extension

I'm glad to know you are actively improving SVG Importer!

 

Looks like Unity have updated their OnPopulateMesh/OnFillVBO again in v5.2.1- OnPopulateMesh now takes a VertexHelper instead of a Mesh. Can you please update SVG Importer to accommodate these changes?

Thanks,
Tom.

 

Here's the fixed version of SVGImage.OnPopulateMesh for those running >= 5.2.1p1

Cheers,
Tom.

Code (csharp):

1.  
2.         protected override void OnPopulateMesh(VertexHelper vh)
3.         {
4.             if (sharedMesh == null) return;
5.             Bounds bounds = sharedMesh.bounds;
6.             if(m_UsePivot)
7.             {          
8.                 bounds.center += new Vector3((-0.5f + _vectorGraphics.pivotPoint.x) * bounds.size.x, (0.5f - _vectorGraphics.pivotPoint.y) * bounds.size.y, 0f);
9.             }
10.          
11.             vh.Clear();
12.             var vertices = _vectorGraphics.sharedUIMesh;
13.             int verticesLength = vertices.Length;
14.          
15.             if(m_Type == Type.Simple)
16.             {
17.                 Vector4 v = GetDrawingDimensions(preserveAspect);
18.                 for(int i = 0; i < verticesLength; i++)
19.                 {
20.                     var newvert = vertices[i];
21.                     newvert.position.x = v.x + InverseLerp(bounds.min.x, bounds.max.x, newvert.position.x) * v.z;
22.                     newvert.position.y = v.y + InverseLerp(bounds.min.y, bounds.max.y, newvert.position.y) * v.w;
23.                     newvert.color *= color;
24.  
25.                     vh.AddVert(newvert);
26.                     if (i % 4 == 3)
27.                     {
28.                         int ti = i / 4 * 4;
29.                         vh.AddTriangle(ti+0, ti+1, ti+2);
30.                         vh.AddTriangle(ti+2, ti+3, ti+0);
31.                     }
32.                 }
33.             } else {
34.              
35.                 Vector4 v = GetDrawingDimensions(false);
36.                 Vector2 normalizedPosition;
37.              
38.                 // LEFT, BOTTOM, RIGHT, TOP
39.                 Vector4 border = _vectorGraphics.border;
40.              
41.                 Vector4 borderCalc = new Vector4(border.x + epsilon, border.y + epsilon, 1f - border.z - epsilon, 1f - border.w - epsilon);
42.              
43.                 float left = v.x;
44.                 float top = v.y;
45.                 float right = v.x + v.z;
46.                 float bottom = v.y + v.w;
47.                 float size = canvas.referencePixelsPerUnit * vectorGraphics.scale * 100f;
48.              
49.                 float minWidth = (border.x + border.z) * size;
50.                 float minHeight = (border.y + border.w) * size;
51.                 float scaleX = 0f; if(minWidth != 0f) scaleX = Mathf.Clamp01(v.z / minWidth);
52.                 float scaleY = 0f; if(minHeight != 0f) scaleY = Mathf.Clamp01(v.w / minHeight);
53.              
54.                 for(int i = 0; i < verticesLength; i++)
55.                 {
56.                     var newvert = vertices[i];
57.                     normalizedPosition.x = InverseLerp(bounds.min.x, bounds.max.x, newvert.position.x);
58.                     normalizedPosition.y = InverseLerp(bounds.min.y, bounds.max.y, newvert.position.y);
59.                  
60.                     if(normalizedPosition.x <= borderCalc.x && border.x != 0f)
61.                     {
62.                         newvert.position.x = left + normalizedPosition.x * size * scaleX;
63.                     } else if(normalizedPosition.x >= borderCalc.z && border.z != 0f)
64.                     {
65.                         newvert.position.x = right - (1f - normalizedPosition.x) * size * scaleX;
66.                     } else {
67.                         newvert.position.x = v.x + normalizedPosition.x * v.z;
68.                     }
69.                  
70.                     if(normalizedPosition.y >= borderCalc.w && border.w != 0f)
71.                     {
72.                         newvert.position.y = bottom - (1f - normalizedPosition.y) * size * scaleY;
73.                     } else if(normalizedPosition.y <= borderCalc.y && border.y != 0f)
74.                     {
75.                         newvert.position.y = top + normalizedPosition.y * size * scaleY;
76.                     } else {
77.                         newvert.position.y = v.y + normalizedPosition.y * v.w;
78.                     }
79.  
80.                     newvert.color *= color;
81.  
82.                     vh.AddVert(newvert);
83.                     if (i % 4 == 3)
84.                     {
85.                         int ti = i / 4 * 4;
86.                         vh.AddTriangle(ti+0, ti+1, ti+2);
87.                         vh.AddTriangle(ti+2, ti+3, ti+0);
88.                     }
89.                 }
90.             }
91.         }
92.  

 

Thank you,

I must say that this is really not good news.
Because this method has stupid overhead,
so I don't know why they changed this...

 

Hi! Can SVG Importer work with SVG files created from Adobe Flash Professional CS6 (import as svg)?

 

Hi,

I personally don't have Adobe Flash so I cannot test it
but I know that some people are using it, but I think it is not
without problems.

I would recommend using Adobe Illustrator.
You can actually import flash graphics in Adobe Illustrator.

 

I've used both Illustrator and Flash (CC) and both did successful exports to unity with SVGimporter.

Flash offers fewer options when saving a SVG file, but overall there did not seem to be an issue.
The big difference i found is that Illustrator keeps layers as one shape, and overlaps them as meshes during import. (you can choose to enable/disable this)
Flash seems to substract the shapes and create 'cutout' shapes that fit nicely into each other. (mostly. Sometimes it generates a tiny holes)

 

The best answers can give only the actual users.
Thanks for your brief review.

 

Hi Jaroslav, I'm exporting my SVG from CorelDraw and the colours keep changing. So for example, I have a yellow star in CorelDraw:



and when I import the SVG into Unity, it's black...



In Corel this monster has red hair...


In Unity his hair turns black..




Any ideas why this is happening and what I can do to stop it?

Thanks.

 

Hi

First I would ask if you have the latest version of SVG Importer v 1.0.7
and the second thing is if you could send me the problematic SVG files
so I can investigate them further.

http://svgimporter.com/contact/

 

Hi, thanks for the reply - I'm running 1.0.4 and will send you the two SVGs now

 

Hi,

So I tested the SVG files you sent me In the latest version 1.0.7 and it works as expected.
So the only thing which you have to do is to update the plugin
Cheers!

 

Hello, I've reimported SVG importer. It says it downloaded 1.0.7 via the Unity Asset Store but it still says 1.0.4 in the about section.

 

You are correct that is a bug, Did it helped with the import ?

 

If I export out of Inkscape it's fine. It must be something to do with the way Corel Draw exports SVG.

 

Is using a negative scale (-1,1,1) supposed to break batching?
When I use Sprite Renderers this does not happen.
I use this technique for quickly changing the direction of my characters. I can't use Y rotation (0,180,0) because I'm using the Z axis for layering instead of the Sorting Order. So when I rotate it, the entire amalgamation of parts looks completely wrong.

To reproduce, simply drag an imported SVG into the scene, duplicate it a few times, then set the X scale to -1 on any number of them. I also notice that even when they are ALL inverted it still does not batch them, so it's not even a case of only batching the ones that are similarly inverted.

 

Hi,

If you take any 3D mesh and turn it to negative scale it will break the dynamic batching.
This is how dynamic batching works right not in Unity 5+,
Before 5.0 iteration, the batching worked for negative scaling but not for non-uniform scaling.
Unity changed it, that now it works for non-uniform scaling, but it does not work for negative scaling.
I am not sure why this does not affect the sprites, maybe it has simply different pipeline
then the standard mesh filter and mesh renderer components.

We were affected with this behaviour also, and there is more bugs related in Unity to negative scaling.
Like have a game object and put another game object as a child and apply negative scaling on the parent.
Now if you try to me with the child, it behaves like it is snapping.

So, Unity has bugs related to negative transform values which I am uncapable to solve.
It should be reported to Unity directly.

 

Gah. Alright, I guess I'll have to overhaul my code to use the Sorting Order instead :/

On a positive note, I'm finding the performance difference (when it does batch) to be worth it for advantages gained. My characters have about 25 to 50 separate Renderers on them each and the game can have up to 20 characters on-screen at the same time depending on the situation.

 

Omg, I don't know what the hell is wrong with this forum, but I tried to send my post almost 50 times without any result. Does unity forum has some restriction about post length or character usage?

 

I don't think so. I've seen some mile-long posts already. Perhaps it's a slow internet day?

 

I don't know, I hit the post button it looks like it is posted but when I refresh the page, the text is unchanged. :-/

 

Oh I just remembered: Is there any way to get lighting to work?

 

I am working on a new update which supports.

Custom material overrides, which means you could add special shaders and also lighting.
Mesh modification, which means custom UV mapping, mesh skinning etc,
so It would be possible to have one renderer for one character with mesh modifiers.

 

Sounds delicious
Any plans to include a parallel to the Sprite/Diffuse shader with that update?

 

That should not be hard

 

Is it possible to change the Vector on the Renderer through Mecanim?
Mecanim doesn't let me touch the VectorGraphic property for some reason.

 

Hi, Unity does not support custom object swap in animation,
but I already made an hack for that, it is called
SVG Frame Animator, you can find it in the docs:
Page 12:
http://svgimporter.com/docs/SVG Importer - documentation.pdf

it is fairly easy to use and you can do frame by frame animation with it.

 

While trying to find a work around, I thought I had tried this and had no success. I'll have to check again later to see if maybe I was using it incorrectly.

 

Hi Jaroslav,

I bought SVG Importer two weeks ago and have a feature request. I currently render the SVGs to a render texture and don't really care about performance. What I do care about though is quality. It would be very good if I could choose to trade speed for quality and get some nicely anti aliased results in my render texture (without multiplying the resolution of my render texture and down scale it as a post process step).

Cheers,
Patrik

 

Could you please describe your usage more precisely?
The component works this way. You put some files inside the array
and then inside unity animation you animate the slider value, which
switches the vector files. If it does not work, than it is a bug and should be reported.

 

Hi,

when creating Render Texture, you have to programmatically turn on antialiasing
on the render texture, because it does not use QualitySettings.
http://docs.unity3d.com/ScriptReference/RenderTexture.html

Then it should look sharp and smooth. Also, increase the vertex per meter for more details
and it should be excellent.

 

Ah, I see what I did wrong :S
I was using the SVG Legacy Animator instead of the SVG Frame Animator.
Animation is working perfectly now, thanks!

 

I'm having a bit of a problem with gradients coming from Inkscape. If I open the Inkscape svg file in Illustrator everything displays properly. If I then re-save it from Illustrator they will work with SVG Importer. I would like to skip the extra step and just use Inkscape. Illustrator is an extra expense I would like to avoid.

In this Unity screenshot, the converted-via-Illustrator imports are at the top, and the plain Inkscape ones are at bottom.



Is there any possibility of getting this working?

Inkscape Version 0.91
SVG Importer Version 1.0.7

 

Hi,

Inkscape is a big problem right now.
It generates huge SVG files with plenty of garbage.
I would suggest export the file in Adobe Illustrator or Affinity designer.
Personally I am willing to create better support for Inkscape,
but that actually slows down the development a lot.