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

Hello Byron,

Thank you for your requests.
1) It is possible to create an Asset Bundle from the SVG Asset which is
more efficient than importing during runtime. I think that importing SVGs on the
player itself can be really time-consuming and slow for many assets,
so I would recommend to download SVGAssets which are already prepared and imported
and you can create asset bundles from them or download them simply as an file over the network.

2) Fill methods are not on the list right now
Because most of the effects is possible to create with new UI masks
which is much more CPU friendly and efficient than geometry clipping.

Best regards!

 

I understand,

For the Hue and saturation filter. That could be achieved with a shader.
Blur, Drop Shadow, Glow filters are nut supported and probably they would never be supported.
The reason is performance, it is really not performant at all to do this in real-time.
It would be much more efficient to use a texture for blurring, glow and etc or combine these effects.
You can create drop shadow texture and put vector graphics over that.

Thanks for understandning.
Cheers

 

Not sure if this would work for you, but one way to do this is to use a 2x2 bitmap white rectangle as the image for a mask component which masks the SVG, then size it to the size of the SVG. Then you can adjust the fill for the mask image.

Edit: Oops Jaroslav's posts didn't show up when I was reading the thread before I replied. I basically repeated what he said.

 

Speaking of performance and new features. It would be awesome with a high quality render to texture implementation for when you want a static backdrop with high fidelity and low performance impact.

Cheers,
Patrik

 

I am not sure if Render Texture is considered as it has low-performance impact
When you want to render something to a Render Texture first, you have to allocate
uncompressed render texture.

for example: iPad Retina
Resolution 2048×1536
Number of pixels in total: 3,145,728
Required render texture Memory: 3,145,728 pixels * 4 channels * 8 bits = around 100 MB

1) You cannot move this graphic because you would have to rerender it.
and you cannot scale this graphic because you would have to increase the render texture resolution
or you have to rerender the texture, which is less efficient than having vectors as meshes directly.

2) If you lose your Gfx context you have to rerender the Render Texture.

3) Rendering anything in Render Texture does not seem performant to me in any way.
You use render textures only where it is necessary like image postprocessing, security cameras, reflections etc.

So the best solution would be to use a static texture for your vector graphics with some compression
to reduce the memory consumption. You would use less memory, but your file size of the game will increase.
Because you cannot compress Render Textures, this is not possible to do in realtime on low and mid-end devices.
You would have ugly artefacts with compressed texture and you cannot scale it over its own resolution without
losing quality. So these are the reasons why SVG Importer does not use textures.

Cheers
Jaroslav Stehlik

 

Hi, Jaroslav.

I'm not clear if SVG Importer allows loading SVG files in runtime (using resoruces.load), could you comment on this please? Thank you in advance.

 

Sure, SVG Importer creates an SVG Asset which is converted SVG File to Mesh.
This SVG Asset is possible to load in runtime with Resources.Load if it is in the Resources folder
like any other unity Asset and you can also put the SVG Asset on your server and download it
via any your favourite method. Like WWW or .net sockets, that is up to you.
Or you can use Asset Bundles as well.

 

BTW you can render the SVGs to a Render Texture with ultra settings quite simply if it is really a must have there is the code, you could find it in the new version which is not released yet.

Code (CSharp):

