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

Hi,

This actual situation could be solved with more than one way.
The first way as you mentioned is frame by frame animation
which is possible with SVG Frame Animator.
You just pust SVG Assets in to the Frame Animator
and then you can animate the current frame which you want to show
via the frame property.

To export SWF frames to separate SVGs you can look at this tutorial for
Adobe Flash https://nipunasthana.wordpress.com/2014/11/30/export-svg-sequence/

The second option would be to animate it directly in Unity.
If the parts of the face would be broken into separate SVGs
it would be possible to animate them the same way.
But I could understand that this could be inconvenient for some animators.

 

Actually no, but I need to check with our designers regarding converting the text to curves.
They have the same quality and functionality?
In addition, is it possible to mark/search for text in the tool?
Thanks

 

Hi, it is possible to read the SVG Document

this function you mentioned full-text search in SVG Document is not supported.
However, you can use the original SVG Document to find your strings inside every SVG Asset.

 

Hey Jaroslav,

I'm new to Adobe Illustrator and would like to ask you a question about your asset, before purchasing it. In the description it says:
Does not support
• Filters 'blur, bevel, drop shadow, glow'
• Texture images

Does that mean that using the Paintbrush tool in Adobe Illustrator with Style -> Textures and painting a texture - would this not be supported when importing into Unity?

Many thanks!

 

Hi Jaroslav,
Is it possible to load SVG Graphics on runtime (Resources.Load) and use them?
Regards

 

Hi,

I am not really sure what this brush produces but if that includes any textures
it would definitely not work.

Cheers!

 

Hi,

Right now you can import SVG Graphics like this.
You put your SVG into your project folder which will create automatically SVG Asset.
the SVG Asset can be then put on server and can be loaded as any other asset from the internet.

If you want to import the SVG at runtime. Which means parsing and tesselating the graphics in runtime,
which is really resource intensive, that would be possible only in the next update of SVG Importer.

If you want to give it a try, send me an email with your Order Number. You can find my contacts on
the website.

 

@Jaroslav Stehlik
I havnt yet bought it thus making sure if SVG Importer can solve the problems im having in my current project.
Is there any possibility of using SVG "Asset" in the resources folder and load it from there instead of a server? This way no need of parsing etc?

 

Yes, that is possible!
You can also use asset bundles for that reason.
http://docs.unity3d.com/500/Documentation/Manual/BuildingAssetBundles5x.html

 

AssetBundles are over kill for my case as ill be needing only 1 svg at a time, so will Resources.Load work? (Thanks for bearing with me)

 

Hello, Is it possible to apply light as it's done with the sprite renderer in this video?
https://unity3d.com/learn/tutorials/modules/beginner/2d/sprite-renderer?playlist=17093

Thanks

 

Yes, it is possible to use Unity lights and there is also a dedicated shader for this reason
SolidColorDiffuseAlphaBlended and SolidColorDiffuseOpaque

 

Yes, you can use Resources.Load or
WWW www = new WWW(url);

 

Is there any progress on getting SVGs such as the flags of Brazil and UK to display correctly?

 

Hello,

Unfortunately, the brazil flag was probably done manually or with some unknown software.
I would recommend to open the flag in some Vector Graphics editor and try it to export to SVG.
Adobe Illustrator, Affinity Designer, Corel Draw and Inkscape should be working properly

 

One more question, is that possible to convert the Resource.Loaded svg asset to Texture?

 

Yes there is an feature for that.

You have to load the SVG Asset as before and then you have to rasterize it,
which can be done via this code.

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using SVGImporter;
4.  
5. public class RenderTextureTest : MonoBehaviour {
6.  
7.     public SVGAsset yourSVGAsset;
8.     public Rect yourTextureRectangle = new Rect(0f, 0f, 100f, 100f);
9.     public Texture2D outputTexture;
10.     public RenderTexture renderTexture;
11.  
12.     void Start()
13.     {
14.         // yourSVGAsset is your loaded SVGAsset
15.         // yourTextureRectangle is your desired texture resolution
16.         renderTexture = SVGRenderTexture.RenderSVG(yourSVGAsset, yourTextureRectangle);
17.         // renderTexture is present on the GPU which can be used in a material, but if you want to preserve it
18.         // even when your application loose focus, you have to read it in to the main memory outside GPU.
19.  
20.         RenderTexture.active = renderTexture;
21.         outputTexture = new Texture2D(renderTexture.width, renderTexture.height);
22.         outputTexture.alphaIsTransparency = true;
23.         outputTexture.wrapMode = TextureWrapMode.Clamp;
24.  
25.         outputTexture.ReadPixels( new Rect(0, 0, renderTexture.width, renderTexture.height), 0, 0);
26.         outputTexture.Apply();
27.         RenderTexture.active = null;
28.  
29.     }
30. }
31.  

 

I have found that re-exporting some flags with minor errors (like Chile) using Inkscape has fixed them. However, re-exporting flags such as Brazil and UK does not result in any change. Is this because they use clip paths? I get the following error:

SVGAsset: Flag_of_the_United_Kingdom2
errors: ClipPath.
path: Assets/Resources/Flags/Flag_of_the_United_Kingdom2.asset

UnityEngine.Debug:LogWarning(Object, Object)
SVGImporter.SVGAsset:_editor_ApplyChanges(Boolean) (at Assets/SVG Importer/Plugins/Core/SVGAsset.cs:1020)
System.Reflection.MethodBase:Invoke(Object, Object[])
SVGImporter.SVGPostprocessor:ImportVGAsset(String) (at Assets/SVG Importer/Editor/AssetPostprocessor/SVGPostprocessor.cs:210)
SVGImporter.SVGPostprocessor:OnPostprocessAllAssets(String[], String[], String[], String[]) (at Assets/SVG Importer/Editor/AssetPostprocessor/SVGPostprocessor.cs:143)
UnityEditor.AssetPostprocessingInternalostprocessAllAssets(String[], String[], String[], String[], String[])

 

It is highly probable, because SVG Importer support only Absolute Clip Paths and manually made SVGs use mostly local clip paths, which are not supported right now. Thanks for the details!
local clip paths will be supported in the future, but I cannot say exactly when.

 

Hi. I have a working snake game but I wanted to change the color of the edge when the opposite side is blocked by a wall. I know it is supposed to be easy to change the color but my code for my edge svg sprite pool has no affect.

Code (CSharp):

1. spEdge0[jc].GetComponent<Renderer>().material.color = new Color32(28, 15, 55, 255);

 

How does the unity engine handle the svg files? I mean speedwise, does the cpu all the work or is the gpu used too? How complex can a game be before it hits a "hardware barrier", especially if intended for mobile platforms. I'm kind of struggling with this, if I go pure vector will my game still be playable or not.

 

Hi,

you should change color directly on the SVGRenderer

Code (CSharp):

1. using UnityEngine;
2. using SVGImporter;
3.  
4. public class ColoringTest : MonoBehaviour {
5.  
6.     void Awake()
7.     {
8.         SVGRenderer renderer = GetComponent<SVGRenderer>();
9.         renderer.color = Color.white;
10.     }
11.  
12. }
13.  

 

Hello,

SVG Importer converts SVG files into 3D meshes in the editor. In your game the vector graphics does not consume almost any CPU and the GPU overhead is the same as with rendering classical 3D geometry withou any special additional computing.

 

That is awesome!

 

I've just tried to use https://nipunasthana.wordpress.com/2014/11/30/export-svg-sequence/But I get Error: Could Not export as SVG. Make sure you have the latest version of Flash Pro, with my trial of flash cc 2015. Is there some way to convert swf to svgs without flash pro? I don't intend to buy/use Flash pro I will be using Toon Boom that uses TVG or swf as vector output. I also cannot save as fla in toonboom.

 

Hello, I'm currently using SVG Importer for my game... but I'm getting a weird thing that's happening when I import the SVG to Unity.

This first image is how it looks in Adobe Illustrator


This second image is how it looks in the Unity editor after being imported


As you can see there's a polygon shape on top of the background... which is set to a very high alpha in Illustrator... but when imported into Unity it loses some of that Alpha and it looks strange. I'm using the latest version of Illustrator CC. I can send you the .Ai file.

 

Hello Jaroslav!
Thanks for a wonderful and nicely crafted plug in! I really think it can help me with the game i am developing.

But I've got a minor problem, similar to the earlier message from PyroStudios. I have made some vector art in Illustrator CC 2015 in RBG, and saved it as an SVG 1.1, it looks like this:

Then I drag and dropped it into Unity (5.2.0f3), and got this preview:


Seems it loses some color(alpha) in the process and i cant figure out how or where to fix it.
It would be nice if you could help?

Don't know if it will fix the problem, but will try out Illustrator CC2014 and see if the same happens.

 

Hello. I need discount! PLEESE!

 

This is something I really need. In short, I want people to be able to import assets while playing the game, like SVG files and use them for themes the game. Will this future update let me do that?

 

