Search Unity

  1. Calling all beginners! Join the FPS Beginners Mods Challenge until December 13.
    Dismiss Notice
  2. It's Cyber Week at the Asset Store!
    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. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Sure, just contact me on my email. You can find it there: http://svgimporter.com/contact/
     
  2. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,

    Right now they are not, because most people do not experience any problems
    with the clippaths which are in the importer right now.
    Do you have any specific SVG so you can show me your case?
     
  3. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello That is bug right now, thanks for your report!
     
  4. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    831
    Does this work at runtime? Mobile support?
     
  5. petterhyden_svt

    petterhyden_svt

    Joined:
    Dec 15, 2015
    Posts:
    1
  6. pep_dj

    pep_dj

    Joined:
    Nov 7, 2014
    Posts:
    154
    Thanks, I've sent a message using the contact form
     
    Jaroslav-Stehlik likes this.
  7. BrendanKZN

    BrendanKZN

    Joined:
    Jun 22, 2011
    Posts:
    157
    Hi guys. Does this asset work well with Puppet 2D? Anyone with this combination?
     
  8. startleworks

    startleworks

    Joined:
    Jun 8, 2013
    Posts:
    33
    I would definitely intend to use this with Polymorpher. Can the meshes be used with this?
     
  9. JyriKilpelainen

    JyriKilpelainen

    Joined:
    Sep 5, 2011
    Posts:
    76
  10. jisomark

    jisomark

    Joined:
    Dec 12, 2013
    Posts:
    10
    Heya,

    We're running our whole UI based on SVG importer atm, working great so far. Now i tried to update it to the newest version, and running into problems with UGUI assets with no gradient. Even though the asset is set to never use gradients, looks like code is trying to access the UV maps and blowing up. Here's the stactrace, any ideas on how to fix or what we're doing wrong?

    IndexOutOfRangeException: Array index is out of range.
    SVGImporter.SVGImage.OnPopulateMesh (UnityEngine.UI.VertexHelper vh) (at Assets/SVG Importer/Plugins/Core/SVGImage.cs:480)
    UnityEngine.UI.Graphic.OnPopulateMesh (UnityEngine.Mesh m) (at C:/buildslave/unity/build/Extensions/guisystem/UnityEngine.UI/UI/Core/Graphic.cs:447)
    UnityEngine.UI.Graphic.DoLegacyMeshGeneration () (at C:/buildslave/unity/build/Extensions/guisystem/UnityEngine.UI/UI/Core/Graphic.cs:405)
    UnityEngine.UI.Graphic.UpdateGeometry () (at C:/buildslave/unity/build/Extensions/guisystem/UnityEngine.UI/UI/Core/Graphic.cs:376)
    UnityEngine.UI.Graphic.Rebuild (CanvasUpdate update) (at C:/buildslave/unity/build/Extensions/guisystem/UnityEngine.UI/UI/Core/Graphic.cs:338)
    UnityEngine.UI.CanvasUpdateRegistry.PerformUpdate () (at C:/buildslave/unity/build/Extensions/guisystem/UnityEngine.UI/UI/Core/CanvasUpdateRegistry.cs:149)
    UnityEngine.Canvas:SendWillRenderCanvases()
     
  11. oleyb

    oleyb

    Joined:
    Nov 8, 2012
    Posts:
    15
    If you have a copy of the asset you are trying to instantiate somewhere off-camera but in the scene, then the one you instantiate will never be pink. This is just another work-around. I have a gameobject somewhere far off-camera with each of the SVG assets I plan to instantiate as a child.
     
  12. Arganoid

    Arganoid

    Joined:
    Oct 12, 2013
    Posts:
    16
    I'm doing a game involving flags, but many flags (downloaded from Wikipedia) don't draw correctly. e.g.

    https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg
    https://upload.wikimedia.org/wikipedia/en/a/ae/Flag_of_the_United_Kingdom.svg
    https://upload.wikimedia.org/wikipedia/en/b/b9/Flag_of_Australia.svg
     
  13. Kiupe

    Kiupe

    Joined:
    Feb 1, 2013
    Posts:
    528
    Hi,

    When the gradient issue will be fixed ? Having the bug for a while now and it's very annoying.

    Thanks
     
  14. HolyShovel

    HolyShovel

    Joined:
    Jun 19, 2013
    Posts:
    156
    Doesnt work with Curved UI plugin... =(
     
  15. AnneDraaisma

    AnneDraaisma

    Joined:
    Jul 14, 2014
    Posts:
    13
    Hi, I purchased your plugin to test it. It looks very promising. I have a question about the workflow. Do you have any Illustrator scripts to improve or speed up the exporting of svgs? Especially for artists creating multiple svg's in 1 document.

    Thanks in advance!
     
  16. bakno

    bakno

    Joined:
    Mar 18, 2007
    Posts:
    562
    Is it possible to download the converted .asset file from the internet using WWW?

    It is mentioned here that is possible, but I am unable to convert the downloaded bytes into an asset.

    Thank you
     
  17. startleworks

    startleworks

    Joined:
    Jun 8, 2013
    Posts:
    33
    yep, there's one here: http://www.tbyrne.org/export-illustrator-layers-to-svg-files
     
  18. AnneDraaisma

    AnneDraaisma

    Joined:
    Jul 14, 2014
    Posts:
    13
  19. bakno

    bakno

    Joined:
    Mar 18, 2007
    Posts:
    562
    Unable to download the converted SVGAsset file, we are exporting an Asset Bundle and downloading it using WWW.

    This is a WebGL project. And since it just needs to render the already created SVGAsset, we would like to strip the Plugins folder and just have the necessary ones in order to have a small build.

    Is this possible?
     
  20. jasonMcintosh

    jasonMcintosh

    Joined:
    Jul 4, 2012
    Posts:
    71
    I'm running into this exact issue in the latest version. Was there ever a fix for it?
     
  21. jasonMcintosh

    jasonMcintosh

    Joined:
    Jul 4, 2012
    Posts:
    71
    If the artist is using "art boards," Illustrator will export them all at once as separate SVGs. There's an option on the save dialog to do that.
     
    Jaroslav-Stehlik likes this.
  22. Kiupe

    Kiupe

    Joined:
    Feb 1, 2013
    Posts:
    528
    Hi,

    It's been 12 days I asked if the gradient issue will be fixed and I had no answers. I know you are working on your game but so do I ;-) So it will be great to know when it will be fixed because so far my game visual is broken and it's really a pain to constantly duplicate the SVG with the gradient and then remove the first one.

    Thank you
     
  23. jasonMcintosh

    jasonMcintosh

    Joined:
    Jul 4, 2012
    Posts:
    71
    He responded to me privately and said he was delayed because his Mac had to be repaired. I'm sure he'll catch up soon.
     
    Jaroslav-Stehlik likes this.
  24. Syrul

    Syrul

    Joined:
    Jan 15, 2013
    Posts:
    5
    Hi Guys!

    So I've just bought SVG Importer and was really impressed by its capabilities.
    Our main reason for purchasing this plugin is to try and cut our final project size due to massive usage of various textures.
    I've created a test project where I instantiate 200 prefabs which are technically identical, though one time they are PNGs and the other time they are SVGs.
    The results I received were not as I would imagine, performance wise SVG seems to give a huge overhead over PNGs.

    The test with 200 PNG Prefabs:


    The same test with 200 SVG Prefabs:


    Apart for the massive performance overhead, you can see that there is almost no change on runtime when it comes to memory usage and also the draw calls with SVG reach 203!!! while with PNGs (since it is atlas'd) I only reach 4.
    I did this test on my Nexus 4 (Android).

    Is there anything I'm missing or is it that SVG Importer isn't meant to be greatly used on mobile devices?

    Thanks,
    Aviv.
     
  25. cjsawyer

    cjsawyer

    Joined:
    May 7, 2015
    Posts:
    6
    Seems like the "pink asset" issue is still around.

    After setting or loading an opaque asset, always using this snippet seems to fix the problem.

    Code (CSharp):
    1. GetComponent<SVGRenderer>().meshRenderer.material = // reference to Material with "SVG Importer/UI/Default" shader
    2. GetComponent<SVGRenderer>().meshRenderer.material.color = Color.white;
    3. GetComponent<SVGRenderer>().UpdateMaterials();
     
    Last edited: Jun 24, 2016
  26. cjsawyer

    cjsawyer

    Joined:
    May 7, 2015
    Posts:
    6
    Using SVG's gains you better visual quality and lower filesize over PNG's. It takes much more work to render them because they are loaded as meshes and rendered every frame. If you have many to render at once, stick to PNG's
     
    Jaroslav-Stehlik likes this.
  27. Kiupe

    Kiupe

    Joined:
    Feb 1, 2013
    Posts:
    528
    I'm a bit disappointed here. How hard it is to find time to respond to your customers ? Broken Mac is no excuse, you can use your mobile phone or go wherever you can access internet etc. The author last message is almost one month old, since then, customers are still asking questions and having issues with no idea what's going on.
     
  28. Deathfate

    Deathfate

    Joined:
    Sep 10, 2012
    Posts:
    46
    Hello everyone, the plugin has a lot of potential but still need some tweaking, here is a list of things that EVEN WITH JAROSLAV FIX STILL NEED TO BE RESOLVED:

    - Gradients, they appear whenever they want. Normally without the play on they are fine but as soon as you hit play boom, all white... (HUGE PROBLEM)
    - There are a ton of SVGAtlas Objects that are created on application play but dont get destroyed when application stops. (Annoying)
    - Some SVG aren't imported correctly, they have things in the preview that shouldn't be there, some of them are correct when used in svgrenderer but others not (this is the tiniest problem)

    As for performance:
    - The SVGRenderer checks every damn frame if he is white or not, I added a bool when I changed the object color and performance increased A LOT if you have 200 or more assets as I had.
    - Try to lower the quality number as much as possible, and if possible try that your SVGAssets have 300 or lower vertex. This enables dynamic batching and reduces a lot of drawcalls. This is the most important thing you can do to gain fps.
     
  29. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
  30. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,
    Right now it is not working with Puppet2D.
     
    BrendanKZN likes this.
  31. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Mesh modifiers are fully under development right now and
    they have fairly easy API for extending them or writing completelly
    custome one. Also new version will have some modifiers already written.
     
  32. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,
    This is possible only without gradients,
    you can export your SVG asset as a simple mesh and then use
    simple vertex color shader.
    But gradients needs special system which is deeply integrated
    in SVG Importer, so that would be probably too hard.
     
  33. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    you can send me an email to get an hotfix.
    it is still in beta so I did not put it on the asset store publicly.
     
  34. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,
    Sorry for the delay, my Mac Book burned so I had to get fix it.
    Did you contact me on email for the hotfix?
    Just checking,
     
  35. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,

    SVG Importer uses meshes which can vary in complexity.
    this gives you a lot of options how to handle them.
    If you want to reduce your performance hit,
    you have to use Static Batching.
    That works only when you mark your graphics
    as static and can be used only on SVGRenderer
    not on SVGImage unity UI which is a Unity limitation.

    with static batching, you can get even 1 or 2 draw calls for the whole
    scene and the CPU will be completely freed.

    The only hit which you get is on dynamic moving objects or UI.
    that is something which is by nature how meshes work in Unity.
    Dynamic batching works only on simple meshes which vector graphics is mostly not.

    The performance hit you are getting on the CPU is probably because
    you are changing the colors very often on a lot of assets.
    Which is heavy on the CPU because we have to recolor every single vertex
    which can be CPU intensive.

    In Mimpi Dreams we were able to have great graphics fidelity and run on low-end mobile devices.
    The solution is to use a lot of static batching and have dynamic objects done with
    less objects or use textures. It is good to utilize both, because it is much easier
    for the CPU and GPU to work with thousands of sprites rather with thousands of
    vector graphics. But for the tradeoff of resolution for sure.
    There is always some tradeoff.
     
  36. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,
    does this happens on hotfix or the asset store version?
     
  37. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    to be honest, the madness sale completely overfilled my zen desk
    so I was replying to emails first and right now I do reply on the forum.

    I completely agree that the response from me is highly nasty
    and I should do something about it.

    So I decided that I will raise the price of the plugin because the support which I am right now
    giving completely shuts the development itself.

    I am deeply sorry for my inconvenience
     
  38. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    - gradients issue, did I send you the hotfix?
    - SVG Atlas will be not visible in the new version
    - Could you please send me these SVGs?

    - SVGrender I completely agree with you on that overhead. The issue is that
    whenever you want to animate any property with Unity animator you don't have
    any info about that variable is change or not, so you have to check for change every
    frame, which is a waste of performance but the only known way how to give the option
    to animate variables with Unity animator.
     
  39. Deathfate

    Deathfate

    Joined:
    Sep 10, 2012
    Posts:
    46
    I just sent you the changed I made to the scripts to improve performance, I did so It can be animated without breaking anything, I'm using layered objects with no static batch, maybe you should check if they still work but they should as my changes only replaced the color == Color.white and _lastColor == _color conditions. Sent you an email more detailed of what I changed.

    The gradient problem exists even with your hotfix but only while playing the game and not in the editor when it is not being played. Hope you can fix this asap as it is imo the biggest bug in the plugin.

    Keep up with the good work Jaroslav, your plugin is awesome.

     
    Jaroslav-Stehlik likes this.
  40. jocyf

    jocyf

    Joined:
    Jan 30, 2007
    Posts:
    252
    I've been working on have more control when playing a Svg frame animation.
    It has loop option (infinite loops == -1) and destroy object when finished playing:

    Hope it helps:

    Code (CSharp):
    1.  
    2. using UnityEngine;
    3. using System.Collections;
    4.  
    5. namespace SVGImporter
    6. {
    7.     public class SVGStartFrameAnimation : MonoBehaviour {
    8.  
    9.         [Range(0.1f, 4.0f)] public float velocity = 1.0f;
    10.         public bool loop = false;
    11.        // [ShowWhen("loop")]
    12.         [Tooltip("Infinite loops == -1.")]
    13.         public int numLoops = 1;
    14.  
    15.         public bool destroyWhenFinished = false;
    16.  
    17.         /// <summary>
    18.         /// Frame by frame animation array..
    19.         /// </summary>
    20.         private SVGAsset[] frames;
    21.         /// <summary>
    22.         /// Current visible frame..
    23.         /// </summary>
    24.         [SerializeField]
    25.         [Disable]
    26.         private float frameIndex = 0;
    27.         [SerializeField]
    28.         [Disable]
    29.         private float lastFrameIndex = -1;
    30.         [SerializeField]
    31.         [Disable]
    32.         private int numLoopsInternal = 0;
    33.  
    34.         private SVGRenderer svgRenderer;
    35.         private SVGImage svgImage;
    36.  
    37.         void Awake()
    38.         {
    39.             GetComponent<SVGFrameAnimator> ().enabled = false;
    40.             svgRenderer = GetComponent<SVGRenderer>();
    41.             svgImage = GetComponent<SVGImage>();
    42.         }
    43.  
    44.         void Start(){
    45.             frames = GetComponent<SVGFrameAnimator>().frames;
    46.             numLoopsInternal = numLoops;
    47.  
    48.             if (!loop) numLoopsInternal = 1; // Security assignment.
    49.         }
    50.  
    51.         /*protected virtual void OnEnable()
    52.         {
    53.             UpdateMesh();
    54.         }*/
    55.  
    56.      
    57.         private void UpdateMesh()
    58.         {
    59.             if(frames == null || frames.Length == 0)
    60.                 return;
    61.  
    62.             int vectorGraphicsIndex = (int)Mathf.Repeat(frameIndex, frames.Length);
    63.             if(svgRenderer != null)
    64.             {
    65.                 if (svgRenderer.vectorGraphics != frames [vectorGraphicsIndex])
    66.                 {
    67.                     svgRenderer.vectorGraphics = frames [vectorGraphicsIndex];
    68.                 }
    69.             }
    70.             if(svgImage != null)
    71.             {
    72.                 if (svgImage.vectorGraphics != frames [vectorGraphicsIndex])
    73.                 {
    74.                     svgImage.vectorGraphics = frames [vectorGraphicsIndex];
    75.                 }
    76.             }
    77.         }
    78.  
    79.         void Update()
    80.         {
    81.             if (!loop) {
    82.                 if (frameIndex >= frames.Length){
    83.                     frameIndex = 0;//Destroy (this.gameObject);
    84.                     numLoopsInternal = 0;
    85.                 }
    86.             } else {
    87.                 if (frameIndex >= frames.Length && (numLoopsInternal > 0 || numLoopsInternal == -1)) {
    88.                     frameIndex = 0;
    89.                     if(numLoopsInternal > 0)
    90.                         numLoopsInternal--;
    91.                 }
    92.             }
    93.  
    94.             if (frameIndex != lastFrameIndex) {
    95.                 UpdateMesh ();
    96.                 lastFrameIndex = frameIndex;
    97.                 if (numLoopsInternal != 0)
    98.                     frameIndex += velocity;
    99.             }
    100.  
    101.             if (destroyWhenFinished & numLoopsInternal == 0) {
    102.                 Destroy (this.gameObject);
    103.             }
    104.         }
    105.  
    106.     }
    107. }
    108.  
     
    Jaroslav-Stehlik likes this.
  41. shaneparsons

    shaneparsons

    Joined:
    May 5, 2015
    Posts:
    41
    @Jaroslav Stehlik is there a way to swap out the SVGAsset of an SVGImage through a script?
     
  42. shaneparsons

    shaneparsons

    Joined:
    May 5, 2015
    Posts:
    41
    @Jaroslav Stehlik Is there a fix for the pink asset issue yet? I see a couple of hacks above, but would rather not implement them if a fix is on the way.
     
    Last edited: Jun 29, 2016
  43. chasse

    chasse

    Joined:
    Dec 10, 2015
    Posts:
    9
    Hmmm I just wanted to add a few gems since I've been working on a game that runs almost exclusively with SVGs on mobile, and noticed some people having issues in this forum post:

    • Avoid using gradients of any sort for performance. The gradient shader is very expensive on mobile. We've since removed ~10 SVGs that were using it (mostly for fog fx) and replaced them with pngs. The FPS went from ~30 to ~60 immediately.
    • We use Puppet2D with the SVG importer, but not directly. A lot of people here still seem to think they're not compatible. They are. You just have to use that nifty tool in the SVG inspector called "Save to Mesh". And you use that mesh directly with Puppet2D, apply the standard SVG shader, and you're set.
    • There appears to be a minor memory leak for SVGs; I haven't yet isolated it, but it's continuously leaking Texture2D's and meshes over time. This might be bad if you run a level instance for long lengths (like an hour), but right now we're just tolerating it. I don't have time to fix this leak myself.

    Enjoy!
     
    Jaroslav-Stehlik likes this.
  44. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Yes, you can send me an email and I will send you the fix.
     
  45. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    By swaping yout you mean frame by frame animation? The SVG Frame Animator should be compatible even with SVG Image.
     
  46. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,

    I am working on the memory leaking right now.
    Thanks for your tips!
     
  47. shaneparsons

    shaneparsons

    Joined:
    May 5, 2015
    Posts:
    41
    Not necessarily frame by frame animation, but more like how you would swap the instance of a sprite for different states (e.g. button-enabled / button-disabled).

    Is this what frame animation is used for? or is there a better way?
     
  48. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hi, the Unity Button component explicitly uses sprites which is something ith I cannot do anything about it.
    you can however write your custom component which will change the SVGAssets based on the state of the button.
    it should be fairly easy.
     
  49. lattejed

    lattejed

    Joined:
    Jul 14, 2016
    Posts:
    3
    Hi there,

    I'm unable to import most SVGs created with Illustrator CC (2015.3.0). Is this a known issue / being fixed?

    The errors are for invalid syntax, sometimes referencing a "."

    [EDIT]

    I'd suggest testing with the current version of Illustrator. This may be an Illustrator issue as I've seen other viewers / importers choke on its output. If it is an Illustrator issue, I'd suggest adding a warning on your sales page.
     
    Last edited: Jul 14, 2016
  50. shaneparsons

    shaneparsons

    Joined:
    May 5, 2015
    Posts:
    41
    I use a plugin for this when I have lots of graphics to export, but when exporting graphics one by one, I find the only way is to use the old save method (w/ selected artboards) to save the svgs.

    All the new, more convenient, methods of exporting svgs seem to strip some characters (0's I believe) from the svgs that break SVG Importer.