Search Unity

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
    Could you send me the SVG on my email? Thanks.
    Also in the Load function you actually put there string with the content not the URL.
    just to be sure.
     
  2. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    You have to put the actual data of the SVG in that string not the URL.
    I have to update the docs for sure!
     
  3. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    You have to put your SVG frame animator on your SVG Renderer and then put your SVG Assets in the list as individual frames and after that. You can start animating inside the animation window.
    Hit record button and then you can change frames inside the SVG Frame animator
    which the animation window will create keyframes from.
    Hope that helps!
     
  4. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Also the new version would have finally fully working antialiasing!
     
  5. damianallison

    damianallison

    Joined:
    Apr 17, 2016
    Posts:
    1
    I have a menu script that only accepts Texture2D images (as buttons). You drag them on in the inspector. Is there any possible way to use SVG Importer to generate this Texture2D file and drag into this menu script?
     
  6. SwabbyNat74

    SwabbyNat74

    Joined:
    Oct 27, 2014
    Posts:
    17
    There definitely is @damianallison, first you would use the importing function of the SVG, then write to a texture based on a RenderTexture using the resulting SVGImage.

    Setup a UI Canvas, with a SVSImage inside the hierarchy, and a camera thats looking at it that you'll use as the targetCam in the script below.

    Hopefully this helps....

    Code (CSharp):
    1.        
    2.  
    3. using UnityEngine;
    4. using UnityEngine.UI;
    5. using System.Collections;
    6.  
    7. using SVGImporter;
    8.  
    9. public class ImportVectorToTexture : MonoBehaviour {
    10.  
    11.        public Camera targetCam;
    12.  
    13.        public int _sWidth = 800;
    14.        public int _sHeight = 600;
    15.  
    16.        public SVGImage preview;
    17.  
    18.        public string pathToSvg;
    19.  
    20.        protected SVGAsset svgAsset;
    21.  
    22.     IEnumerator LoadSVG()
    23.     {
    24.            WWW w = new WWW(pathToSvg);
    25.            yield return w;
    26.  
    27.            if (w.error != null) {
    28.                Debug.Log ("Error.." + w.error);
    29.            } else {
    30.                svgAsset = SVGAsset.Load(w.text);
    31.                preview.vectorGraphics = svgAsset;
    32.  
    33.                SvgToTex2D();
    34.            }
    35.     }
    36.  
    37.     public void SvgToTex2D()
    38.     {
    39.            RenderTexture rt = new RenderTexture(_sWidth, _sHeight, 24);
    40.  
    41.            targetCam.targetTexture = rt;
    42.  
    43.            TextureFormat tFormat;
    44.  
    45.            tFormat = TextureFormat.ARGB32;
    46.  
    47.            Texture2D screenShot = new Texture2D(_sWidth, _sHeight, tFormat, false);
    48.  
    49.            targetCam.Render();
    50.  
    51.            RenderTexture.active = rt;
    52.  
    53.            screenShot.ReadPixels(new Rect(0, 0, _sWidth, _sHeight), 0, 0);
    54.            screenShot.Apply ();
    55.              
    56.             // Do whatever you need to do here with the Texture2D you just created.....
    57.     }
    58. }
    59.  
    60.  
     
    Jaroslav-Stehlik likes this.
  7. FlorentFal

    FlorentFal

    Joined:
    Nov 20, 2015
    Posts:
    41
    Hello,

    I'm currently trying to use an SVGImage into a Button instance and cannot . This SVGImage is a illustrator symbol composed of a white square and a black shape to simulate a shadow...

    My goal is to use 9 scale feature once my svg is imported, to be able to change button size without distort the shadow height and width. But I do not find any info in order to make it happen.

    Thanks for your help, btw SVG Importer rocks ;)
     
  8. firstuser

    firstuser

    Joined:
    May 5, 2016
    Posts:
    11
    Hi, just wondering, would it be possible to include support for shadows one day with maybe something like this?

    http://unitycoder.com/blog/2012/10/16/fake-blur-ideas-for-unity-indie/

    He uses meshes with gradient to simulate and I think with some tuning maybe that could be a decent solution or perhaps you may have something else in mind. Anyway, just want to know if it's on the roadmap at all. Thanks!

    Edit: Read through the forum posts and see that you don't intend to do it due to performance reasons, if the fake blur isn't performance intensive it'd be nice but otherwise I understand.
     
    Last edited: May 5, 2016
  9. ibyte

    ibyte

    Joined:
    Aug 14, 2009
    Posts:
    932
    Seems like I am getting a similar error as redrag did but mine breaks the build now on Unity 5.4 B17.

    Shader error in 'SVG Importer/Standard SVG': Program 'fragForwardBase_SVG', error X4506: ps_4_0_level_9_1 input limit (8) exceeded, shader uses 9 inputs. (on d3d11_9x)

    Compiling Fragment program with DIRECTIONAL SHADOWS_SCREEN LIGHTMAP_OFF DIRLIGHTMAP_OFF DYNAMICLIGHTMAP_OFF
    Platform defines: UNITY_NO_LINEAR_COLORSPACE UNITY_ENABLE_REFLECTION_BUFFERS UNITY_PBS_USE_BRDF1 UNITY_SPECCUBE_BOX_PROJECTION UNITY_SPECCUBE_BLENDING SHADER_API_MOBILE
     
  10. Michael_Squiers

    Michael_Squiers

    Joined:
    Nov 6, 2014
    Posts:
    29
    Hi,

    I am having some trouble after the last update. Gradients seam to be messing things up. No matter what option I choose for gradients I still get this error:

    Texture rectangle is out of bounds

    UnityEngine.Texture2D:SetPixels(Int32, Int32, Int32, Int32, Color[])

    SVGImporter.SVGAtlas:RenderGradient(Texture2D, CCGradient, Int32, Int32, Int32, Int32) (at Assets/SVG Importer/Plugins/Core/SVGAtlas.cs:313)

    SVGImporter.SVGAtlas:AddGradient(CCGradient, Boolean) (at Assets/SVG Importer/Plugins/Core/SVGAtlas.cs:382)

    SVGImporter.SVGAsset:get_runtimeMesh() (at Assets/SVG Importer/Plugins/Core/SVGAsset.cs:144)

    SVGImporter.SVGAsset:get_sharedUIMaskMaterial() (at Assets/SVG Importer/Plugins/Core/SVGAsset.cs:282)

    SVGImporter.SVGImage:GetDefaultMaterial() (at Assets/SVG Importer/Plugins/Core/SVGImage.cs:540)

    SVGImporter.SVGImage:UpdateMaterial() (at Assets/SVG Importer/Plugins/Core/SVGImage.cs:587)

    SVGImporter.SVGImage:Awake() (at Assets/SVG Importer/Plugins/Core/SVGImage.cs:73)

    UnityEngine.GameObject:SetActive(Boolean)
     
  11. brockemon

    brockemon

    Joined:
    Dec 21, 2012
    Posts:
    24
    Hi all,

    I noticed that a few of you have been asking for a hotfix to an issue with gradients being filled as a white box. I have emailed the creator but have had no response in about 4 days. What is the best way to go about getting a fix to this?
     
  12. JaimeAL

    JaimeAL

    Joined:
    Dec 4, 2015
    Posts:
    21
    I asked last week when the new version was going to be released, and they were planning to do so this week! If not e-mailing the author for a hotfix will get to you eventually, keep in mind he probably has a lot of other things to do so his reply schedule is all over the place. But replies usually not take longer than a week, and do not hesitate on bumping your e-mail just in case if it has been more than a week!

    Really looking forward for the new version! Hoping it to be finally around this week! :D
     
  13. khart

    khart

    Joined:
    Apr 12, 2015
    Posts:
    2
    Hi Everyone,

    I need some help. I have exported the SVG's from illustrator (with the save settings you have included on your 'getting started' video) and imported them into Unity3D. They appear fine until I make a build for mobile (both iOS and Android) then they turn to all white in Unity and the mobile build. Any idea how this can be fixed? Thanks!
     
  14. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,

    Could you please explain more how your menu script works and why does it accept only Texture2D?
    Thanks!
     
  15. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,

    You have to setup your SVGAsset with the editor button o the asset itself
    and setup the 9slicing. After that, you have to enable the 9slicing on the SVGImage
    change ImageType from simple to sliced.

    Now it should be working, the only thing which can distort your graphics is the scale
    on the SVG Asset. You can try to set the scale to a lower or higher number until the 9slice corner
    get the correct size.

    Hope that helps!
     
  16. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,
    In the new version, of SVG Importer which would hit Asset Store really soon, there is improved antialiasing
    which can be used as a motion blur or blur fake ish effect. Shadow can be obtained by recoloring this blur effect with black color and offsetting.

    Hope this will tease you a little bit.
     
  17. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello there,

    It looks like the standard shader has changed by Unity so it breaks.
    I would recommend removing the shader to prevent any compilation issues.
    I am sorry for this, I would have to write my own standard shader to be
    sure that it will work for more then a couple of months.
     
  18. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,

    Please send me an email to get an instant hotfix.
    Have a nice day!
     
  19. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,

    Sorry for the long delay.
    I replied you today and sent you the hotfix.
    I can only say that SVG Importer is now in much better shape
    and is waiting for submission to the Asset Store.
    Have a great day!
     
  20. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,

    I think I sent you an hotfix today as well.
    If not, please contact me via email.
    Have a pleasant day!
     
  21. SB2020

    SB2020

    Joined:
    Jan 13, 2014
    Posts:
    2
    How to add Assets in bulk to the Frame Animator List? I have 150 frames per clip and the only way I can make it work right now is to add 150 blanks and drag and drop frames individually. I have a lot of clips like this to set up and it is painful!

    Ideal workflow would to be able to populate the list by pointing it at a folder.
     
  22. BrainAndBrain

    BrainAndBrain

    Joined:
    Nov 27, 2014
    Posts:
    100
    I have the same feature request, though perhaps pointing at a folder wouldn't be my preferred method. But until something is implemented, the simplest workaround I've found is to select all of the SVG assets you want and drag them to an existing GameObject. This will make a child GameObject with an SVG Frame Animator component that will be pre-populated with all of the assets you dragged in. One additional caveat though is that the frames may be in the wrong order; it seems like they're ordered by file creation date, not by number, so you may have to re-order them manually.

    Good luck!

    - David
     
    Jaroslav-Stehlik likes this.
  23. SB2020

    SB2020

    Joined:
    Jan 13, 2014
    Posts:
    2
    Thanks for the reply. I tried this, and though reordering them is somewhat fun in a bubblesort kind of way it's not the most productive use of my time :) Seems like it would be easy for Jaroslav to order this list by name on import?
     
  24. JaimeAL

    JaimeAL

    Joined:
    Dec 4, 2015
    Posts:
    21
    I believe this is more of a Unity kind of thing than the plugin itself , dragging and dropping a lot of assets at once to any kind of List would insert them in a random order (or as said by creationdate?) , even if you select them in an specific order Unity won´t care.
     
  25. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    You can select the bulk and drag and drop it in the scene.
    it will automatically create an animation from that.
     
  26. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    The sorting can be done via name after the import.
    I would put that on my todo list.
    Thanks!
     
    Simeon2020 likes this.
  27. khart

    khart

    Joined:
    Apr 12, 2015
    Posts:
    2
    Hi Jaroslav,

    Thanks for the timely reply. I do have another question. We applied the hot fix you provided and made a build, it worked for android but we are still having the issue on iOS of everything being white. Do you know how we can fix this?

    Thanks!
    Kevin
     
  28. kamran-bigdely

    kamran-bigdely

    Joined:
    Jun 19, 2014
    Posts:
    21
    When I put a gameObject (that has svg components attached), I cannot select it in the scene view. I can still select it in the hierarchy window though. It is notable that I have this issue only with svnImporter gameObjects and if I have a gameObject with a sprite renderer component attached, I can easily select it and move it in the scene view.

    By the way, I made my svg file by inkscape.
     

    Attached Files:

    Last edited: May 19, 2016
  29. chasse

    chasse

    Joined:
    Dec 10, 2015
    Posts:
    9
    Thank you for the tool, however when saving to a mesh, it isn't exporting the normals correctly (they appear flipped, but aren't actually applied at all). To fix this, I added this line:

    Code (csharp):
    1. mesh.normals = (Vector3[])sharedMesh.normals.Clone();
    before this part in the SVGAssetEditor.cs:

    Code (csharp):
    1. mesh.triangles = (int[])sharedMesh.triangles.Clone();
    I hope that helps others and we can get it into an official patch. Also I hope in the future, you add a checkbox or global settings for not opening the file in explorer (I just omitted it for now). We are using this tool's save mesh feature to create rigs for Puppet2D.
     
    Jaroslav-Stehlik likes this.
  30. evil-nolen

    evil-nolen

    Joined:
    Apr 21, 2016
    Posts:
    1
    Hello. I recently purchased your asset and I cannot get 9-slicing to work. All it seems to do is just crop the image and stretch it out. None of the border content is shown.

    I have verified that the Image Type is NOT "Simple" in the inspector and that the checkbox for "Slice Mesh" is checked in the SVG Editor. The component also has a RectTransform attached to it since it is being used as a UI element.

    What else do I need to do to get 9-slice working?
     

    Attached Files:

  31. picasso789

    picasso789

    Joined:
    May 20, 2016
    Posts:
    1
    Hi, Jaroslav. I have encountered a problem using SVG Importer. I exported svgs (about 30 files) from my illustrator source file and imported them into Unity project. The problem is that more than half of them are not readable. Unity says "SVG syntax invalid". I tried resaving these pics many time with different setting - no result. At the same time the working ones go on working saved with different settings too. Hence the problem is in the pictures itself. But where? They are done absolutely the same way (all layers are flat colored with no transparency. all paths are closed). I opened svg code of both working and not working pics and could not find any difference in syntax.
    Please help me cope with this, I cannot imagine what is causing the error. I cannot afford redrawing tons of graphics with hope that it will maybe work. Thanks for advance.

    P.S. Attached working and not working files. btn_base_yellow.svg - not working, btn_play.svg - working

    P.S.S. Found the root of the problem. Illustrator exported SVG code with errors.
    Example:
    <path d="M-3135.8,301.6c8.1,0.2,13.4-4.1,13.7.1-13.2Z"/> <---- here 13.7.1 is a decimal + additional ".1" which is how Illustrator tries to optimize code. In fact it should look like 13.7 0.1
    Unity considers this an error while other applications mostly understand. The problem should disappear if minification is turned off when exporting.
     

    Attached Files:

    Last edited: May 21, 2016
  32. startleworks

    startleworks

    Joined:
    Jun 8, 2013
    Posts:
    33
    Hi, would it be possible at some point to use the generated meshes with Spine-like assets that work fully inside Unity like Anima2D or other similar products?
     
  33. kamran-bigdely

    kamran-bigdely

    Joined:
    Jun 19, 2014
    Posts:
    21
    I have several states for my player : idle, run, jump and death. The problem is that when I add the second svg frame Animator component, the previous animation I made, gets messed up. Am I doing something wrong? I assume that for every new state, I have to add a new svg frame animator component.
     
    Last edited: May 22, 2016
  34. kamran-bigdely

    kamran-bigdely

    Joined:
    Jun 19, 2014
    Posts:
    21
    I have the pink issue too (described by others earlier) and the workaround suggested by "r0undh0u53" does not work for me.
     
  35. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,

    I have SVG Importer Beta version which would get next week on the asset store. So please everyone who want to test it. send me an email. Thanks!
     
  36. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,

    The SVG Frame Animator is for one single object.
    That means that there should not be more than one SVG Frame Animator per Game Object.
    I would recommend to have multiple game objects with multiple states and enable or disable
    these game objects based on in which state you are.
     
  37. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    I think, you have to precisely click the outline.
    That is however how Unity selects meshes.
    Try some other graphics.
    Hope that explains the problem a little.
     
  38. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Thank you for your report!
    I will add that on the todo list.
     
  39. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello, I replied you on the email and sent you the hotfix.
     
  40. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    485
    Hello,

    With the new version which will available pretty soon
    it will be probably possible to integrate any animation toolkit
    because there is new Mesh Modifier API which actually opens
    new degree for animation possibilities :)
     
    ibyte likes this.
  41. pep_dj

    pep_dj

    Joined:
    Nov 7, 2014
    Posts:
    155
    Hi Jaroslav,

    Current antialias does not work as I would like (pngs look smoother). You said that new version has improved antialias. When it will be published? Can I try a beta? I really like your plugin, but this is the feature I'm missing....
     
  42. Arganoid

    Arganoid

    Joined:
    Oct 12, 2013
    Posts:
    16
    Are clip paths on the roadmap?
     
  43. shaneparsons

    shaneparsons

    Joined:
    May 5, 2015
    Posts:
    41
    What's the recommended way to create a UI Button (in a canvas) from an SVG asset?

    In my latest attempt I created an SVG Image in the canvas, which displays properly, but I can't seem to get any click events on the button to work.
     
  44. ibyte

    ibyte

    Joined:
    Aug 14, 2009
    Posts:
    932
    I usually create a regular UIButton then just replace the image component with a svg image component.
     
    Jaroslav-Stehlik likes this.
  45. shaneparsons

    shaneparsons

    Joined:
    May 5, 2015
    Posts:
    41
    Ah okay perfect – thanks!
     
  46. shaneparsons

    shaneparsons

    Joined:
    May 5, 2015
    Posts:
    41
    Does anyone have any advice on how to replace the `Sprite`, `List<Image>` and `Image` references with either `SVGAsset` or `SVGImage` in the following code?
    Code (CSharp):
    1. public Sprite unselectedPage;
    2. public Sprite selectedPage;
    3. ...
    4. private List<Image> _pageSelectionImages;
    5. ...
    6. _pageSelectionImages = new List<Image>();
    7. ...
    8. Image image = pageSelectionIcons.GetChild(i).GetComponent<Image>();
    9. ...
    10. _pageSelectionImages[_previousPageSelectionIndex].sprite = unselectedPage;
    11. _pageSelectionImages[aPageIndex].sprite = selectedPage;
    I apologize if the chopped up code causes any confusion, you can download the full script here.
     
    Last edited: May 27, 2016
  47. martibergoglio

    martibergoglio

    Joined:
    May 28, 2015
    Posts:
    14
    Hi everyone, im try to make a custom button with an SVG Image component, i just create a UIButton and then replace the Image component with a SVG Image component, but i want to use custom shapes buttons, for a png image i add an AlphaRaycasterFilter script and i can obviate the transparent pixels and all works fine, but with this SVG Image i cant...is any way to do that on SVG Image?

    Thanks
     
  48. ibyte

    ibyte

    Joined:
    Aug 14, 2009
    Posts:
    932
    I wonder if something like this will work - http://forum.unity3d.com/threads/none-rectangle-shaped-button.263684/#post-2146709

    Edit - I tried it and it works if you add that script and a Polygon 2D Collider to your button. You need to manually edit the polygon to cover your shape. I am not sure if there is a nice way to auto generate that collider based on the mesh shape.

    https://gyazo.com/53f855a192d4e1b88c8d64ce837fe49f
     
    Last edited: May 28, 2016
  49. martibergoglio

    martibergoglio

    Joined:
    May 28, 2015
    Posts:
    14
    It works so thanks!
    But i think that use a polygon collider for every button on my UI is not very good thinking optimization...
    So, for now i believe that i will use png images, if you are thinking on implement this feature in the future please let me know.

    Regards
     
  50. ibyte

    ibyte

    Joined:
    Aug 14, 2009
    Posts:
    932
    Hopefully Jaroslav has a nicer/cleaner solution.
     
    Jaroslav-Stehlik likes this.
unityunity