Official Vector Graphics Preview Package

Could you fix this also for images? I'm using 2.0.0-preview12, and SVG files exported from Affinity Designer work fine with gradients, but not images. If I manually edit the file and put the defs on top, the images work fine as well.

Spoiler: SVG

Code (csharp):

1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3. <svg width="100%" height="100%" viewBox="0 0 256 256" 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-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
4.     <g transform="matrix(0.975989,0,0,0.975989,3.07335,3.07335)">
5.         <path d="M256,64C256,28.677 227.323,0 192,0L64,0C28.677,0 0,28.677 0,64L0,192C0,227.323 28.677,256 64,256L192,256C227.323,256 256,227.323 256,192L256,64Z" style="fill:url(#_Linear1);stroke:black;stroke-width:6.15px;"/>
6.     </g>
7.     <g id="palette--5-" serif:id="palette (5)" transform="matrix(0.135645,0,0,-0.135645,19.4839,209.387)">
8.         <use xlink:href="#_Image2" x="0" y="0" width="1600px" height="1200px" transform="matrix(7.37327,0,0,7.36196,0,0)"/>
9.     </g>
10.     <defs>
11.         <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(256,0,0,256,0,128)"><stop offset="0" style="stop-color:rgb(216,255,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,0,244);stop-opacity:1"/></linearGradient>
12.         <image id="_Image2" width="217px" height="163px" xlink:href="data:image/png;base64,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"/>
13.     </defs>
14. </svg>
15.  

 

Hi, is there a way to import svg file that have more than 65535 vertices without splitting the svg in different files?

 

Hi, we have svg graphic problems at the devices Samsung Galaxy A3 - 2017, Cubot note s - 2016, Samsung J1. Svg graphics are shown as a black texture. Could you please give us some information about processor types which don't support svg graphics? Thank you in advance for answer.

 

Hello, I was testing this out and I noticed that when I import an svg with linearGradients that have position values (x1,x2,y1,y2) it works, but if I use that same SVG in the 'runtimeload' the gradients do not work.

also the “runtimeGradient” doesn’t seem to have a way to pass in or define the position values either, maybe I’m missing it?

 

Hello, i am using vector graphics to change the colour of T-shirt sleeves, collar etc., so i have successfully filled the colours on sprite with this code.

var tessOptions = new VectorUtils.TessellationOptions()
{
StepDistance = 100.0f,
MaxCordDeviation = 0.5f,
MaxTanAngleDeviation = 0.1f,
SamplingStepSize = 0.01f
};

var sceneInfo = SVGParser.ImportSVG(new StringReader(svgFile));

var shape1 = sceneInfo.NodeIDs["C1"].Shapes[0];
shape1.Fill = new SolidFill() { Color = Color.red };
// Tessellate
var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions);
// Build a sprite
var sprite = VectorUtils.BuildSprite(geoms, 1000.0f, VectorUtils.Alignment.TopLeft, Vector2.zero, 128, true);

GetComponent<SpriteRenderer>().sprite = sprite;

and after getting all different colours on sprite i wanted to convert this sprite to texture like this:

Texture2D coloredTexture = VectorUtils.RenderSpriteToTexture2D(sprite, 5000, 5000, svgMat, 1, true);
tshirt.GetComponent<MeshRenderer>().material.SetTexture("_MainTex",coloredTexture);
and here i am using svg mat with shader unlit/Vector..
But my tshirt mesh front part is looking like a transparent mesh. or all materials are messed up when this texture is applied at runtime with shader unlit/Vector.
So is there any other alternative or i am wrong at converting sprite to texture?
please give me suggestions.
Thanks

 

Hi,

I have faced with some trouble while rendering SVG (65k + mesh renderer)
I use mesh renderer to handle 65k vertices limit (my svg has more, I use 32 bit settings for mesh).

Code (CSharp):

1. mesh.indexFormat = IndexFormat.UInt32;

But for picture with more 65k vertices there is some artefact, please look at screenshot at attachment.
(For picture with less 65k everything is ok).

Do you have some idea how to fix it? Or maybe it is known issue and you have some information about ETA?

 

What is the node to input Vector Sprite into the new Shader Graph? We want to use our vector files as filters for our web game. This would save us 30x memory, since instead of using regular pngs we could use vectors.

 

I'm using Vectornator to make SVGs, and was getting a "Missing number at X in path specification" error when importing into Unity.
After digging, it turns out that Vectornator uses '+' characters to separate the numbers in the path string. Unity only understands whitespace or commas.
I changed the `SkipWhitespace` function to also skip over + characters, and now everything imports fine, but I don't know enough about SVG to know whether this will cause other problems. Will it? And is there any chance of getting the official package to understand '+' separated numbers?

 

Hi everyone,

I am working on big project where we already use vector graphics plugin - SVGImporter. Because of the lack of the support, we are looking for a better solution, and I got assignment to try out Unity Vector Graphics. My test scenario is following:

