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

I am waiting the colouring book tutorial and If it is available then kindly share the link . It has been more than three days but did not get the idea how to colour SVG. Started feeling hopeless but now feeling hopeful after seeing your comment. Thanks !

 

Hello everyone. Svg (code under spoiler) was created in Adobe Illustrator, exported from Affinity Designer. When importing into unity3d, irregular polygons are created (Mesh is drawn very far to the side). What could be the problem?

Spoiler: Svg file

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 42 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1,0,0,1,-23.002,-1.54)">
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M166.39,257.46L166.57,247.56L166.74,237.67L163.47,237.61C163.87,243.21 164.16,249.71 164.47,257.42L166.39,257.46Z" style="fill:rgb(229,163,31);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M178.75,237.88L172.75,237.78L172.4,257.56L178.4,257.67L178.58,247.78L178.58,247.77L178.75,237.88Z" style="fill:rgb(229,163,31);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M184.41,257.78L190.41,257.88L190.59,247.99L190.58,247.99L190.76,238.1L184.76,237.99L184.58,247.88L184.41,257.78Z" style="fill:rgb(229,163,31);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M167.1,217.88L161.1,217.77L161.1,219.06C162.378,225.172 163.181,231.374 163.5,237.61L166.77,237.61L167.1,217.88Z" style="fill:rgb(211,130,32);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M172.75,237.77L178.75,237.88L179.11,218.09L173.11,217.99L172.75,237.77Z" style="fill:rgb(211,130,32);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M172.75,237.77L172.93,227.88L166.92,227.77L166.75,237.66L166.75,237.67L166.57,247.56L172.57,247.66L172.75,237.77Z" style="fill:rgb(216,146,22);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M184.76,238L190.76,238.1L191.11,218.32L185.11,218.21L184.76,238Z" style="fill:rgb(211,130,32);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M184.93,228.09L178.93,227.99L178.75,237.88L178.76,237.88L178.58,247.77L184.58,247.88L184.76,237.99L184.93,228.09Z" style="fill:rgb(216,146,22);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M167.28,207.99L167.27,207.99L167.45,198.09L161.45,197.99L161.09,217.77L167.1,217.88L167.28,207.99Z" style="fill:rgb(216,146,22);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M173.1,217.99L179.11,218.09L179.28,208.2L179.46,198.31L173.46,198.2L173.28,208.09L173.1,217.99Z" style="fill:rgb(216,146,22);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M166.92,227.77L172.92,227.88L173.27,208.09L167.27,207.99L166.92,227.77Z" style="fill:rgb(229,163,31);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M191.47,198.52L185.46,198.42L185.29,208.31L185.11,218.2L191.12,218.31L191.29,208.41L191.47,198.52Z" style="fill:rgb(216,146,22);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M185.29,208.31L179.29,208.2L178.93,228L184.93,228.1L185.29,208.31Z" style="fill:rgb(229,163,31);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M167.28,207.99L173.28,208.09L173.45,198.2L173.63,188.31L167.63,188.2L167.45,198.09L167.28,207.99Z" style="fill:rgb(211,130,32);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M179.28,208.2L185.28,208.31L185.46,198.41L185.64,188.52L179.63,188.41L179.46,198.31L179.28,208.2Z" style="fill:rgb(211,130,32);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M155.32,204.74L155.44,197.88L150.11,197.78C152.052,199.939 153.796,202.268 155.32,204.74Z" style="fill:rgb(216,146,22);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M157,207.8C158.805,211.369 160.149,215.152 161,219.06L161.2,207.88L157,207.8Z" style="fill:rgb(229,163,31);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
<g transform="matrix(1,0,0,1,-126.983,-180.605)">
<path d="M155.44,197.88L155.32,204.75C155.94,205.75 156.51,206.75 157.04,207.8L161.27,207.88L161.73,182.27L155.73,182.59L155.44,197.88Z" style="fill:rgb(211,130,32);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
</g>
</g>
</svg>

 

I'll fixed (add one line after line 500 in SVGLineUtils.cs):

Code (CSharp):

1.  
2. points.RemoveAll(p => (float.IsNaN(p.x) || float.IsNaN(p.y)));
3.  

 

Hey guys, I'm having issues with displaying SVG images as UI on a orthographic camera. When the 'size' on the camera is set low, SVG UI elements look great. But when I zoom out a ways (setting the size high on the camera), the images become very blurry. Any thoughts?
Note that though the line appears blurred in the game view, it is normal looking in the scene view.

 

Line code, if anyone needs it:

Code (CSharp):

