Search Unity

  1. Improved Prefab workflow (includes Nested Prefabs!), 2D isometric Tilemap and more! Get the 2018.3 Beta now.
    Dismiss Notice
  2. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  3. Let us know a bit about your interests, and if you'd like to become more directly involved. Take our survey!
    Dismiss Notice
  4. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice
  5. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice

SVG Importer | Vector Graphics | Unity UI Supported [RELEASED]

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

  1. AppTeck

    AppTeck

    Joined:
    Jan 31, 2018
    Posts:
    6
    Can you please support us with 2D character animation tutorial? for SVG format
     
    tosiabunio and Jaroslav-Stehlik like this.
  2. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    Ok So then you have to disable all transitions.
    Because I do believe that if you switch states there can
    be transitions going on which are interpolated as well.
     
  3. syamilsynz

    syamilsynz

    Joined:
    Dec 22, 2013
    Posts:
    29
    Now thats the cause of the problem! I set Animation transition duration to 0 and the problem is gone.

    Thank you very much @Jaroslav-Stehlik :)
     
  4. AppTeck

    AppTeck

    Joined:
    Jan 31, 2018
    Posts:
    6
    Can you please let me know when u can make a tutorial for 2d character SVG animation?
     
  5. AppTeck

    AppTeck

    Joined:
    Jan 31, 2018
    Posts:
    6
    Can I slice AN SVG in SVG importer?
     
  6. Rock360

    Rock360

    Joined:
    Oct 26, 2016
    Posts:
    3
    Oddly enough, SVGRenderer generate GC Alloc every frame, if color is set to white.
    It also occurs in Example Projects as well.
    test.png
     
  7. Mario-M701

    Mario-M701

    Joined:
    Feb 15, 2014
    Posts:
    2
    Hi,
    does this plugin includes any kind of script to export AI layers to SVG?
    I see that the alternative (simplySVG) includes it ("Adobe Illustrator compatible SVG exporting script"), and it's the only thing that makes me doubt about which asset to use.

    Does anyone have a script like that?
    (Not sure if the scritpt saves the layer position for further load to unity scene, but it would be awesome!)
     
  8. sokobanjafox

    sokobanjafox

    Joined:
    Aug 8, 2017
    Posts:
    4
    Hi @Jaroslav-Stehlik ,
    I have set Anti Aliasing to on and width to 2 in SVGImporter global settings. I noticed that when I use SVGImage component, and scale up object - global SVGImporter's AA blures the image. So on scale (1,1,1) it's clear and sharp, but if I scale game object to e.g. (5,5,1) - it's very blurry. I don't experience those issues when using SVGRenderer though. Since I explicitly need canvas object with SVG - I need to use SVGImage. Also sizing object instead of scaling is not good solution for me for numerous reasons.

    I am using Unity 2017.3.0.f3, SVGImporter Version 1.1.6

    Any ideas for solution, or maybe workaround?
     
    Last edited: Mar 9, 2018
  9. dougdodd

    dougdodd

    Joined:
    Apr 18, 2014
    Posts:
    31
    Hi Jaroslav,
    I just bought your software and I am implementing a painting app where players will color individual elements of a drawing. The drawings may have up to 500 elements. I wish to outline (stroke) the shapes and (through code) turn them all white so they can be "filled in" with color by the user. How do you suggest I approach this?
     
  10. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    Slicing of SVGs is unfortunately not supported :-/
    I would recommend rather using a custom shader for this purpose
    which would be much performant than actually modify the geometry it self.
     
    mikolajewskip likes this.
  11. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    Sure thing, will post it there on forum.
    I have two tutorials on my list
    A coloring book and character animation
     
    mikolajewskip and tosiabunio like this.
  12. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    You can send me an email and I can send you a beta version which should fix this problem.
    Right now I do not have a beta supply program and I would need one like hell
    because I dont want to push new version of SVG Importer which is heavy refactored
    but highly untested. But it needs to be done :(
     
  13. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    Hello,
    You can do this directly from Adobe Illustrator
    http://www.tbyrne.org/export-illustrator-layers-to-svg-files
     
  14. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    I am not super sure I do understand your problem
    but SVG Improter already supports Layer modification



    You can see how you can change individual layers via these modifiers
    so you can write your own modifier or use the one already
    bundled in SVG Importer
     
  15. sokobanjafox

    sokobanjafox

    Joined:
    Aug 8, 2017
    Posts:
    4
    @Jaroslav-Stehlik : Hi again, looks like you missed my question... Could you please give me some information on described problem? It would really mean a lot. Thanks!
     
    Jaroslav-Stehlik likes this.
  16. mikolajewskip

    mikolajewskip

    Joined:
    Mar 29, 2017
    Posts:
    16
    try to use scale Z=0
     
  17. mmvlad

    mmvlad

    Joined:
    Dec 31, 2014
    Posts:
    70
    @Jaroslav-Stehlik Hi, I bought your asset and want to implement coloring book. Can I use SvgImage with coloring modifiers?

    I was able to test coloring modifier without any problems with SvgRenderer, but didn't manage to do it with SvgImage.

    Thank you
     
  18. cjsawyer

    cjsawyer

    Joined:
    May 7, 2015
    Posts:
    6
    Does anyone know how I would go about implementing a simple cutout shader on an SVGImage? I want to make an effect of the svg asset “appearing” by cutting out a side-aligned rectangle whose width animates down to 0.

    I don’t need anythg other than flat, single color opaque shading.
     
  19. sokobanjafox

    sokobanjafox

    Joined:
    Aug 8, 2017
    Posts:
    4
    Hi, thanks for your reply. I tried that, but no luck. Issue is still there.
     
  20. mikolajewskip

    mikolajewskip

    Joined:
    Mar 29, 2017
    Posts:
    16
    some stuff that may be worth checking:
    - antialiasing (uncheck it on asset and retry)
    - z position of object
    - z scale
    - if this is prefab, put in on scene change some value and click apply
     
  21. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    Oh strange, would give it a shot to test it.
     
  22. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    I get it, the scaling is definitelly an issue. I would probably have to come up with completelly different approach.
    I think if you scale the Z as well proportionally with the other components it should work well.
     
  23. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    Hello,
    You can use Unity masks they are compatible.
     
    cjsawyer likes this.
  24. Bibzball

    Bibzball

    Joined:
    Sep 26, 2015
    Posts:
    11
    Hi,

    Been using SVGImporter for a while now, and we love the asset!

    However, we're using gradients for the first time and we're having an issue (Unity 2017.3) : whenever I save the scene, any material that uses the GradientColorOpaque or GradientColorTransparent shader has its GradientColor and GradientShape texture destroyed, resulting in every object being white.
    Whenever I hit the play button, everything goes back to normal.

    However, if I deploy the project on any platform, every SVGRenderer that uses these materials are white.

    Anyone had that issue before? Does @Jaroslav-Stehlik have a clue?

    Thanks!
     
  25. sokobanjafox

    sokobanjafox

    Joined:
    Aug 8, 2017
    Posts:
    4
    Hi, thanks again for posting,

    - Anti-aliasing is something I need, so it's not an option for me to turn it off
    - I tried to change Z position of object
    - I tried different values for Z scale, and also didn't help. Tried all of them, 0, 1 and mostly same value as @Jaroslav-Stehlik suggested. So If I scale object to some local scale value, I tried to keep them same e.g. obj.transform.localScale = new Vector3(3.0f, 3.0f, 3.0f), but same thing.

    If I can try out something else, please suggest. Honestly, I would just use SVGRenderer component and solve my problem, but I don't have a way to mask object with SVGRenderer when it exceeds borders of parent container. Now, for that Rect2DMask serves the purpose, and that's the only reason why I need SVGImage somponent. You can take a look of image I attached, where I tried uniform scaling. Thanks!
     

    Attached Files:

  26. cjsawyer

    cjsawyer

    Joined:
    May 7, 2015
    Posts:
    6
    For my project, I gave up on the SVGImporter AA, turned it off, and have since been using Unity's built in AA. Seems to work fine and I'll gladly take the minor performance hit in return for never dealing with bugs. This is a great package and it's been invaluable to my project, but this one particular feature has never worked well for me.
     
    mikolajewskip and tosiabunio like this.
  27. Orion

    Orion

    Joined:
    Mar 31, 2008
    Posts:
    201
    Hi,
    the front page says SVG Importer supports symbols. Now I tried importing a complete scene (saved as from Illustrator) and the first thing I noticed is that everything that is a symbol is missing.

    Is it a different kind of symbol? Do I have to set some specific options?
     
  28. mikolajewskip

    mikolajewskip

    Joined:
    Mar 29, 2017
    Posts:
    16
    thanks for the screenshot, I did not realize this is UI. Try this

    1) Create material with shader sprites default
    2) Use this material

    As someone mentioned here - you can switch to antialiasing by graphics settings instead of antialasing for every object.
     
  29. mmvlad

    mmvlad

    Joined:
    Dec 31, 2014
    Posts:
    70
    @Jaroslav-Stehlik I didn't find the call of PrepareForRendering(...) in SvgImage at all. Though in SvgRenderer it is present and called when needed. When can I expect fix? Thank you
     
  30. crdmrn

    crdmrn

    Joined:
    Dec 24, 2013
    Posts:
    31
    Hi @Jaroslav-Stehlik and thank you for your awesome job on this plugin! Today I made a build for Android, and I noticed that the SVGRenderers using the GradientColorAlphaBlendedAntialiased shader have weird artifacts on the top edge (I highglighted them in the attached picture); do you have any clue what might be causing them? They are not visible in the editor or in windows builds.
    Thank you in advance! :)
     

    Attached Files:

  31. Bibzball

    Bibzball

    Joined:
    Sep 26, 2015
    Posts:
    11
    I actually also have the same issue, interested in what could be causing this. This only occurs on Android, not iOS or Standalone
     
  32. mikolajewskip

    mikolajewskip

    Joined:
    Mar 29, 2017
    Posts:
    16
    @Jaroslav-Stehlik

    Consider following two svg files

    good
    Code (JavaScript):
    1. <svg xmlns="http://www.w3.org/2000/svg" width="7101.5308" height="992.5147" viewBox="0 0 7101.5308 992.5147">
    2.   <title>AtticWallsFloor</title>
    3.   <g>
    4.     <g>
    5.       <g>
    6.    
    7.    
    8.         <polygon points="6675.211 941.406 6478.666 892.295 6519.794 941.406 6560.919 990.515 6719.429 990.515 6675.211 941.406 6675.211 941.406" style="fill: #c0b780;stroke: #686248;stroke-miterlimit: 10;stroke-width: 4px"/>
    9.  
    10.       </g>
    11.  
    12.     </g>
    13.   </g>
    14. </svg>
    bad
    Code (JavaScript):
    1. <svg xmlns="http://www.w3.org/2000/svg" width="7101.5308" height="992.5147" viewBox="0 0 7101.5308 992.5147">
    2.   <title>AtticWallsFloor</title>
    3.   <g>
    4.     <g>
    5.       <g>
    6.    
    7.    
    8.         <polygon points="6675.211 941.406 6630.991 892.295 6478.666 892.295 6519.794 941.406 6560.919 990.515 6719.429 990.515 6675.211 941.406 6675.211 941.406" style="fill: #c0b780;stroke: #686248;stroke-miterlimit: 10;stroke-width: 4px"/>
    9.  
    10.       </g>
    11.  
    12.     </g>
    13.   </g>
    14. </svg>

    The only difference between files is remove value of `6478.666 892.295`

    "Good" file is imported properly with "ignore svg canvas option"
    "Bad" file is not imported properly. Polygon is rendered but there is additional infinite line visible in editor

    This svg is rendering properly in chrome for example. Currently I am digging into code - any help would be appreciated

    edit:
    I managed to find that in SVGGraphics.cs at the end of ` Create` method - in variable ` shapes` there is following path at shapes[1]

    ```
    0) (64.8, 8.9)(66.2, 8.9)(66.2, 8.9)(64.8, 8.9)(65.6, 9.9)(67.2, 9.9)(67.2, 9.9)(65.6, 9.9)(66.8, 9.4)(66.3, 8.9)(66.3, 8.9)(66.3, 8.9) (-21474.8, -21474.8)
    ```

    Basically it leads to clipper.cs which is too creepy for me ;)
     
    Last edited: Mar 30, 2018
  33. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    Hello, please send me a stripped down project so I can proceed it to testing.
    Thank you!
     
  34. mediajolt

    mediajolt

    Joined:
    Nov 1, 2012
    Posts:
    8
    I'm trying to write a Color.Lerp to an SVG object, and while my debug log shows the color as changing, I'm not seeing the changes happen to the SVG object either in the game view or the inspector. I even have the color being set in the Start method just to test it, and that isn't working, but according to what I've found here about scripting the color for an SVG object, I'm doing everything right. I've got the Standard SVG Opaque material assigned (set to SolidColorAdditive). Nothing's changing. Here's what I've written:
    Code (CSharp):
    1. using System.Collections;
    2. using System.Collections.Generic;
    3. using UnityEngine;
    4. using SVGImporter;
    5.  
    6. public class colorSweep : MonoBehaviour
    7. {
    8.  
    9.     [SerializeField]
    10.     Color leftColor = new Color32(251, 140, 0, 255);
    11.  
    12.     [SerializeField]
    13.     Color rightColor = new Color32(0, 159, 201, 255);
    14.  
    15.     [SerializeField]
    16.     GameObject background;
    17.  
    18.     Color bgColor;
    19.  
    20.     void Start()
    21.     {
    22.         bgColor = background.GetComponent<SVGRenderer>().color;
    23.         bgColor = leftColor;
    24.     }
    25.  
    26.     void Update()
    27.     {
    28.         float xPos;
    29.         float clampedPos;
    30.         xPos = GetComponent<Movement>().clickedPos.x;
    31.         clampedPos = Mathf.Clamp(xPos, 0, 1);
    32.         bgColor = Color.Lerp(leftColor, rightColor, clampedPos);
    33.         Debug.Log(bgColor);
    34.     }
    35. }
    Any help would be hugely appreciated! Thanks!
     
  35. tosiabunio

    tosiabunio

    Joined:
    Jun 29, 2010
    Posts:
    93
    Try to use Sprites-Default material and see if it helps.
     
  36. shaneparsons

    shaneparsons

    Joined:
    May 5, 2015
    Posts:
    41
    Its been quite a while... did you ever find a solution for this? My app desperately needs an update w/ an antialiasing fix.
     
  37. _ben

    _ben

    Joined:
    Apr 21, 2013
    Posts:
    6
    Hey @Jaroslav-Stehlik, just wanted to say how much I appreciate you being honest about the issues you have been having and it's clear how much effort you are putting in to support your community. I can't imagine how much work it is to support a succesful plugin and I hope you keep taking care of yourself! <3
     
    ElKrullo and tosiabunio like this.
  38. ElKrullo

    ElKrullo

    Joined:
    Feb 24, 2013
    Posts:
    17

    Try adding this in your update method after the Color.Lerp function.
    Code (CSharp):
    1. background.GetComponent<SVGRenderer>().color = bgColor;
    Although, I think it would be a good idea to avoid using GetComponent in the Update method. Instead, you could store the Movement and SVGRenderer in variables in the Start method and reference those instead.
     
    Jaroslav-Stehlik and tosiabunio like this.
  39. Thor_e

    Thor_e

    Joined:
    Sep 4, 2015
    Posts:
    14
    Another attempt, now properly...

    Hello @Jaroslav-Stehlik

    Thanks :)
     
  40. Gingerbeer

    Gingerbeer

    Joined:
    Aug 10, 2015
    Posts:
    4
    Hello,

    I got tons of shader error when I'm building an app for android.
    Anyone have any idea about how to fix this?

    Thank you in advance ^^.

    PS.
    Unity 2017.3.1p4

    Screenshot_1.png
     
  41. NaoyaKurihara

    NaoyaKurihara

    Joined:
    Apr 29, 2014
    Posts:
    3
    Hi, I have a question.
    I want to flip horizontally svg renderer in order to change character direction right and left.
    Is there any way to flip svg renderer? or Should I just set minus value to transform scale?
     
  42. tosiabunio

    tosiabunio

    Joined:
    Jun 29, 2010
    Posts:
    93
    I'm rotating 180 degrees around Y axis. I'm using tweener to do that because I want gradual change but scale sign change would work for immediate changes as well.
     
    Jaroslav-Stehlik likes this.
  43. NaoyaKurihara

    NaoyaKurihara

    Joined:
    Apr 29, 2014
    Posts:
    3
  44. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    Hello!
    Color is a struct that means it cannot be referenced!
    Thas is c# language thing not an SVG Importer problem :)

    1. using System.Collections;
    2. using System.Collections.Generic;
    3. using UnityEngine;
    4. using SVGImporter;

    5. public class colorSweep : MonoBehaviour
    6. {

    7. [SerializeField]
    8. Color leftColor = new Color32(251, 140, 0, 255);

    9. [SerializeField]
    10. Color rightColor = new Color32(0, 159, 201, 255);

    11. [SerializeField]
    12. GameObject background;

    13. SVGRenderer renderer;

    14. void Start()
    15. {
    16. renderer = background.GetComponent<SVGRenderer>();
    17. renderer.color = leftColor;
    18. }

    19. void Update()
    20. {
    21. float xPos;
    22. float clampedPos;
    23. xPos = GetComponent<Movement>().clickedPos.x;
    24. clampedPos = Mathf.Clamp(xPos, 0, 1);
    25. renderer.color = Color.Lerp(leftColor, rightColor, clampedPos);
    26. }
    27. }
     
    ElKrullo likes this.
  45. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    Thank you,
    It is super kind of you!

    My question is, I want to push an update to asset store
    but I am super scared about the outcome.
    I refactored a lot of the code.
    Do you think that putting the old version aside
    so people can rollback is an option?
    Thanks!
     
  46. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    Yeah, the solution is that I will update SVG Importer with new shaders.
    Do you guys know any distribution channel for beta builds?
    Unity does not have anything like that.
     
    shaneparsons likes this.
  47. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    Hello!

    I belive you are maybe putting the materials in wrong field.
    You have to put them inside the SVG Renderer or SVG Image
    not in the actual mesh renderer.
    The mesh renderer is quite confusing to be honest,
    it is possible to hide it for sure, I just want to make it less a black box...
     
    Thor_e likes this.
  48. Jaroslav-Stehlik

    Jaroslav-Stehlik

    Joined:
    Feb 20, 2012
    Posts:
    482
    That is super weird!
    Maybe try to remove SVG Importer and reimport it?
     
  49. tosiabunio

    tosiabunio

    Joined:
    Jun 29, 2010
    Posts:
    93
    Some of us could beta test new version for you ahead of the upload to AS.
     
    shaneparsons likes this.
  50. killianChicoisne

    killianChicoisne

    Joined:
    Jul 5, 2017
    Posts:
    2
    Hello,

    I have a bug that i can't resolve.
    When i try to import any svg files in unity, i got errors about my svg files that are corrupted.
    I tried with some that was created on illustrator, some took from internet, but every import will failed.

    Here a screenshot of errors on unity.
     

    Attached Files: