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

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.

 

You have to put the actual data of the SVG in that string not the URL.
I have to update the docs for sure!

 

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!

 

Also the new version would have finally fully working antialiasing!

 

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?

 

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.  

 

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

 

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.

 

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

 

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)

 

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?

 

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!

 

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!

 

Hello,

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

 

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!

 

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.

 

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.

 

Hello,

Please send me an email to get an instant hotfix.
Have a nice day!

 

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!

 

Hello,

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

 

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.

 

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

 

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?

 

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.

 

You can select the bulk and drag and drop it in the scene.
it will automatically create an animation from that.

 

The sorting can be done via name after the import.
I would put that on my todo list.
Thanks!

 

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

 

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.

 

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.

 

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?

 

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.

 

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?

 

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.

 

I have the pink issue too (described by others earlier) and the workaround suggested by "r0undh0u53" does not work for me.

 

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!

 

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.

 

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.

 

Thank you for your report!
I will add that on the todo list.

 

Hello, I replied you on the email and sent you the hotfix.

 

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

 

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

 

Are clip paths on the roadmap?

 

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.

 

I usually create a regular UIButton then just replace the image component with a svg image component.

 

Ah okay perfect – thanks!

 

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.

 

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

 

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

 

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

 

Hopefully Jaroslav has a nicer/cleaner solution.