1. <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.94 15.12">
2. <defs><style>.cls-1{fill:#fff;}</style></defs>
3. <title>Simple Line</title>
4.   <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
5. </svg>

 

This plugin have configurable VPM quality, for vertex count. It have not infinite resolution, but only in specific borders.

 

The quality setting when importing the SVG? I have just tried setting that to 100000 instead of the default 1000, with absolutely no effect.

 

Fixed! Setting the Canvas to "Screen Space - Camera" Fixes the burring

 

Hi SVG Importer Team,


I'm using your library (love it) to render the response from a API call to a NodeJS API that returns an SVG.

My HTTP response arrives in Unity correctly, I know because it "sort of" renders it and the SVG string received is the same that's sent.

My problem is that if I open the same SVG string in HTML, it renders the Style attribute, appended to the end of the SVG like so.

Code (HTML):

1.  
2.  
3.    ....
4.     <text class="region" x="-230.1574963730429" y="-217.74453178368387" style="font-size: 40; text-anchor: middle;">Qlesqoqsav</text>
5.     <text class="region" x="154.34205943497943" y="239.65855492881394" style="font-size: 40; text-anchor: middle;">Qreltlor</text>
6.     <style>    path, line {        fill: none;        stroke: black;        stroke-linecap: round;    }    .field {        stroke: none;        fill-opacity: 1.0;    }    .slope {        stroke-width: 1;    }    .river {        stroke-width: 2;    }    .coast {        stroke-width: 4;    }    .border {        stroke-width: 5;        stroke-dasharray: 4,4;        stroke-linecap: butt;    }    text {        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;        color: black;        stroke: white;        stroke-width: 5;        stroke-linejoin: round;        paint-order: stroke;    }    text.region {        stroke-width:10;        font-variant: small-caps;    }    svg {        float: right;        background-color: white;    }</style>
7. </svg>

When it arrives into Unity, I load the SVG with this code, it renders the SVG, but without the styles applied.

Code (CSharp):

1.  
2. void OnRequestFinished(HTTPRequest request, HTTPResponse response)
3.     {
4.         Debug.Log("Request Finished! Text received: ");// + response.DataAsText.ToString());
5.         if (svgAsset != null)
6.         {
7.             Destroy(svgAsset);
8.         }
9.  
10.  //checking the style element is present
11.         String suffix = response.DataAsText.Substring(response.DataAsText.Length - 200);
12.         Debug.Log(suffix);
13.  
14. //load svg
15.         svgAsset = SVGAsset.Load(response.DataAsText);
16.         preview.vectorGraphics = svgAsset;
17.     }

The second Debug prints some of the CSS style, so it's clearly retained in the HTTP response, but I can't understand why it doesn't render.

In an earlier post here, I saw you using styles within a defs element, however it's recommended that style is nested within the root element, does it have to be nested in defs to be loaded by your library? Is it possible to apply the CSS on client side through your library?

 

Hello,

I'm trying to export my project to Windows store but the SVG Specular shader returns en error:

I really have no idea how to fix that so a little help would be welcome.

Thanks

 

Hi all. I too am experiencing issues with Unity 2018 and this plugin.
Has anyone had any success placing imported SVG's onto UI Panels in "Screen Space - Overlay" mode?

 

This plugin is pretty much dead. I've already given up any hopes and started moving hundreds of assets to the official Vector Graphics Package.

 

100% dead plugin, waste of money

 

Is there an open source collection somewhere? I wouldn't consider an asset "dead" unless its been left closed source and abandoned. Is that the case here?

If so - money making opportunity is what this is

EDIT:
I contacted the author through the website. If they will allow me to use the code I'll try and rewrite it for the latest unity, and release it free here. No telling if I will ever hear back!

 

It's not open source as far as licensing goes but it is not a closed source asset. It's dead because it's not being actively maintained anymore (abandoned) and yet ... unfortunately is still for sale :\

I think he was trying to sell the asset to someone else all-together but it seems that never happened. Maybe at this point he'd be willing to give it away for free or for a nominal price. Who knows if it's even worth the effort long term if Unity can bring solid official SVG support.

 

We just noticed that the Asset Store page is removed and says that the plugin has been deprecated. Not sure how long this has been but it is something we all knew was coming, sadly.

It seems that the Unity Vector Graphics package has grown quite a bit and we'll probably start looking into that one hoping that Unity will support the package long enough.

 

Hey everyone,
we have been working with the SVG Importer for more than a year and created a lot of assets that are now used in the game. Getting closer to release now, we realized the growing incompatibilities between Unity and the SVG-Importer and that we probably can not ship this way.
So here is my question:
Are there more people out there who ran into similar problems and did anyone worked out a good process or maybe even a tool to move to the Unity-SVG-package?

 

You (and other peoples) can ask unity-devs to write converter tool, as I understand this tool must rename old assets to new assets (extension) and may be change inner structure of asset, anyway the asset is the triangulated mesh on disk (from SVG) and can be rendered on scene with appropriate MeshRenderer and shader, also tool must change shader from old to new - when asset is used on the scene

 

Thanks Alex! I looked into it and it looks like "changing the inner structure of the asset" means it would need to be re-imported, which would be a desaster for us, because all referencess would break and tons of work would need to be re-done.
So I am wondering if the other way - actually getting last version of SVG Importer to run with Unity 2018.x wouldn't be the way to go instead.
Did anyone here using the SVG Importer and compile (and hopefully ship) for consoles?

 

@freejsf, I write "can ask unity-devs to write converter tool", but not to manually replace references in the scenes or manually change file structures
I can't write it myself now, but I 100% sure it can be done with auto converter

 

We've been using it to build for iOS without too many issues, using Unity 2019.2.x versions. The only issue we've had so far was with SVGImage trying to set canvas.additionalShaderChannels and resulting it weird positioning. We just commented out the 2 places that tried to set it and so far so good.

 

Can share with us what script you modified (I suppose SVGImage.cs) and the precise lines to be commented?

 

Yes so in SVGImage.cs, in the function "OnPopulateMesh" and on or around line 384 there is this code:

Code (CSharp):

1.  
2. #if UNITY_5_6_OR_NEWER
3.             if (_vectorGraphics.antialiasing || _vectorGraphics.generateNormals)
4.             {
5.                 canvas.additionalShaderChannels = AdditionalCanvasShaderChannels.TexCoord1 | AdditionalCanvasShaderChannels.TexCoord2 | AdditionalCanvasShaderChannels.Normal;
6.             }
7.             else
8.             {
9.                 canvas.additionalShaderChannels = AdditionalCanvasShaderChannels.TexCoord1 | AdditionalCanvasShaderChannels.TexCoord2;
10.             }
11. #endif
12.  

which I completely commented out. For us this solved some strange positioning issues we were seeing with canvas svgs.

 

Svg importer is finally open source.
Feel free to fork and contribute your fixes or improvements.
https://github.com/jaroslavstehlik/svgimporter

 

If i want to fill color in given svg image outline how I can ? is there any way to do so? if any kindly let me know..

 

@pl_ayground Can you please share your about Coloring in SVG? how u did that. I want to use the same option in my app


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

 

@DeemBabbu

Checkout SVG Modifiers!
You can see how you can recolour separate objects.
This example works in the editor only but if you look at the editor script
it should be possible to do it also in runtime.

 

@Jaroslav-Stehlik Hi, great asset!
I like your asset very much, and thanks for your great work.
But I have a question about this, it there a way to convert a svg render to texture2D at runtime?

Thank you!

 

@freejsf which kind of problems did you encounter? We're actually running SVG Importer on Unity 2019.2 and it seem to run just fine; we even exported it to Switch and it seems to be working fine, even though we didn't run super extensive tests on that :O

 

Yes

https://github.com/jaroslavstehlik/...SVG Importer/Plugins/Core/SVGRenderTexture.cs

Code (CSharp):

1. SVGRenderTexture.cs
2.  
3. // Create render texture
4. RenderTexture rt = SVGRenderTexture.RenderSVG(svgAsset, new Rect(width, height));
5.  
6. // Save it to 2D texture
7. RenderTexture.active = rt;
8. Texture2D tex = new Texture2D(rt.width, rt.height, TextureFormat.RGB24, false);
9. tex.ReadPixels(new Rect(0, 0, rt.width, rt.height), 0, 0);
10. RenderTexture.active = null;
11. rt.Release();

 

Hi,
I have a svg generated from a plugin in c# and I tried your plugin to load load it but after loading there is nothing its empty. It opening it browser as expected.

 

@Jaroslav-Stehlik

I want to fill color in empty space of closed path SVG. How i can do that ?

 

this is modifying the original layers but i want to fill color between spaces of paths

 

@Jaroslav-Stehlik is there chance to get importer work with Canvas/UI ?

 

We're seeing a weird problem when turning on the anti-aliasing on svg assets. When they're on the edge of the screen, everything looks great, but if they're in the middle of the screen, it looks like the AA isn't doing anything at all.

Any idea why or how to fix that?

 

You should compare the performance of SVG Importer anti-aliasing vs. enabling Unity full-screen Anti-Aliasing instead. In the second case you can turn off SVG Importer anti-aliasing, which causes some anomalies in certain cases.

 

Hi everyone,

I am working on an Unity application that is intended for interactive boards (for education purposes). The app can open lessons which can consist of large number of objects. Some of these objects have SVGRenderer components attached. My issue is that if I have large number of SVG objects with complex SVGAssets (10 or 20K vertices or more), performance drops. Objects are intended to be moved around, so static batching is not an option. What are the ways to reduce CPU load (because of the great number of vertices in all svg assets)?

I am loading SVG assets from server. My idea was to convert the more complex assets to PNG at runtime, and use SpriteRenderer component. Those less complex could be left as SVGs. I cannot use sprite atlases in that scenario, since I am using SortingGroups which break dynamic texture batching in sprites. The way that I am doing the conversion is with adapted code from script SVGRenderTexture. That is - separate camera and render texture, I do the render and then disable the camera. And all that for every conversion for each asset. Again - almost nothing is achieved, since that makes zooming rough and you can see that there is much happening behind. Is there any better way to do the conversion? I searched for a library, but non of them seems to have support for all the platforms.

So just to be clear, I need advice on how to improve SVG performance in scenes where I have may complex SVG objects, I have zoom in/zoom out feature, pan feature etc.
Any suggestion is welcome. Thank you in advance!

 

Maybe you can cache some simplified versions of the SVG for different scales (or perhaps simplified version for display until pause and then it loads in high res version)? Inkscape code maybe a starter?
https://gitlab.com/inkscape/inkscape/-/blob/INKSCAPE_0_92_3/src/splivarot.cpp#L1974
Might be some C# library out there?

 

Thank you for the response. Unfortunately having simplified versions of SVG would require too much work. We already have legacy system that has thousands of lessons with SVG resources in them. I am not sure if it's possible to tune the quality settings to the SVG during runtime. That is maybe an option. I did some research, and most of the libraries are obsolete, old, and do not support all platforms (and we primary aim for WebGL). Regarding InkScape, that would be my last option, but I am not sure that I will have time enough to dedicate and make that work. Also that would probably need to be implemented on the backend which additionally complicates things.

 

Does anyone know what happened to the package in the package manager in 2020.1+? I have enabled preview packages and I still don't see it. Was able to get it before in older versions... Help?

 

They removed it from preview packages. See https://forum.unity.com/threads/visibility-changes-for-preview-packages-in-2020-1.910880/

You can still get it by using the "Add Package from Git URL" and entering com.unity.vectorgraphics

 

Saw that there is an option to use SVG in UI, but how it works? Because in my project it seems that is not working. Thanks in advance!

 

Make sure you change the SVG asset property so that it's set up for UI use.

 

Hello are you using .svg to color paths?

 

Hi there. I know you support SVG images as part of the UI . I am looking to get perfectly crisp text at any resolution in the UI. In this possible with this asset? Even using text mesh pro with pixel perfect still produces text that is a bit blurry / pixelated
https://pasteboard.co/JShwZS8.png

 

Hello everybody,

we are currently using svg assets in our project. After upgrading to Unity version 2020.3.0f1, we have problems with baking lightmaps which can only be solved by deactivating all svg assets.

The following error is spammed in the Unity conosle:

"Line 215 in Wintermute :: Geometry :: Verify - Geometry geom c7771dcf42fdcb762adfcfe4adaf3915: Index 0 has value 0 that reads non-finite value -nan (ind) in channel 5, element 0"

A similar bug is currently known at Unity:

https://issuetracker.unity3d.com/is...ith-mesh-compression-set-to-medium-slash-high

By debugging the meshes generated by the svg renderer, I found out that no value in the mesh is infinite. Even if this error message is permanently spammed.

Does anyone have similar problems and was able to find a solution?
Do you know if the problem is just a consequential error caused by the other error?

Side note: Our svg assets are tagged with the normal (0,0, -1) so that lightbaking is possible with them.

Thank you for your help.

Greetings,
Ben

 

While Creating SVG Asset from the SVG file there's a weird kind of spacing between two layers just like shown in the below-attached screenshots. Is there any solution regarding this? I have attached these assets in Zip File.

 

Hi Everyone,

I'm trying to replace all my buttons to SVG, however the image isn't visible. The SVG does work when I place them into the scene, but I can't use them as a button background?

Thanks in advance for the help!

 

Set SVG Format to UGUI for this

 

Seems like SVG Importer doesn't work with Universal Render Pipeline. Gradient texture doesn't get either generated properly or the texture generated is incompatible. Does anyone have any insight into this?