* I load 120 distinct SVG assets from our server. I used the "Runtime loading" example to create vector sprites of them, and assign them to SpriteRenderers on scene. On scene, I have 1200 gameobjects with Sprite renderers. So each SVG asset is used 10 times. I do have sprite caching, so once I create a sprite using tesselator, I am reusing it next 9 times I need it.

* I read your previous posts, and I saw that someone asked similar question. The question is - why is UnityVectorGraphics better? What has been improved etc. Answer was that it uses more GPU friendly meshes. It also enables creating vector graphics from runtime, which is very cool.

I was able to show SVGs very quickly, and code was very intuitive. I like that I have ability to set up the tesselation options exactly how I need them. What was confusing to me were the results of the test I mentioned above:

* FPS with SVGImporter was 90, with UnityVectorGraphics 30
* UnityVectorGraphics had dynamic batching, SVGImporter didn't
* UnityVectorGRaphics had less triangles for similar quality

My main confusion is: How is possible that FPS is 3 times lower with this plugin when the stats are showing better numbers with it? I tested also on lower end hardware, results were similar, so SVGImporter offered 3 times better FPS. Just to mention: MSAA was NOT active during these tests. Could you plese give me a hint if I am missing something? Thanks in advance!

 

In Unity 2020.1.01f...
The package manager (with preview packages visible) is not showing the VectorGraphics package. Should I be using a different Unity build?

 

There have been changes for 2020.1 for the Package Manager. See this thread:

https://forum.unity.com/threads/visibility-changes-for-preview-packages-in-2020-1.910880/

You'll have to go to the Package Manager and click the + sign to "Add package from git URL" and type:

com.unity.vectorgraphics

 

Thanks for the steer. Missed this.

G.

Aside: Having tried out vector graphics for a whole day, decided against using them for new project.

 

Can you please share with us what made you take this decision?

 

Sure.

The title I am starting uses playing cards for which we have inherited vector art assets. The cards have a 4:3 aspect, which meant directly exported textures would not be powers-of-two. Hence my interest in using vector assets.

So I spent some time converting assets into SVG then importing to Unity.
However, the translated/imported assets had a set of minor conversion problems, some rounded corners did not export right/ A gradient asset clipped strangely.
And using SVG sprites inside a rect-transform caused some very strange rendering errors. I think the svg sprites have some z-axis vertex offsets?

So, I pivoted to using a different solution: A set of texture layers, a base sliced texture, a sliced mask, and bitmap elements.

This took a bit more work, but the outcome looked better and did not fight back.
I can see for some games, the vector approach might have benefits, but this layered solution worked better for me.

 

Is it possible to change the default settings, when importing a new .svg-file?

Specifically I'm interested in having "Viewport Options" set to "Preserve Viewport", when importing a new .svg - is that possible?

 

Thanks a lot! The following seems to work like a charm:

Code (CSharp):

1. #if UNITY_EDITOR
2. using UnityEditor;
3. using Unity.VectorGraphics;
4. using Unity.VectorGraphics.Editor;
5.  
6. class SVGPostprocessor : AssetPostprocessor
7. {
8.     void OnPreprocessAsset()
9.     {
10.         if (assetImporter.importSettingsMissing)
11.         {
12.             var svgImporter = assetImporter as SVGImporter;
13.             if (svgImporter != null)
14.             {
15.                 svgImporter.ViewportOptions = ViewportOptions.PreserveViewport;
16.             }
17.         }
18.     }
19. }
20. #endif

 

Another question - this might be more of a shader/material-thing!

I want to fade in and -out SVGs. So far I'm doing so by lerping from 0f to 1f on the alpha-value on the Color-property on the SpriteRenderer.

The problem is that during the fade, every part of the SVG's mesh become transparent - so you can see shapes behind other shapes. See "How Color Alpha Works" on the illustration below.

I totally get why it works this way. However, for my use case, I'd prefer, that the alpha-value on the Color-property was applied to the SVG as a whole - so you can't see shapes behind other shapes during fade. See "What I Ideally Want (faked)" below.

I don't know much about shader coding, but I hope it's possible to create a shader, that does the following:

1) Render the SVG-mesh without using the alpha-value on the Color-property.
2) Before showing the rendered SVG-mesh on the screen, make it semi-transparent according to the alpha-value on the Color-property.

I don't know if this is possible. Also, if there's another approach, that does the trick, I'm all ears!

However I would like to avoid rasterizing the SVG, as I need to support 4k resolutions.

Thanks so much in advance!

 

So after reading the thread on new Package Manager visibility, I have to ask if Vector Graphics falls under the "not being developed any more" category? It's currently working for me and doing everything I need, and I plan on shipping with it, even if it remains a preview package, but it would be nice to hear from Unity if this package is abandoned.

 

Non text compatibility:
Did anyone already try to parse through the svg and instantiate tmpro-text at given matrices?

 

I will try if there´s no other solution available.
What about UnityTech to implement this?

 

I'm trying to create a tool, that takes an SVG and disassembles it into one SVG for each group in it. I have this working quite well.

The problem is to position the "child SVGs" correctly in the scene.