1. // Copyright (C) 2015 Jaroslav Stehlik - All Rights Reserved
2. // This code can only be used under the standard Unity Asset Store End User License Agreement
3. // A Copy of the EULA APPENDIX 1 is available at http://unity3d.com/company/legal/as_terms
4.  
5. using UnityEngine;
6. using System.Collections;
7.  
8. namespace SVGImporter
9. {
10.     public class SVGRenderTexture
11.     {
12.         const int EMPTY_LAYER = 31;
13.         protected static Camera _camera;
14.         protected static SVGRenderer _renderer;
15.  
16.         protected static Camera camera
17.         {
18.             get
19.             {
20.                 if (_camera == null)
21.                 {
22.                     GameObject go = new GameObject("SVG Camera");
23.                     _camera = go.AddComponent<Camera>();
24.                     _camera.cullingMask = 1 << EMPTY_LAYER;
25.                     _camera.backgroundColor = new Color(0f, 0f, 0f, 0f);
26.                     _camera.clearFlags = CameraClearFlags.Color;
27.                     _camera.orthographic = true;
28.                     _camera.enabled = false;
29.                 }
30.  
31.                 return _camera;
32.             }
33.         }
34.  
35.         protected static void RemoveCamera()
36.         {
37.             if (_camera != null)
38.             {
39.                 _camera.targetTexture = null;
40.                 GameObject.Destroy(_camera.gameObject);
41.                 _camera = null;
42.             }
43.         }
44.  
45.         protected static SVGRenderer renderer
46.         {
47.             get
48.             {              
49.                 if (_renderer == null)
50.                 {
51.                     GameObject go = new GameObject("editor SVG Renderer");
52.                     go.layer = EMPTY_LAYER;
53.                     _renderer = go.AddComponent<SVGRenderer>();
54.                 }
55.  
56.                 return _renderer;
57.             }
58.         }
59.  
60.         protected static void RemoveSVGRenderer()
61.         {
62.             if (_renderer != null)
63.             {
64.                 _renderer.vectorGraphics = null;
65.                 GameObject.Destroy(_renderer.gameObject);
66.                 _renderer = null;
67.             }
68.         }
69.  
70.         protected static RenderTexture GetRenderTexture(SVGAsset svgAsset, Rect textureSize)
71.         {          
72.             float aspect = 1f;
73.             if (svgAsset != null)
74.                 aspect = svgAsset.bounds.size.x / svgAsset.bounds.size.y;
75.             int _previewResolution = Mathf.CeilToInt(textureSize.width);
76.             RenderTexture rt = new RenderTexture(_previewResolution,
77.                                                   Mathf.CeilToInt(_previewResolution / aspect),
78.                                                   24,
79.                                                   RenderTextureFormat.Default,
80.                                                   RenderTextureReadWrite.Default);
81.             rt.antiAliasing = 8;
82.             rt.Create();
83.             return rt;
84.         }
85.  
86.         // Call this function during Start or Awake only once
87.         public static RenderTexture RenderSVG(SVGAsset svgAsset, Rect textureSize)
88.         {                      
89.             Bounds bounds = svgAsset.bounds;
90.  
91.             // Initialize
92.             renderer.transform.position = camera.transform.forward * (camera.nearClipPlane + svgAsset.bounds.size.z + 1f) - svgAsset.bounds.center;
93.             renderer.vectorGraphics = svgAsset;
94.  
95.             if (bounds.size.x > bounds.size.y)
96.             {
97.                 camera.orthographicSize = Mathf.Min(bounds.size.x, bounds.size.y) * 0.5f;
98.             } else
99.             {
100.                 camera.orthographicSize = Mathf.Max(bounds.size.x, bounds.size.y) * 0.5f;
101.             }
102.  
103.             RenderTexture rt = GetRenderTexture(svgAsset, textureSize);
104.             camera.targetTexture = rt;
105.             camera.Render();
106.             RemoveSVGRenderer();
107.             RemoveCamera();
108.  
109.             return rt;
110.         }
111.     }
112. }
113.        

and the actual usage is as follows

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using SVGImporter;
4.  
5. public class CaptureRTTest : MonoBehaviour {
6.  
7.     public SVGAsset svgAsset;
8.     public Material material;
9.     public int textureWidth = 1024;
10.     public int textureHeight = 1024;
11.  
12.     // Update is called once per frame
13.     void Start () {
14.         RenderTexture renderTexture = SVGRenderTexture.RenderSVG(svgAsset, new Rect(0, 0, textureWidth, textureHeight));      
15.         if(renderTexture != null)
16.         {
17.             material.mainTexture = renderTexture;
18.         }
19.     }
20. }
21.  

 

Wow! Excelent!

Thank you for your prompt response, Jaroslav. Right at this moment I bought SVG Importer because it has what I need and because it has an excellent rating and support. I will be learning to use it in the coming days. If something comes I shall contact you. Thank you!

 

Hi Jaroslav,

Thank you for putting effort behind this. I am have already implemented a similar solution in my own code but I use ReadPixels with the render texture as a final step to transfer the result to a regular non compressed read/write texture as I assumed that that may improve performance, but also because I needed to do some operations on the result that where not available to render textures.

I actually took a different route to set up the render texture and will try your way to see if it helps the background biased anti aliasing I get around the contours. My second option I guess will be to render without anti aliasing to an oversized texture and write my own antialiasing code for complete control.

Looking forward to the new release!

Cheers,
Patrik

 

I am aiming to keep all the external files readable outside of Unity so they can be changed by designers and non-developers at will. The unique player avatars will grow to +100,000 within the next year so it would be a workflow nightmare importing them all to Unity then back out as Asset Bundles.
The main issue is that Unity's method "texture.LoadImage()" causes a slight stutter and hangs the game on our Android devices. So I'm just trying to find a better way to load in the background without impacting the game's performance.

Cheers,
Byron

 

