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. seanbro

    seanbro

    Joined:
    Apr 25, 2013
    Posts:
    13
    How do you import gradients? I've tried saving both linear and radial gradients from Illustrator as SVG 1.1, but it is not displaying the gradient in Unity when I drag it into the scene, it's just a solid color square using only 1 of the 2 colors. Are there any special steps to importing gradients? I've tried changing it to opaque, transparent, and UGUI, and I can't make any sense of the shader options (which revert changes to default after playing a scene anyway).
    gradients.png
     
    Last edited: Jul 22, 2015
  2. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    HI, could you please write me on jaroslav.stehlik@svgimporter.com
    this is a fixed bug so I can send you the latest version.
    Also send me pls your invoice number, Thanks.
     
  3. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    What do you guys thing about this promo image ?

     
  4. overthere

    overthere

    Joined:
    Jun 28, 2013
    Posts:
    110
    For this asset? It wouldn't link at all to svg's for me I'm afraid
     
  5. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    ok, thanks for your honesty :)
     
    overthere likes this.
  6. seanbro

    seanbro

    Joined:
    Apr 25, 2013
    Posts:
    13
    Are you able to cast shadows with the meshes created from SVG files?
     
  7. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Shadows maps should work automatically by Unity.
    or do you mean different shadowing technique ?
     
  8. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi guys,

    I just released a new version on the asset store.
    It has automatic colliders and full stroke support.
    Also it supports frame by frame animation.

    But so far for me the best feature is to be able to send me bad SVG Files which
    do not import correctly. Already I have some new SVG files which helped me
    a lot to find errors in my Importer, so I am glad that you guys can help me without
    having a headache.

    https://www.assetstore.unity3d.com/en/#!/content/38258
     
    pep_dj likes this.
  9. pep_dj

    pep_dj

    Joined:
    Nov 7, 2014
    Posts:
    179
    If I create a prefab that uses SVG textures (svg files converted to meshes), and I store it in Resources folder, should I be able to load it dinamically? (Using Resources.Load). And then, should I be able to free memory used by SVG meshes by using Resources.UnloadUnusedAssets?
     
  10. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi, This should work. Let me know.
     
  11. pep_dj

    pep_dj

    Joined:
    Nov 7, 2014
    Posts:
    179
    Thanks, I'll try. So, the "Runtime import" item in the poll above doesn't refers to dynamically loading meshes into memory, right? It refers to convert SVG to meshes during runtime?
     
  12. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Yes
     
    pep_dj likes this.
  13. fcruzp

    fcruzp

    Joined:
    Jan 14, 2015
    Posts:
    5
    Jaroslav, I'm interested in use SVG importer for UI (using uGUI). Can you make a video tutorial how to make animated UI (like the final part of the real time demo)?
     
  14. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Sure I can.
    I just have to find some free time to record it, but it should not be a problem.
     
  15. BrainAndBrain

    BrainAndBrain

    Joined:
    Nov 27, 2014
    Posts:
    115
    I know I'm a bit late, but I'd love to participate in the SVG Importer beta program to help improve the plugin's stability and reliability, if it is still ongoing. Thanks!
     
  16. Widhi-Muttaqien

    Widhi-Muttaqien

    Joined:
    Aug 2, 2015
    Posts:
    4
    Hi jaroslav,

    I need to create a lot of UI panel mask animation synced with audio. Basically try to create karaoke style subtitling with uGUI. The problem with image mask in the UI panel is that it does not support alpha masking. Only 0/1 mask. The result is jagged pixel. My big question is: "Can your SVG object act as a panel mask? And will it introduce pixel jagginess on the final result?"

    Im very new to Unity, so perhaps I miss something. please advice.

    regards,
    Widhi Muttaqien
     
  17. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi Widhi,

    Unfortunately yes.
    Because SVG Importer is made to be 100% compatible in all ways with the Unity UI
    so if you use the SVG as a mask it will introduce the same jagged artefact as you experienced
    with default Unity mask. The reason for that is that Unity uses stencil buffer for masking which is general
    practice but the downside of this technique is the 0/1 per pixel jagged mask.

    Unfortunately, Unity UI does not have almost any advanced handling of meshes.
    So using geometry mesh as a mask would be very insufficient and slow.
    It is by design of the Unity UI and I hope it will change in the future.
     
  18. Widhi-Muttaqien

    Widhi-Muttaqien

    Joined:
    Aug 2, 2015
    Posts:
    4
    Thank you for the information. Your product looks awesome. I think I will use it for my next project.
     
  19. DavidSmit

    DavidSmit

    Joined:
    Apr 1, 2014
    Posts:
    50
    Hi,

    I just purchased the SVGImporter, and overall it works really nicely! Performance on mobile is also great on my first tests.

    One thing that didn't work for me was the Environment lighting settings on SVG sprites.
    Would it be possible to make the Opaque shader accept the Environment lighting settings, like the SpriteLit shader?
    Cheers!
     
  20. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi,

    Glad to hear that you like the plugin!
    Yes, this is doable. Overriding materials is on my plan.
    I just have to somehow intelligently come up with a good solution,
    because you can override multiple materials in some cases or use only one material.
    This is more on the User Interface side than that it is not a problem in general.
    I just don't want to create some hack solution which would not feel right.
     
  21. DavidSmit

    DavidSmit

    Joined:
    Apr 1, 2014
    Posts:
    50
    Thanks for the quick reply!
    That perfect! I'm not in a rush with this, as there is enough to play with at the moment. Knowing it will happen in the future is great, and I agree with a solid solution over a hack any time. I'll keep my eye out for future updates.
    Thanks!
     
  22. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Good news everyone!

    I just completed the editor for editing pivot point and border for 9-slice
    so it will be in the next update. The reason why iI prioritised this editor
    is because it is really hard right now to edit pivot points without
    instant visual feedback.

     
    oOHicksyOo, pep_dj, DavidSmit and 2 others like this.
  23. DavidSmit

    DavidSmit

    Joined:
    Apr 1, 2014
    Posts:
    50
    After some tests, I don't feel 'fake anti-aliasing' is that necessary for me (but I can't change my vote). The Quality settings on this works fine and performs quite well actually. :)
     
    Jaroslav-Stehlik likes this.
  24. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    So the next big thing in SVG Importer is Symbol support.
    This will help to reduce the number of errors during SVG Import.
    Yay! :)
     
    pep_dj, DavidSmit and zyzyx like this.
  25. sharksharkshark

    sharksharkshark

    Joined:
    Apr 27, 2015
    Posts:
    13
    Hello Jaroslav,

    I sent you a message via the contact form on your site but I will ask here as well so others may see the answer.


    Does your SVG Importer asset allow changing individual shape fill colors? For example, if we took the infamous tiger.svg (https://upload.wikimedia.org/wikipe...ipt_Tiger.svg/512px-Ghostscript_Tiger.svg.png) and wanted to change the green of the eyes to a red color, would your asset easily allow that? I see an example of tinting on your site, but I do not wish to apply a color tint to my whole object, only parts of it.

    I know the RageTools suite allows this functionality but with the tradeoff of lots of children living inside a gameobject for each shape of the svg file.


    Basically, our multiplayer game has one character sprite but four different colors and I would love to just import one collection of images and change specific colors without tinting everything.
     
    juanitogan likes this.
  26. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    The easiest solution which I can think is to create 2x SVG files.

    The first which should stay unchanged.
    The second which should be recolored.

    Put them one on top of each other and you can change the color of the second SVG simply
    with the color picker or color API.

    What do you think ?
     
  27. ibyte

    ibyte

    Joined:
    Aug 14, 2009
    Posts:
    1,047
    Hi Jaroslav, at what point do you expect clipping and group support on your road map?
     
  28. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi,

    I hope that clipping will be finished next week.

    And please could you explain what exactly do you mean by group support?
    I am not sure about that question :)
     
    DavidSmit likes this.
  29. ibyte

    ibyte

    Joined:
    Aug 14, 2009
    Posts:
    1,047
    Inkscape and maybe others support a group tag. What I would like is for a mesh to be created for each 1st or second level group. You would not need to support nest groups beyond that. This way one svg file can generate 1 or more mesh's from the svg art.
     
  30. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    I hope I understand.

    But I worry that this approach would not be user-friendly at all.

    Do you want to have duplicate SVG files and just hide or show root groups on each of them?
    or do you expect that every root group you have will create a separate mesh which you can
    then access via SVG Renderer?

    Because the first approach is somehow doable, but the second is not.
     
  31. ibyte

    ibyte

    Joined:
    Aug 14, 2009
    Posts:
    1,047
    I was wanting the second option where every root group produced a separate mesh. Would you explain a little bit more from your perspective why this isn't feasible with your product? Thanks
     
  32. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Sure, my product tries to be as easy to use as possible.
    So it tries to mimic the behaviour of Unity sprites.
    Managing multiple meshes per SVG Files would require
    that all meshes have to be fully exposed.

    From the User interface point of view, meshes would be children of the main asset
    which is a bit problem because You should always reference the SVG Asset, not the actual Mesh.
    Because the SVG Asset does some postprocessing on meshes on load during runtime so the meshes can
    have working gradients. I don't say it is not possible to do it, but it feels
    that it would require a lot of hacks which will complicate the system a lot.

    From the API interface point of view, meshes would have to been accessed via Arrays instead of
    single mesh property. Also, there is shared mesh and instanced mesh for optimisation
    which would be very redundant in most cases as well.

    This particular feature would require a lot of redesign of the SVGAsset which would not be UX compatible with
    Unity Sprite workflow which would be heavy for the user to learn.

    It is much easier to manually break down your files into separate SVG files or to script some easy tools which will break your SVG files into more SVG files. You can also open your SVG files in Google Chrome and hit Inspect element
    and edit the SVG file with visual feedback. I do this a lot for debugging.

    You can also override the asset postprocessor which will break your SVG files into smaller ones.
     
  33. ibyte

    ibyte

    Joined:
    Aug 14, 2009
    Posts:
    1,047
    Jaroslav, thanks for the explanation. It makes more sense now as I had assumed (incorrectly) the meshs were separate entities after importing them.
     
  34. zbyhoo

    zbyhoo

    Joined:
    Nov 18, 2013
    Posts:
    17
    Hi Jaroslav!

    Thanks for great plugin!

    I was wandering if it's possible to animate object created from svg but not with frame by frame animations, but modifying mesh? For example, I want to bend a tree (simulating wind), where tree is a single mesh imported from svg.
     
    DavidSmit likes this.
  35. moheji

    moheji

    Joined:
    Aug 22, 2012
    Posts:
    5
    Is it possible to read serialized from server?

    IEnumerator Start () {
    SVGRenderer svg = GetComponent<SVGRenderer> ();
    WWW www = new WWW ("http://myserver/avatar.asset"); // The data converted in SVGImporter.
    yield return www;

    SVGAsset asset = (SVGAsset)www.bytes; // error :)
    svg.vectorGraphics = asset;
    }
     
  36. moheji

    moheji

    Joined:
    Aug 22, 2012
    Posts:
    5
    uGUI isn't practical yet.
    ' Draw call' it's too much.
    It's fatal by mobile(iOS,Android...)
     
  37. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Please, could you explain "Draw call it's too much ?

    Our company uses uGUI on iOS with the SVG importer and it works.
    it could be much better and faster if it were possible to pass triangle buffers instead of
    single quad calls which is extremely ineffective for complicated stuff.
    But it still can handle pretty gui.
     
  38. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    I personally did not test that,
    but I think it should be possible as
    with any scriptable object.

    Also, I think there are asset bundles for this specific purpose,
    so you could turn it into asset bundle.
     
  39. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    It should be possible to create some vertex modifiers, but I did not come to that right yet
    because I think it is more important to have robust import :)
    But it should be doable.
     
  40. moheji

    moheji

    Joined:
    Aug 22, 2012
    Posts:
    5
    It's automatic translation. Please permit the point that English grammar is strange.

    >with any scriptable object.
    It was understood. That's right.

    There are few memories, so is there a way to read SVG file (xml) and convert(?) ?
    (Without using an unity-editor.)
    Won't it be practical speed ...?

    It's the one at which GalaxyS is super-speed mobile in China , India and Asia.
    (Not s2 or s3 ...)
    DrawCall is improved in Unity5.
    But when Unity4 isn't used yet, a notice can't be given.
    -----
    Addition
    Requires Unity 5.0.0 or higher. sorry.
    Even if 100 buttons match NGUI, DrawCall is 2.
     
    Last edited: Aug 14, 2015
  41. eshansingh

    eshansingh

    Joined:
    Aug 13, 2015
    Posts:
    8
    $100 is REALLY steep IMHO and it's not indie-friendly.
     
  42. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    I am glad for your humble opinion.

    SVG Importer strives to be the best solution for importing SVG files
    and I am giving a fast and reliable support to everyone who
    buys the plugin.

    I am personally an Indie developer and I already bought
    a lot of asset store packages on the asset store, even some
    more expensive. Many of them shorten my development time a lot
    and I cannot be more thankful to the developers.

    I personally think that being indie does not give anyone
    some special super powers to have everything for free or almost free.
    Being indie, is by my opinion to think out of the box and manage
    as little as you have to boost our efficiency to the max.

    You could of course program it by yourself and spent
    many months of getting somewhere where you can rely on your
    own middleware. Or you could save in most European countries
    5 dinners at the restaurant and buy the plugin instead.

    If you are from a developing country, Czech Republic is
    post-communist country in which many people had to
    work really hard to catch up with the rest of Europe and not end
    up in bankruptcy. So I am a little aware of what does that mean,
    but Unity does not offer discounts to third world countries
    which I personally think is a little bit pity. But still
    I have customers in India and Indonesia.

    I hope that you will find the ideal solution, for your
    project. Have a nice day!
     
    overthere and Magpul like this.
  43. sevensails

    sevensails

    Joined:
    Aug 22, 2013
    Posts:
    483
    Does it support converting a SVG to Texture in Runtime?
     
  44. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi,
    I understand the question, but I don't understand the reason.
    Could you please explain your use case scenario?
     
  45. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Here is the video about how Pivot point and 9-slicing in SVG importer would be handled.
    Also, I am announcing symbol support in the next update which would be awesome for
    anyone who wants to reuse their graphics in their favourite graphics editor.
    And I am still working on the Clip-Paths. I had to rewrite a lot of code, because
    of some design mistakes, but it is going well.
    I hope you enjoyed your holidays, I hope I will also get some free time in near future :D

     
    pep_dj, ibyte and DavidSmit like this.
  46. sevensails

    sevensails

    Joined:
    Aug 22, 2013
    Posts:
    483
    We are making a Painting Game, and using png for all game drawings increased a lot the final build size. Our ideia is to keep all drawing in SVG, and only create the PNG in Runtime when the drawing starts. Do you think is it possible?
     
  47. ibyte

    ibyte

    Joined:
    Aug 14, 2009
    Posts:
    1,047
    @Wagenheimer, you might also wish to look at SVGAssets to compliment SVGImporter
     
    Jaroslav-Stehlik likes this.
  48. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    SVG Importer was designed in such a way, that you should not use any png's at all.
    It uses meshes, which are in most cases smaller and can be much effective in rendering vector graphics.
    The only way to output SVG Importer mesh in texture is to render it into render texture which is by my
    opinion waste of memory and CPU. And should be used only for special effects and post-processing.
    If your png's are used as unity Sprites, you could replace your sprite renderer with SVG renderer and
    benefit from smaller size, memory consumption and better quality.
     
  49. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    You are right. SVGAssets is designed for primarily rendering in Render Texture during runtime.
     
  50. ortin

    ortin

    Joined:
    Jan 13, 2013
    Posts:
    221
    @Jaroslav Stehlik
    Do you have plans to support new 5.2 UI mesh stuff / 2D Rect Mask on 5.2 release?