Search Unity

  1. Are you interested in providing feedback directly to Unity teams? Sign up to become a member of Unity Pulse, our new product feedback and research community.
    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. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    Ok, I found the solution. In Inkscape:
    1. "File" -> "Save As..."
    2. Change "Save as type" to "Optimized SVG"
    3. Hit the "Save" button
    4. Select your options (default works fine) and hit "Ok"
    Voila, the new file will work with SVG Importer :)
    NB: Keep and use an original Inkscape formatted file for editing in Inkscape!
     
    overthere and Jaroslav-Stehlik like this.
  2. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Amazing! Thanks!
    I will put this in the docs.
    You are my savior :)
     
  3. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    Glad I could help :)

    While this did solve my gradient problem, I don't know if it will fix any other problems that may (hopefully not) exist. From reading the Inkscape docs it didn't seem as though there were too many other oddities in there. I sincerely hope it works for others with more complicated vectors.
     
  4. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    574
    Hi, a couple questions:

    1. In the Unity UI, does SVG Importer support fills like left to right, radial, etc. like the built-in Image component?
    2. If using Deferred, where we can't use the antialiasing in the QualitySettings, would postprocess AA help with the jagged edges of vector graphics?
    Thanks.
     
  5. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    1. Right now it is not supported and for the future, I am not sure if there is any real benefit from supporting this.
    I can see the benefit for usage, but not for the actual performance.

    2. Postprocess AA should definitely help!
     
  6. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    It seems I spoke too soon after all :(
    The Optimized SVG method does not work when 2 or more objects share the same gradient reference.
    It still does a wonderful job of reducing garbage in the file though. In the attached screenshot you can see the settings used to produce the smallest SVG file (as far as I've found).

    Export Settings.jpg

    Unfortunately, this means that a modification would still be needed to make this work with SVG Importer.

    In a sense, this is a more optimized version of what Illustrator does, since the gradient is only defined once in the file. If the gradient were complex and used 100 times, the Illustrator output would be much larger as it duplicates the same gradient data for each path.
     

    Attached Files:

    Jaroslav-Stehlik likes this.
  7. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi

    I have installed unity 5.2.1
    and also Unity 5.3.0 beta 2
    and I don't see any problems,
    perhaps the patch version had some
    strange regression bug in it?
     
  8. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    574
    I just bought SVG Importer... I found that I can use the Unity UI Mask component with an SVG Image as a child to get the same effect as a radial fill which works just as well as a filled sprite!

    I've been testing in deferred, linear, and HDR with postprocess antialiasing, and I'm getting some interesting/strange results. Postprocess AA works with the SVG only when it is set to Opaque or Transparent. When the SVG is set to UGUI and is placed as an SVG Image in a Canvas, Postprocess AA has no effect and I'm left with lots of jaggies.

    However, if I go into the quality settings and enable MSAA antialiasing (which shouldn't work in deferred or with HDR on according to the Unity docs), the UGUI SVG Image gets antialiased(!), but the Opaque/Transparent SVG doesn't. I thought you can't get MSAA in deferred rendering, so how is the UGUI SVG Image getting antialiased?!

    So it would seem that the optimal solution in deferred is to use Postprocess AA for non-UI vectors, and enable MSAA for UI vectors. I don't know how that's possible, but I'll take it. From my testing, enabling MSAA in deferred has no effect on anything else in the scene, and doesn't prevent HDR from working.

    Can someone else confirm this?
     
    Jaroslav-Stehlik likes this.
  9. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485

    Please don't do both.
    You run 2x fullscreen antialiasing post-processing per frame which will hurt your performance extremely.
    I would suggest you to render your canvas in a specific camera in which the antialiasing post process effect is
    and then try it if it works in your case.

    UI Canvas if set to overlay works like a separate camera,
    that is the reason why it does not work for your post process filter.

    Also if you need more cameras than one in your game setup,
    try to add your post process effect to the latest camera. The one which is rendered the least.
     
  10. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    574
    All right, for performance considerations, removed MSAA in deferred and did some more testing:

    As you mentioned, if the canvas is set to Screen Space Overlay, there is no way to add Postprocess AA to SVGs because it renders even if there are no cameras in the scene, and adding AA to any camera in the scene does nothing.

    If the canvas is set to Screen Space Camera, and a second camera rendered latest is used just for that (with culling set to UI), then we can get Postprocess AA on both the UI and world objects with just AA enabled on this second camera. However, with Screen Space Camera, we lose the performance benefits of Overlay mode, but we gain the ability to place objects in front of the UI if so desired.

    Thanks for the tip! Looking forward to designing a resolution independent UI with vectors without the problems with bitmaps. I know you have other priorities with SVG Importer that come first, but just wanted to reiterate a request for importing SVGs from the file system at runtime hopefully some time in the future.
     
    Jaroslav-Stehlik likes this.
  11. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi,

    Importing the SVG during runtime is not a problem.
    I just see a problem with the actual performance.
    I am very performance oriented person :)
     
  12. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    574
    I understand... also, I may have spoken too soon about Screen Space Camera. Enabling Post AA for antialiased SVGs means any text in the UI gets affected too, resulting in blurry text. Not sure what to do here...

    Edit: Unless I stick with the original solution and its performance impact, or create two UIs, one just for Vector in Camera Space and one for text in overlay mode and try to keep them synced, which would be a logistical headache with positioning, animations, enabling/disabling, etc.
     
    Last edited: Oct 15, 2015
  13. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    With forward rendering it is really easy that you can use antialiasing without problems
    but with deferred rendering I don't have any experience.
    The blurry text is strange, because transparent objects should not be written in z-Buffer,
    so it should not be affected at all. Strange behaviour.
     
  14. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    574
    Yeah, it's getting a little complicated with deferred. Since I'm developing for Standalone, the performance impact for the first solution should be minimal according to the profiler.

    Btw, I'm using Photoshop to export SVGs and it seems to import fine.

    With one SVG on screen (non-UI), I'm getting 48B of allocation every frame, from Renderer.get_sharedMaterials() in SVGRenderer.OnWillRenderObject(). If I add some SVGs from the demo project, some of them add another 48B of allocation, and some don't add any. UI SVGs don't add any allocation.
     
  15. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    thanks I will take a look at it!
     
  16. ortin

    ortin

    Joined:
    Jan 13, 2013
    Posts:
    221
    Last edited: Oct 18, 2015
  17. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
  18. ortin

    ortin

    Joined:
    Jan 13, 2013
    Posts:
    221
    Don't have beta 2 installed, but it is in beta 3.
    mesh.png
     
    Jaroslav-Stehlik likes this.
  19. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    So I tested the 5.3.0 beta 3 and the Unity GUI does not work on its own.
    When I put there regular image with sprite, it is flashing like a disco ball
    and sometimes it does not render at all.
     
  20. PyroStudios

    PyroStudios

    Joined:
    Sep 23, 2012
    Posts:
    239
    Hi Jaroslav! I'm loving SVGImporter so far!

    I'm however running into an issue. I'm switching all my SpriteRenderers to SVGRenderers and I'm now missing the IsVisible property which Im using to destroy objects when off screen.

    Is there a way to replicate this with SVGImporter that I may have overlooked?
     
  21. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    HI,

    You can look at the MeshRenderer component which is present
    on every SVGRenderer component which has the isVisible property as well.
    I would probably integrate an function which will do the same thing so you don't have to
    call get component MeshRenderer.isVisible

    Is it understandable?
     
  22. PyroStudios

    PyroStudios

    Joined:
    Sep 23, 2012
    Posts:
    239
    That worked! thanks.
     
  23. ortin

    ortin

    Joined:
    Jan 13, 2013
    Posts:
    221
    Works fine for me. At least in the Editor.
     
  24. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    I am running mac, and you?
     
  25. ortin

    ortin

    Joined:
    Jan 13, 2013
    Posts:
    221
    Last edited: Oct 22, 2015
  26. Michael_Squiers

    Michael_Squiers

    Joined:
    Nov 6, 2014
    Posts:
    35
    Hi, I like the asset so far. Are you going to add API Documentation to SVG Importer. Im having a hard time adding the vector graphics part to a UI SVG Image at runtime. I would like to be able to swap out different SVG images while the application is running. Any help would be grateful.
     
  27. C_p_H

    C_p_H

    Joined:
    Nov 24, 2014
    Posts:
    151
    "Save Mesh File" feature, peaked my interest. My Mac Swift3d app was the only one I've discovered that came close to importing vector gfx (.EPS in its case with fills, gradients, etc. intact) that can later be exported to a 3d format, however its been discontinued and doesn't support the import of SVG with fills, gradients, etc., so I'm considering another alternative like SVG Importer because other 3d apps appear to only support importing SVG paths.

    In what format would saving the mesh file be in?
    Is it possible to export the saved 2D mesh file intact to a 3d format (i.e. OBJ, DAE, or FBX)?
     
  28. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Sure thing,

    You can swap different SVG images via
    vectorGraphics property at runtime.
     
  29. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi,

    right now the format is native Unity mesh which I think is compatible only with Unity.
    It would be possible in the future to save it to FBX format,
    however, there is one catch. You need custom shaders for the gradients,
    So I don't know if it is possible to have custom shaders in FBX files, I don't think so.
    But it would be possible to export the gradients as series of textures and map
    every texture as a individual gradient.
    But you are the first one with this request I must say:

    http://wiki.unity3d.com/index.php?title=ExportOBJ
    there is some script which exports to OBJ
    it would be without the textures but at least for now, you can use the output mesh.
     
  30. Michael_Squiers

    Michael_Squiers

    Joined:
    Nov 6, 2014
    Posts:
    35
    I figured out how to add at runtime and swap them out. I can adjust the scale to change the size of the svg image. How would I adjust the SVGRenderer to be exactly 1 world unit or x number of pixels in the scene?
    Thanks Again.
     
  31. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi,

    100 pixels at 72 dpi of the document is 1 unit in Unity.
    if you change the default scale of the SVG asset which is 0.01 for example to 0.1
    then it would 100 pixels at 72 dpi = 10 unity in Unity.

    It is btw part of the documentation :)
     
  32. gameDevi

    gameDevi

    Joined:
    Oct 14, 2015
    Posts:
    155
    hello Jaroslav,

    will you be supporting adobe .ai format?
     
  33. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,

    Probably not. Adobe Illustrator can export really good SVG files so there
    is actually no need for using Adobe Illustrator format directly.
    Or is there any specific reason for this feature?
     
  34. bzAdam

    bzAdam

    Joined:
    Aug 4, 2015
    Posts:
    35
    Hi I have just started using SVG Importer but am having trouble with depth issues.

    I have watched all your youtube videos and read the documentation. I have solid svg files and so have set the render mode to "Opaque". This problem does not exist when using "Transparent".

    Here is my example:

    I have a "background.svg" which is made up of two squares filled with color. I set this sorting order to "0". I then have another "object.svg" which I set the sorting order to "5". This "object.svg" however seems to sit in a depth between the two colored squares in my background. Adjusting the Sorting Order makes no difference, my only option is to use the "z" axis on the transform.

    I am not using the "SVG Sorter" because I have a mix of different game object and it throws lots of errors (becasue the is no SVGRenderer) and I would like to sort my depth order manually.

    I have found that setting everything to "transparent" solves this problem. Is there a way to achieve the save results using the "Opaque" render mode or does this need you to adjust the z transform.

    Thanks,

    Adam
     
    Last edited: Oct 26, 2015
  35. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi, for the SVG Sorter I have an update so PM me your email so I can send it to you.
    The Unity sorting layers and sorting order works only for transparent objects.
    Opaque objects has to be sorted with zDepth. That means you have to manually translate
    the objects with the z-value on the transform component. To clearly see the depth,
    please switch from 2D mode to the 3D mode to see the depth.

    Opaque rendering unfortunately cannot be sorted like transparent objects because they
    have different depth, which is a tricky problem. The only way how to streamline this workflow is
    to use the SVG Sorter or sort your objects manually.

    That is the reason why the SVG Importer uses transparent rendering by default because it is much easier to manage.
     
  36. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    574
    Hi, just wondering if you've managed to minimize the GC Allocations and if any work has been done to fix the issues with 9-slicing. Thanks!
     
  37. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi,

    yes the latest version contains bugfix for the GC allocation.
    Unfortunatelly the 9slicing is still in development.
     
  38. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    overthere likes this.
  39. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    I just finished a huge update which should greatly improve the
    compatibility with Inkscape, Corel Draw and probably even Flash.
    Do you want to stress test the build?

    Send me your purchase order number on email.
    Cheers!
     
    overthere likes this.
  40. NioFox

    NioFox

    Joined:
    Dec 28, 2012
    Posts:
    65
    My previous Inkscape tests are now working with the new version :)
    I like the optimizations and other changes as well. Nice one!
     
    Jaroslav-Stehlik likes this.
  41. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    That is awesome news :)
    I am glad that my work was worth it.

    If you spot any problem, please report it.
     
  42. PyroStudios

    PyroStudios

    Joined:
    Sep 23, 2012
    Posts:
    239
    Hi! I've been using this tool for a few weeks and loving it. However I just ran into a problem when using gradients with transparency in it.

    For example I have a circle with a solid color... and directly on top of that circle I have another circle with a radial gradient. The gradient is transparent in the center then fades to black going outward.

    When I import this SVG into Unity... only the top circle is shown with the gradient.. but there's no transparency there. It's just a solid gradient from white to black.
     
  43. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Could you please send the SVG file at my email?

    you can find my email address there:
    http://svgimporter.com/contact/
     
  44. DavidSmit

    DavidSmit

    Joined:
    Apr 1, 2014
    Posts:
    50
    Jaroslav-Stehlik likes this.
  45. alphaprime

    alphaprime

    Joined:
    Jul 22, 2014
    Posts:
    4
    I upgraded SVG Importer in my project from 1.0.8 to 1.0.9 but now the game will not run because I get this error:

    Error CS0101 The namespace 'SVGImporter.Utils' already contains a definition for 'SVGCombineMesh' game_1.CSharp C:\000\prog\Unity_-_projects\game_1\Assets\SVG Importer\Plugins\Core\Mesh\SVGCombineMesh.cs 11
     
  46. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi,

    I would recommend to remove the old SVG Importer plugin before upgrading to new one.
    I should create some update script which will do it automatically.

    Thanks for the info!
     
  47. JohnyK

    JohnyK

    Joined:
    Jun 13, 2014
    Posts:
    13
  48. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,
    It would be probable doable, but the filter which you showed are native
    in Adobe Illustrator, Affinity Designer and probably even in Inkscape are
    capable of recolouring the graphics as well, so why is there need for this
    filter? Thanks for your response, if it is doable inside the vector editor
    then I have to know the reason why to replicate the behaviour inside
    the plugin as well.

    I am working right now on some really sweet features so
    stay tuned :)
     
    JohnyK likes this.
  49. byron_pap

    byron_pap

    Joined:
    Apr 16, 2015
    Posts:
    6
    Hello Jaroslav,

    First off, I'm a big fan of the SVG Importer! Your hard work has definitely not gone unnoticed!

    There's only a couple things stopping me from switching over my whole project to SVGs

    1) Runtime importing.
    I'm currently developing a platform that involves a lot of Data-Driven Programming (Web & Locally). Our Platform will have an endless amount of icons for each game, rewards, prizes etc. Also each player has a unique avatar (currently 1000+ and growing), so these files/assets will need to be downloaded and imported. Unity's texture loading from external folders and lack of multi-threading support is really starting to hinder progress.
    So will this be a reliable possibility in the near future?

    2) Unity UI Fill Methods
    Fill options for SVGImage like the built in uGUI would be an awesome feature. Currently have multiple UI elements that need it so I can't swap them out for SVGs :(


    Thanks Byron
     
  50. JohnyK

    JohnyK

    Joined:
    Jun 13, 2014
    Posts:
    13
    My main issue is that some svgs are exactly the same as some others in my game but i want them to have a hue/saturation filter on them. Also some svgs may have a soft shadow gaussian blur filter as the native Unity UI shadow is not appropriate and looks odd.

    Cant wait to try the new features!
     
unityunity