Should that be 2048*1536*4 + 2048*1536*2 (if full Depth is needed then replace 2 with 3) bytes? 12 582 912 + 6 291 456 = 18 874 368 bytes (or if full depth 25 165 824 bytes)

 

True that! I did forgot to add Depth Buffer

 

Hi devs, what do you think of the new SVG Importer documentation?
http://svgimporter.com/documentation

 

Hi Jaroslav,

The tables in 3.1 and 6.1 are a bit confusing in that the attribute names and their enumerated values use the same styling. Other that that it looks great.

Cheers,
Patrik

 

Hi Jaroslav,
Thank you for your asset! I've used SVG Importer for a while. Are you going to add some auto arrange features? It is a very routine job to arrange all objects manually, especially in complex scenes.

 

Thank you,
Hmm, interesting idea.

I would probably create another poll what people want the most,
because every user has different needs and this feature was here for the first time.
But still interesting idea, how wold you imagine such a feature?
You mean like the Unity UI snapping?

 

Really awesome asset.
I have a use case that requires runtime import of SVG files. Mainly on Stand alone builds. I read that you do not support this feature because of it being too resource intensive. Is there an option can be added so that those who need Runtime support can use it in their project?

P.S. another similar package does support runtime import with small modification. https://www.assetstore.unity3d.com/en/#!/content/46496

 

Yes, I should clean a little bit my API and then it should be doable

 

I'm looking at importing some svg files that use a purely linear greyscale gradient and would like to get a mesh which is just position and vertex colour. Or perhaps just position and the gradient position in the u or v of a texture coordinate as I only need a single component. I would then use my own shader to light the mesh.

What would be the best way to achieve this? I don't mind jumping into the source code if necessary.

 

Hi, the easiest way right now would be to save the SVG asset as a mesh file and alter the mesh it self,
that means to remove the last component uv2 which is not important for you.
I do not recommend to store gradients as vertex colours because that introduces really stupid amount of
garbage vertices and it also introduces many interpolation artefacts.

I am working on a mesh modifier interface which would be easier to post-process meshes
but it is not completed yet. So saving the mesh and altering it seems as the easiest solution.

To alter the source code, I am afraid that the gradient handling is on more places than just one...

 

Hi Jaroslav, I recently purchased SVG Importer and I'm quite happy with the way it works!
For my upcoming game, I need mesh deformation for certain top view character poses. So I was wondering when such a feature would be out (as you have mentioned in earlier posts). If it'll take some time then I'll probably have to use Spine FFD, which means ditching vectors

 

Hi, this highly depends on which FFD implementation would you like to see.
I mean from the user perspective if you have some nice example?
And what is your timeframe when you need the FFD?

Also you have only moving objects on you screen?
We combine Spine with vector graphics quite smoothly with SVG Importer
because we use a lot of static graphics in background which really helps us to shrink the game graphics.
So your game is fully dynamic without any backgrounds?

Cheers!

 

Hi, is there a way to import my svgs without the importer trimming them?

I have a sequence of animations but with trimming they do no align. Manually editing the pivot point will be a pain.

Thanks.

 

Hi,

I would add this feature in the next update probably,
but for now the easiest way of doing this is to add an rectangle under the image
which would have the same size all the time and set stroke to none
and fill opacity to zero and it should work as a workaround.

 

Ah cool, thanks for the the tip!

 

Hi, here is a sample of one of the top view poses to give you an idea of the animation:

Right now it's without FFD; you can see the glitches on the elbows.

So I would need mesh deformation to warp the arm components as they swing to make a smooth transition. It would actually be great to morph between two meshes! (warp + cross-fade)

I'm planning to launch the game by Christmas so would probably need the FFD in a couple of weeks

The game consists of downloadable characters and background scenes. So yes, I would at least provide the background in SVG asset bundle if not the characters.

Hoping for this very useful feature soon!

 

Thanks for the example, the art looks great btw.

For this current case, I would recommend using a Frame Animator.
You can prepare the elbow in 3x different SVGs and then simply switch them.

For sure the FFD modificator would be in one of the next release but I cannot promise which one right now.

 

Thanks
Yes, that's my first plan of action. It's a little tricky though. The images have to align correctly at the time of swapping else it'll look glitchy. In the animation above I cross faded between two child renderers, but the artifacts are still visible.

I think I'll go with the sprite swap technique for now. Spine would be my last option..

 

Hi devs!

this is the feature in the upcoming update,
Geometry Antialiasing


It can help you to antialias graphics without using postprocessing, but it will increase
the complexity of the mesh, still it is an option which can be used for special cases and effects.
It can be used as a blur effect, but it is noninteractive.