Puppet2d support PLEESE

 

SVGAssets is (at the moment) the only SVG plugin that allow such functionality. But it render SVG on textures/sprites, not to triangles+shaders; take a look.

 

Hi Jaroslav,

We're currently suffering from a strange issue when importing one of our Ui assets into unity. Original on the left, unity import on the right:


Does anyone have any idea what might be causing this?
It seems to only effect certain elements.

Thanks

 

The Image:

 

Hi there,
I fully understand. That is a great idea btw.
For now, it is possible to load SVGs at runtime, but the import time heavily depends on complexity of your SVGs
so keep that in mind. You can message me to get the latest version via email.

But to be honest, I am focusing right now more on animation support, because as already mentioned,
some people want Puppet2D support which I fully understand. But to be honest, this
would require relying on third party library which logically changes quite often.
Which means that SVG Importer already has to adapt to Unity updates and bugs, which happen
more frequently in latest updates and also the Puppet2D would introduce bugs and updates,
which is absolutely normal but for SVG Importer it would slower and complicate the development
by an order of magnitude.

I personally prefer stability over feature rich experience...

 

Hi, please send me the SVG file on my email.
my email address can be found on the SVG Importer contact page
http://svgimporter.com/contact/

 

Hi there,
I should have a look on that. Sorry for the delay!

 

Hi,

Make sure that your document is set to RGB and that all your colours are set to RGB as well.
you can find a tutorial on how to setup color to RGB here.

 

Hi,

Please contact me on my email:
which you can find here:
http://svgimporter.com/contact/

 

Hi Jaroslav -- first, thanks for a FANTASTIC library. Would recommend it to anyone who needs SVGs.

Now, a question/request -- I'm getting a dozen or so unused variable warnings in your code. Any chance you can release a quick fix to remove these? I know they are just warnings, but I like to address warnings, otherwise after a while I start to ignore them and sometimes that can hide real problems. If you don't have time to do this, I'll go ahead and comment out the unused variables myself, but didn't want to do that if it's an easy/quick fix for you.

 

Please contact me on my email and send me your invoice number, I can send you the latest version:
http://svgimporter.com/contact/

 

The assets, like models, textures and SVG files are going to be loaded during a loading screen, so that won't be an issue for me. I haven't bought your asset yet, but I probably will once I get around to adding SVG support to my theme system.

 

Hi all,

I finally released my iOS game that was entirely developed using SVG Importer. Please check it out!
https://itunes.apple.com/us/app/fishy-origami/id1071705163?ls=1&mt=8

Jaroslav, thanks so much for providing us with this amazing asset. I will definitely continue to use it in my next games.

 

Great work!
I am glad that you like the plugin.
I would definitely create a gallery "games made with SVG Importer"

 

I would recommend a little bit longer tutorial. I was not entirely sure how to control the game. That it is upside down flappy bird which is an interesting twist, also I like that you can swim backwards.

Did you try to turn on antialiasing? I saw that you have jagged edges which can be solved with antialiasing.

 

Thanks for your input. I will definitely improve the tutorial in my next update. What antialiasing value would you suggest using?

 

In my personal experience we have good quality/performance ratio with 4x antialiasing on mobile.
http://docs.unity3d.com/Manual/script-Antialiasing.html
http://docs.unity3d.com/ScriptReference/QualitySettings-antiAliasing.html

 

I'm getting this error now in a big project I've been working on. Everything was working then I tried to upgrade to a newer patch and all hell broke loose.
\
Assets/SVG Importer/Plugins/Core/SVGAsset.cs(1238,109): error CS1061: Type `System.IO.FileInfo' does not contain a definition for `Length' and no extension method `Length' of type `System.IO.FileInfo' could be found (are you missing a using directive or an assembly reference?)

Any ideas?

To me Unity has been very fussy.

 

Is your Unity editor set to the Webplayer platform? If so, try switching to something else and see if the error still occurs.

 

Linear gradients seem to not be working with color stops.. for example this code below doesn't create a solid stop when imported into Unity.. but looks fine outside of Unity.

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="16.75" x2="360" y2="16.75">
<stop offset="0.5" style="stop-color:#37BA94"/>
<stop offset="0.5" style="stop-color:#249678"/>
</linearGradient>

 

This is incredibly incorrect, we've being doing runtime SVG import for ages, directly to triangles - it's performance intensive but it's quite handy for some applications, like loading new store item gfx without updating the app, for instance. Not interested on self promotion, just setting the facts straight.