SVG Importer | Vector Graphics | Unity UI Supported [OPEN SOURCE]

Can you please support us with 2D character animation tutorial? for SVG format

 

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.

 

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

 

Can you please let me know when u can make a tutorial for 2d character SVG animation?

 

Can I slice AN SVG in SVG importer?

 

Oddly enough, SVGRenderer generate GC Alloc every frame, if color is set to white.
It also occurs in Example Projects as well.

 

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!)

 

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?

 

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?

 

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.

 

Sure thing, will post it there on forum.
I have two tutorials on my list
A coloring book and character animation

 

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

 

Hello,
You can do this directly from Adobe Illustrator
http://www.tbyrne.org/export-illustrator-layers-to-svg-files

 

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

 

@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!

 

try to use scale Z=0

 

@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

 

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.

 

Hi, thanks for your reply. I tried that, but no luck. Issue is still there.

 

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

 

Oh strange, would give it a shot to test it.

 

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.

 

Hello,
You can use Unity masks they are compatible.

 

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!

 

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!

 

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.

 

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?

 

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.

 

@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

 

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!

 

I actually also have the same issue, interested in what could be causing this. This only occurs on Android, not iOS or Standalone

 

@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

 

Hello, please send me a stripped down project so I can proceed it to testing.
Thank you!

 

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!

 

Try to use Sprites-Default material and see if it helps.

 

Its been quite a while... did you ever find a solution for this? My app desperately needs an update w/ an antialiasing fix.

 

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

 

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.

 

Another attempt, now properly...

Hello @Jaroslav-Stehlik

Thanks

 

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

 

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?

 

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.

 

@tosiabunio ah, I like your way. Thank you!

 

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. 
   
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. SVGRenderer renderer;
19. 
    
20. void Start()
21. {
22. renderer = background.GetComponent<SVGRenderer>();
23. renderer.color = 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. renderer.color = Color.Lerp(leftColor, rightColor, clampedPos);
33. }
34. }

 

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!

 

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.

 

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

 

That is super weird!
Maybe try to remove SVG Importer and reimport it?

 

Some of us could beta test new version for you ahead of the upload to AS.

 

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.