I hope you like it, also in the new build there is option for optimizing non-gradient graphics
which will reduce the amount of data sent to a graphics card, which can improve bandwidth
and also the file size.

Cheers!

 

Looks nice
But can you elaborate a bit on how it's working - does it just throw more vertices into the mesh?

 

Around every shape it creates stroke which fades from the original color or gradient to full transparency.
This creates the effect of smooth shape without aliasing or blurry shape when exaggerated.

Pros:
Antialiasing without fullscreen postprocessing
Special effects

Cons:
Complexity of the mesh,
Fixed resolution, does not work when you scale or zoom the image.

This feature is not an ultimate solution for every case, but still can help someone.
If your game is too slow with fullscreen antialiasing you can try to switch to this and try it if it works better or not.

Full-screen antialiasing has the cons of stable predictable performance.
But can be slow on simple scenes with low complexity running on low-end devices.

Geometry antialiasing can be performant on simple scenes with low complexity
but on complex scenes it is not recommended. Because it heavily depends on
the complexity of the image.

 

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

Will a future version be able to draw these correctly?

 

I will take a look at this, thanks!

 

I am using the latest version of SVGImporter in latest Unity 5. The SVGsorter doesn't work. I put it on an empty GameObject then child a few SVG files and although I can see that the SVGSorter is increasing the Z coordinate of each SVGfile (according to its place in the hierarchy in the parent GameObject), visually nothing is happening. I can change the Z coordinates, I can change the Sorting Layer->Sorting Order, I can enable/disable the SVGSorter and it has no effect visually. The only way I can arrange the visual order of the SVG files as I want, is to not use the SVGSorter, and change the Z coordinates manually.

 

Hi,

the SVG sorter in the version on the asset store is not working properly,
please send me an email with your invoice number and I will send you the latest version.
Cheers!

 

Done. I emailed you via your website contact form.

 

Hello. I followed the video in Getting Started with SVG Importer but I am having problems getting the SVGs to react to light without becoming transparent. For example I create a graphic that is a filled blue square partially covered by a filled red circle and save it as an SVG. Then I import it with SVG Importer and set Normals to on.

I created a new Material with the Sprites/Diffuse shader as you mentioned at 7min 48sec. in. The SVG reacts correctly to the lighting but that material makes my SVG a little transparent. Note: The import Rendering Format setting (Opaque or Transparent) has no effect.

Normally, without the new Material the part of the red circle that covers part of the blue box is completely red (opaque). But when I use the new Material with the Sprites/Diffuse shader, that part of the red circle that covers part of the blue box becomes pink (a mix of blue and red since everything seems to be transparent).

How can I get the SVG to react properly to lighting without being transparent? (I tried all the SCG and Unity shaders but none of them give the effect that I want. If I use a shader the keeps the SVG opaque with the proper colors then it doesn't react to the lighting.

 

Hi, You have to use standard SVG shader or standard SVG Specular and it would work
the sprite diffuse works strange and I understand that after I made the video.

 

Those make things even worse. I can mess around with the setting and get rid of the transparency but the colors are very faded out.

Are there any specific settings I should use? The way things are now it looks like I won't be able to use SVGs.

 

Could you please send me some example or screenshots?
I tested the standard SVG shader and it works correctly but without gradients, that is the limitation for now.

 

I'll do that, but when importing, should I use transparent or Opaque Format? Seems that Opaque can't be used with Unity sorting.

IT might be best if i send you a very simple project or unitypackage so you can see the settings I am using.

 

Opaque rendering cannot be sorted via Unity sorting that is true and it is in the new docs.
It is because it uses the depth buffer, a completely different rendering technique than the sprite renderer uses.

 

If I export an SVG in Inkscape what settings should I use. Inkscape has a lot. SimplySCG (your most direct competitor has a good detailed writeup about this in their manual).

 

I know They are reading this forum and writing down notes
the setup is the same. I have to update the documentation that is true.

 

I just emailed you with a Dropbox link to two files: one is the complete project compressed, the other the unitypackage of all the assets in the same project. I explained the problem in the email. Regards.

 

Is it possible to have sliced sprite which are not in the UI canvas ? It works fine for a UI sprite but couldn't find a way to do it with normal SVG sprites

 

Hi,
right now, it is not supported but it will be definitely in the future.
Probably in the next update?

 

We bought SVG Importer for out project and everything seems fine when testing in editor.
The only problem is that we need to be able to parse the svg's and create the meshes at runtime and currently we
couldn't find a way do that. Is it possible to do it and if not, is it possible to add that functionality?

 

Hi,

This functionality is not supported yet, what is your timeframe when you will need it the most?
Cheers!