If I use the ViewportOptions.PreserveViewport setting for both parent and child GameObjects, they are positioned correctly. But it comes with downsides:
- The "bounding box" of the sprite is too big - making it hard to work with.
- The pivot is off. If I want to change the pivot of the sprite, I'll have to manually position the child afterward - and then the PreserveViewport-advantage is lost.

So I'd prefer to used the ViewportOptions.DontPreserve setting over ViewportOptions.PreserveViewport.

To achieve this I add a button to the SpriteRenderer, that should position the child GameObject correctly (relative to its parent).

My idea is to:
- Import the SVG with ViewportOptions.PreserveViewport
- Sample the first vertex
- Import the SVG with ViewportOptions.DontPreserve
- Sample the first vertex
- Calculate the difference in position from the two samples and move the GameObject on that basis (also taking SpriteRenderer's pivot and the transforms rotation and scale into account)

So first thing: Is this a decent approach or is there a better way to do it?

If thats the case, I've hit a roadblock, when trying to import the SVG twice in one method call. I have the following code, but the second import don't seem to trigger:

Code (CSharp):

1.  
2. #if UNITY_EDITOR
3. using UnityEngine;
4. using UnityEditor;
5.  
6. [CustomEditor (typeof (SpriteRenderer) ) ]
7. public class SpriteRendererInspector : Editor
8. {
9.     public override void OnInspectorGUI()
10.     {
11.         DrawDefaultInspector();
12.  
13.         if (GUILayout.Button ("Position SVG like 'PreserveViewport'") )
14.         {
15.             var spriteRenderer = (SpriteRenderer) target;
16.             var sprite = spriteRenderer.sprite;
17.             string path = AssetDatabase.GetAssetPath (sprite);
18.             var svgImporter = (Unity.VectorGraphics.Editor.SVGImporter) AssetImporter.GetAtPath (path);
19.  
20.             svgImporter.ViewportOptions = Unity.VectorGraphics.ViewportOptions.PreserveViewport;
21.             EditorUtility.SetDirty (svgImporter);
22.             svgImporter.SaveAndReimport();
23.             Debug.Log ("First vertex position with 'PreserveViewport': " + sprite.vertices[ 0 ]);
24.  
25.             svgImporter.ViewportOptions = Unity.VectorGraphics.ViewportOptions.DontPreserve; //This doesn't work
26.             EditorUtility.SetDirty (svgImporter); //This doesn't work
27.             svgImporter.SaveAndReimport(); //This doesn't work
28.             Debug.Log ("First vertex position with 'DontPreserve': " + sprite.vertices[ 0 ]);
29.         }
30.     }
31. }
32. #endif
33.  

I probably have to call something in between...? - any help would be most valued!

 

I would really like to try this approach - but have no idea how to do it. It would be so helpful and valued if you maybe could post a few lines of code on how to do it... just to get me started...

 

Hello, I would like to find a way to sample the color of an image very precisely. It seems that there should be a way to find the topmost element and it's color for some point in the svg image without resorting to rasterizing it. I am at a loss on how this could be done. Any help would be appreciated.

Thanks.

 

Thanks a lot for the answer! I'd like to try this alternative, but I'm not sure how to do it. Hints are most welcome

On another note, I figured out how to work around this one:

If I do the following between the first and second setting block, it works:

Code (CSharp):

1.             svgImporter = (Unity.VectorGraphics.Editor.SVGImporter) AssetImporter.GetAtPath (path);
2.  

Dunno why - it might loose the ref on svgImporter.SaveAndReimport() or something.

However I've reached a new problem. When I switch to ViewportOptions.PreserveViewport for big/complex svgs, I get the following error:

Vertex array is too large. A sprite mesh may not have more than 65535 vertices.

I don't understand this - why does the vertex count increase, when having the ViewportOptions.PreserveViewport option on?

 

Thanks for the very swift answer! So there's no way I can get the positioning for vertices from PreserveViewport-mode without the clipping...?

 

When i am trying to build for WebGL or MacOS, this code is not working with any of the platform build..
i have tried to build this code with WebGl and MacOS. But this code is not working with these platform. this is only working in unity Editor.
So can you please help me to resolve this issue?

 

Hi mcoted3d,
Does Vector Graphics support Projection/Decal onto a 3D Model ?
if not , any plan to support it ?

 

I am attempting to change the color of the sprite renderer for my SVG illustration, but it's doing nothing. Is the color property just exposed for another reason, or can it be used to change the color in some other way? I need to "mask" off parts of my SVG so that I can overlay a color on those spots (allow for color palette changing).

 

Ah ha it does work when I create a unique/new material for the sprite and set the shader to Vector Gradient. Oh boy, but now I realize I cannot simply plug in a texture map to "mask" off areas for coloring. The svg is not using a texture map for the diffuse, but rather a gradient atlas. I have no idea how to go about masking pieces of the svg off.

 

I export from Adobe Illustrator SVG with layers, when importing into Unity, I have only one layer instead of many. Is there support for layers? Is it possible to make animation through Skin Editor through Sprite Editor?