Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

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

Discussion in 'Assets and Asset Store' started by Jaroslav-Stehlik, May 4, 2015.

  1. mountblanc

    mountblanc

    Joined:
    Sep 24, 2015
    Posts:
    93
    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.
     
  2. TylerPerry

    TylerPerry

    Joined:
    May 29, 2011
    Posts:
    5,577
    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 :D

    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?
     
  3. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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!
     
    Last edited: Sep 24, 2015
  4. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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!
     
  5. daville

    daville

    Joined:
    Aug 5, 2012
    Posts:
    303
    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?...
     
  6. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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!
     
    Last edited: Sep 25, 2015
    overthere and daville like this.
  7. ExcellS23

    ExcellS23

    Joined:
    Sep 22, 2015
    Posts:
    9
    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?
     
  8. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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.
     
  9. mountblanc

    mountblanc

    Joined:
    Sep 24, 2015
    Posts:
    93
    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.
     
  10. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Thanks.
    Turn on anti-aliasing please :)
    http://docs.unity3d.com/Manual/class-QualitySettings.html
     
  11. mountblanc

    mountblanc

    Joined:
    Sep 24, 2015
    Posts:
    93
    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)
     
  12. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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
     
  13. GamePowerNetwork

    GamePowerNetwork

    Joined:
    Sep 23, 2012
    Posts:
    257
    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?
     
  14. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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.
     
  15. joao-cabral

    joao-cabral

    Joined:
    Sep 20, 2015
    Posts:
    2
    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.
     
  16. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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.
     
    DavidSmit likes this.
  17. joao-cabral

    joao-cabral

    Joined:
    Sep 20, 2015
    Posts:
    2
    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!
     
  18. hogwash

    hogwash

    Joined:
    Oct 12, 2012
    Posts:
    117
    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.
     
    Jaroslav-Stehlik likes this.
  19. hogwash

    hogwash

    Joined:
    Oct 12, 2012
    Posts:
    117
    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.  
     
    Jaroslav-Stehlik likes this.
  20. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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...
     
  21. unity555

    unity555

    Joined:
    Oct 1, 2015
    Posts:
    1
    Hi! Can SVG Importer work with SVG files created from Adobe Flash Professional CS6 (import as svg)?
     
  22. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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.
     
  23. DavidSmit

    DavidSmit

    Joined:
    Apr 1, 2014
    Posts:
    50
    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)
     
    Jaroslav-Stehlik likes this.
  24. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    The best answers can give only the actual users.
    Thanks for your brief review.
     
  25. dlmrky

    dlmrky

    Joined:
    Nov 26, 2013
    Posts:
    13
    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.
     
  26. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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/
     
    mikolajewskip likes this.
  27. dlmrky

    dlmrky

    Joined:
    Nov 26, 2013
    Posts:
    13
    Hi, thanks for the reply - I'm running 1.0.4 and will send you the two SVGs now :)
     
  28. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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!
     
  29. dlmrky

    dlmrky

    Joined:
    Nov 26, 2013
    Posts:
    13
    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.
     
  30. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    You are correct that is a bug, Did it helped with the import ?
     
  31. dlmrky

    dlmrky

    Joined:
    Nov 26, 2013
    Posts:
    13
    If I export out of Inkscape it's fine. It must be something to do with the way Corel Draw exports SVG.
     
  32. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    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.
     
  33. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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.
     
    Last edited: Oct 4, 2015
  34. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    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.
     
  35. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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?
     
  36. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    I don't think so. I've seen some mile-long posts already. Perhaps it's a slow internet day?
     
  37. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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. :-/
     
  38. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    Oh I just remembered: Is there any way to get lighting to work?
     
  39. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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.
     
  40. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    Sounds delicious :)
    Any plans to include a parallel to the Sprite/Diffuse shader with that update?
     
  41. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    That should not be hard :)
     
  42. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    Is it possible to change the Vector on the Renderer through Mecanim?
    Mecanim doesn't let me touch the VectorGraphic property for some reason.
     
  43. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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.
     
  44. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    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.
     
  45. pabu

    pabu

    Joined:
    Mar 17, 2010
    Posts:
    30
    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
     
  46. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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.
     
  47. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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.
     
  48. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    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! :)
     
    Last edited: Oct 13, 2015
  49. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    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.

    Screenshot.png

    Is there any possibility of getting this working?

    Inkscape Version 0.91

    SVG Importer Version 1.0.7
     

    Attached Files:

    Last edited: Oct 13, 2015
  50. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    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.