Official Vector Graphics Preview Package

Hi @mcoted3d Are there any tricks to loading with c# an SVG imported via the Vector Graphics package?

I am trying to load an imported SVG/sprite onto a SpriteRenderer in the hierarchy with script in the editor - but it does not work and there are no errors. I've tried using the old(?) Resources folder method

Code (CSharp):

1. HeadSprite.sprite = Resources.Load<Sprite>("Assets/Resources/Sprites/HeadFrontSprite");

I see the original svg file is there with a sprite asset as a child (also filetype .svg) When I duplicate the sprite out of the prefab(?) the file extension changes to .asset. Is there are preference for the filetype extension when loading via script?



Please let me know if I can provide further info. Thanks

 

I've done some more tests and I'm guessing there is no public API for setting the sprite property on a SpriteRenderer to an svg image? I can do it manually so I guess a private API method exists. Can it be done via Reflection? I'm confused because when the SVG image is imported a sprite symbol appears as a child - it is labelled as a Sprite and has a file extension of .svg



Here is the code documenting my tests at setting the .sprite property in the editor.

Any thoughts would be greatly appreciated.

Code (CSharp):

1. GUILayout.Space(50);
2. EditorGUILayout.LabelField("Sprite Load Test", EditorStyles.boldLabel);
3. if (GUILayout.Button("Load image"))
4. {
5.     // Load the asset
6.     SVGImage sv = (SVGImage)AssetDatabase.LoadAssetAtPath("Assets/Sprites/HeadFront.svg", typeof(SVGImage));
7.     Texture2D t = (Texture2D)AssetDatabase.LoadAssetAtPath("Assets/TestPng.png", typeof(Texture2D));
8.  
9.     // add game object and components
10.     GameObject moduleGo = new GameObject(); //create the game object
11.     SpriteRenderer mySprite = moduleGo.AddComponent<SpriteRenderer>();
12.     SVGImage mySvg = moduleGo.AddComponent<SVGImage>(); // "For simple SVG images simply place the SVGImage component on the GameObject." https://forum.unity.com/threads/unity-ui-svg-support-script.551254/
13.     // doesn't seem to display svg at all
14.  
15.     // set the .sprite property to the loaded asset
16.     //mySvg.sprite = sv; // cannot convert from svgimage to sprite
17.     //mySprite.sprite = sv; // Cannot convert SVG to Sprite
18.  
19.     mySprite.sprite = Sprite.Create(t, new Rect(0, 0, t.width, t.height), Vector2.zero); // works from png texture
20.     // mySprite.sprite = Sprite.Create(sv, new Rect(0, 0, t.width, t.height), Vector2.zero); // Cannot convert SVG to Sprite
21.  
22.     //Debug.Log(t.name);
23. }

 

I found a solution, you need to add the .asset file extension

Code (CSharp):

1. Sprite hfs = (Sprite)AssetDatabase.LoadAssetAtPath("Assets/Resources/Sprites/HeadFrontSprite.asset", typeof(Sprite));
2. GameObject moduleGo = new GameObject();
3. SpriteRenderer mySprite = moduleGo.AddComponent<SpriteRenderer>();
4. mySprite.sprite = hfs;

Cheers

 

Hi, I'm trying to change values of svg image in my scene. Exactly what I need is change fill color of a figure(in this case there are simple 2 triangels with blue and green fill colors). I'm trying to use this code:

Code (CSharp):

1. var sceneInfo = SVGParser.ImportSVG(new StringReader(absoule_path_to_svg_file));
2. var shape = sceneInfo.NodeIDs["path19"].Shapes[0];
3. var fill = shape.Fill as SolidFill;
4. fill.Color = Color.red;

But I'm getting errors in Unity console:

I tried to look for whitespaces opening svg file in Notepad/Notepad++ and that's how it looks like:

Code (SVG):

1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2. <!-- Created with Inkscape (http://www.inkscape.org/) -->
3. <svg
4.    xmlns:dc="http://purl.org/dc/elements/1.1/"
5.    xmlns:cc="http://creativecommons.org/ns#"
6.    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
7.    xmlns:svg="http://www.w3.org/2000/svg"
8.    xmlns="http://www.w3.org/2000/svg"
9.    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
10.    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
11.    width="210mm"
12.    height="297mm"
13.    viewBox="0 0 210 297"
14.    version="1.1"
15.    id="svg15"
16.    inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
17.    sodipodi:docname="test.svg">
18.   <defs
19.      id="defs9" />
20.   <sodipodi:namedview
21.      id="base"
22.      pagecolor="#ffffff"
23.      bordercolor="#666666"
24.      borderopacity="1.0"
25.      inkscape:pageopacity="0.0"
26.      inkscape:pageshadow="2"
27.      inkscape:zoom="0.7"
28.      inkscape:cx="871.12613"
29.      inkscape:cy="451.21302"
30.      inkscape:document-units="mm"
31.      inkscape:current-layer="layer1"
32.      showgrid="false"
33.      inkscape:window-width="1920"
34.      inkscape:window-height="1017"
35.      inkscape:window-x="-8"
36.      inkscape:window-y="-8"
37.      inkscape:window-maximized="1" />
38.   <metadata
39.      id="metadata12">
40.     <rdf:RDF>
41.       <cc:Work
42.          rdf:about="">
43.         <dc:format>image/svg+xml</dc:format>
44.         <dc:type
45.            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
46.         <dc:title />
47.       </cc:Work>
48.     </rdf:RDF>
49.   </metadata>
50.   <g
51.      inkscape:label="Layer 1"
52.      inkscape:groupmode="layer"
53.      id="layer1">
54.     <path
55.        style="fill:#000080;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
56.        d="M 82.853553,75.700831 38.486812,155.88169 126.15122,154.27807 Z"
57.        id="path17"
58.        inkscape:connector-curvature="0" />
59.     <path
60.        style="fill:#008000;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
61.        d="m 38.486812,155.88169 38.48681,73.23185 49.177598,-74.83547 z"
62.        id="path19"
63.        inkscape:connector-curvature="0" />
64.     <path
65.        style="fill:none;stroke-width:1.42857146"
66.        d="m 218.66744,726.76582 -71.74441,-136.74487 61.03012,-1.07737 c 33.56657,-0.59255 107.31584,-1.95077 163.88727,-3.01826 56.57142,-1.0675 102.93542,-1.86839 103.03111,-1.77978 0.39587,0.36664 -183.09001,279.3069 -183.7454,279.33477 -0.39286,0.0167 -32.99927,-61.50482 -72.45869,-136.71449 z"
67.        id="path9"
68.        inkscape:connector-curvature="0"
69.        transform="scale(0.26458333)" />
70.   </g>
71. </svg>

Do you know what am I doing wrong or how to do it properly?

 

Hey! In the ImportSVG Method you are trying to put the filepath in but actually it needs you to put in the actual text (the svg tag etc.) of the file. So first you have to get the data of your file to a string (with

Code (csharp):

1. string svg = File.ReadAllText("this/is/the/path.svg");

for example)and then put the string into your ImportSVG method

Code (csharp):

1. var sceneInfo = SVGParser.ImportSVG(new StringReader(svg));

 

Hi, are there any updates on when text elements might be supported?

 

Bug? - Importing transformed svg explodes!

I'm using Unity 2018.3.0f2 and 1.0 preview.23

I'm doing some 2d animation. I have some arms for my toon character.

Here you can see the sets in Inkscape. The highlighted set at the bottom is the original artwork. Above that are 3 sets transformed in Inkscape.


The normal arms set imports fine. Here they are imported into Unity



However the transformed sets explode!



Steps to reproduce:
- change file extension on attached rising.text to rising.svg
- import attached rising.svg into Unity

Looks like the parser sees the second g tag and then explodes the file.



I know the svg "specification" is implemented in many varied ways so this might also be an Inkscape issue.

Please let me know if I can provide additional info.

Cheers!

 

Solved! Turns out it is a known "feature" of Inkscape's svg implementation. Used the apply transforms extension from https://github.com/Klowner/inkscape-applytransforms via http://www.inkscapeforum.com/viewtopic.php?t=27459

Cheers!

 

Hi, I have a problem with saving scene performance when there are a lot of prefabs with SVG sprites references. It seems that it is related to this.
I submitted a bug report with isolated project and steps to reproduce, case id: 1134937

Is there any ETA on the fix? Will it be fixed in Unity or in the Vector Graphics package?

 

Hey I upgraded to Unity 2019.2.0a7 (beta) and it broke a whole bunch of things, one of them being the vector graphics package. So I tried fixing it by deleting a whole bunch of cache folders and uninstalling/reinstalling packages. Finally I gave up and reverted my project back to 2019.2.0a4 (beta), which works just fine.

However, after that, none of my vector graphics showed up. Upon investigating, I found that the SpriteRenderer was missing a material. I remembered it used to be "UnlitVector" or something to that effect. I also remembered I could never just search for it, it could only come default on the SpriteRenderer when you made a new object. So I click+dragged a vector from the Project pane to the Scene pane to create a new object, but this new object was also missing the material. It seems that my project is just completely missing the Unlit Vector material. How do I get it back?

TL;DR: After switching to 2019.2.0a7 and then back to 2019.2.0a4, I'm missing the Unlit Vector material used for vector graphics.

 

I just tried grabbing the latest alpha (2019.2.0a7) but the vector graphics package is giving me an error:

Library/PackageCache/com.unity.vectorgraphics@1.0.0-preview.23/Editor/InternalBridge/VectorGraphicsBridge.cs(17,13): error CS0103: The name 'SpriteEditorWindow' does not exist in the current context

I'm desperate for that issue to be fixed so I've tried every one of the latest releases, but no luck so far. Fingers crossed that the patch comes out soon!

 

Great! Looking forward to it!

 

Hi

I'm trying to use SVG Image in a Unity UI setup, using code to replace the SVGImage sprite with one elsewhere (basically dynamically creating a load of buttons in the grid).

This might be more of a specific UI question than todo with svg.

I have an svgimage in my ui, with a rect transform set to middle anchors etc with width and height of 100 in the RectTransform.

When I set the Source SVG Image sprite via code, obviously the image shows as square to match the RectTransform width and height.

I wan't to be able to resize the SVGImage in the UI and have it maintain the original sprite aspect ratio.

What would be the best way to do this?

Thanks

 

I'm having a similar issue to @coshea, when I add many svgs to the UI canvas, and select the svg file to use, it doesn't use the aspect ratio of that svg and just appears squared. This means every time I add an svg I have to go check the file size and edit the size manually. Is there a faster way to do this?

 

I finally reverted back to Unity 2018.3.7f1 and then my vector package started working again. Next time this happens, I now know another way to get around it without reverting Unity. Thanks!

 

Is it possible to combine multiple SVG's into one and export/save the combined SVG's back as an SVG with this?

 

I created a custom drawer for the SVGImage type so I could set the native size instead of doing it manually all the time, here it is in case anyone wants it. The only thing I couldn't get to work is the multiple object edit, if anyone knows how would really appreciate it

Code (CSharp):

1. using UnityEngine;
2. using UnityEditor;
3.  
4. [CustomEditor(typeof(SVGImage), true)]
5. [CanEditMultipleObjects]
6. public class SVGImageDrawer : SVGImageEditor
7. {
8.  
9.     SVGImage MySvg;
10.     RectTransform MyRect;
11.  
12.     public override void OnInspectorGUI()
13.     {
14.  
15.         base.OnInspectorGUI();
16.  
17.         if (GUILayout.Button("Set native size"))
18.         {
19.             MySvg = (SVGImage)target;
20.             MyRect = MySvg.GetComponent<RectTransform>();
21.  
22.             MyRect.sizeDelta = new Vector2(MySvg.sprite.rect.width, MySvg.sprite.rect.height);
23.         }
24.  
25.     }
26. }

 

I can confirm that my issue with SVG prefabs was fixed in 2018.3.9f1
Great job!

 

Has there been any more work on sprite masking with vector sprites?

Right now, I have such a vector sprite being masked, but also with a sprite colour applied. If "Enable GPU Instancing" is enabled in the shader, the colour is applied but masking doesn't work; if GPU instancing is not enabled, the masking works but the sprite colour doesn't.

(I'll note here that we created a duplicate of the Unlit_Vector material/shader from the VG package so we could edit both the shader and material on our end).

 

Got it, I'll see about finding a workaround for the tint colour in the meantime. When you say you're "not sure why instanced vector sprites can't be masked," do you mean they should be masked but my project is misbehaving, or rather that it's a technical problem that hasn't been addressed yet?

 

Not sure it makes a difference, but I'll note that these aren't UI elements, just sprite GameObjects out in the world.

 

I've got a small repro project available (attached). Note that I've made duplicates of the Unlit_Vector and Unlit_VectorGradient shaders/materials in order to expose the "Enable GPU Instancing" checkbox in the material inspector; when the original VG shaders/materials are used, the SVG sprites look alright (though they still have the masking problems), but when the duplicates are used, the gradients look... very off, even though these are duplicate shaders.

Oh, and this is Unity 2018.2.21f1, VG 1.0.0-preview.23.

 

after change do svg image i get this errors on webgl build!

 

Hey, I have a question about a couple features that seem to be missing but aren't noted in the manual as such.

I'm working with SVGs exported from AI, and it seems that, when working with gradients, the GradientFill type doesn't contain a property to get the angle the gradient was created in, so there's technically no way to work with linear gradients that progress vertically or diagonally?

Another thing regarding gradients is that for Radial Gradients, there's the RadialFocus property that, from what I understand, is the normalized offset from the center of the shape from which the gradient starts emitting, correct?
The problem is that it seems like no matter how I move the gradient offset in AI, the RadialFocus property always reads (0, 0) when imported.

Are these 2 values not imported from the SVG file right now?
I'm on the latest preview version, 23.

 

That's great to know about the rotation, helps a lot

About the focal point, I'm attaching the test SVG we're using right now, thanks.
And while we're on the subject, so focal points are supported, that's good, but do we have a way to fetch the ending shape, as defined by cx, cy and r in the reference page you linked?

On an unrelated note, does this package support PRs in some way?
We extended the importer to also support generation of a Meshed Model, basically a gameobject container that has a childed object with a mesh renderer for each shape in the SVG geometry, helped us solve a bunch of problems we couldn't solve with the texture variants.

 

Another question, actually.

In the same file attached above, when I read the FillTransform via the Geometry API (You said it's part of the Shape class, but I'm using the Geometry class fetched from VectorUtils.TessellateScene to draw the shapes, Geometry also has a FillTransform property which I assume is populated correctly as well), I seem to get junk values.

For example, the roof shape in the above file (5th shape in the file) gets imported with this matrix, although it was exported from AI without any rotation nor scaling, and I'm not even sure transposing is possible?

For a non rotated, scaled or transposed shape I would expect to see an identity matrix, is that not correct?

I'm also trying to wrap my head around how to pass this matrix to a shader, as the Matrix2D is a type that originates from the Vector Graphics package.
Am I correct in assuming that expanding this matrix to 4x4, so it can be passed to the shader, like so should work:




And in the shader, multiplying it by the vertex position like so:
o.pos = mul(_FillTransform, input.pos.xyz);


Also, from what I understand, multiplying by the matrix should be done prior to multiplying by MVP with UnityObjectToClipPos, right?


I'm mostly just wondering if something in my approach pops up to you as wrong, or if it might be possible that the matrix actually is incorrect.

I'm a little rusty on my linear algebra, so apologies if anything is completely off ^^'

 

I thought you said that this was initialized as part of the import and contains the TRS transformation as generated by AI.
If the matrix isn't initialized to the rotation from the SVG, how can I get the rotation from the SVG the initialize the matrix?

It's actually a similar issue in this case.
I tried the VectorUtils.GenerateAtlasAndFillUVs approach before, but the UV data I ended up getting was acting weird, the values didn't seem correct either, though I don't really have an example of this to provide right now.

That's the reason we went on to doing the color via our shader, which works great for horizontal gradients right now, but still lacks rotation support.

Additionally, do we have a way to fetch the ending shape, as defined by cx, cy and r in the reference page you linked?

Thanks.

 

Versions:
Unity 2019.1.0b10
SpriteShape 2.0.0.preview.4
Vector Graphics 1.0.0.preview.23

Not sure if this is an issue with this vector package or the SpriteShape package.
I have a vector asset setup as a TextureSprite, for use in SpriteShape.
The issue: SpriteShape is trying to get the SpriteMeshType for the given spite. However the importer is null.

com.unity.2d.spriteshape@2.0.0-preview.4\Editor\SpriteShapeEditor.cs: lines 292-297

Code (CSharp):

1. string assetPath = AssetDatabase.GetAssetPath(sprite);
2. TextureImporter importer = AssetImporter.GetAtPath(assetPath) as TextureImporter;
3. TextureImporterSettings textureSettings = new TextureImporterSettings();
4. importer.ReadTextureSettings(textureSettings);
5. if (textureSettings.spriteMeshType == SpriteMeshType.Tight)
6.     tightMeshSprites.Add(sprite);

The error is on line 4, sense importer is null.
My current hack:

Spoiler

Code (CSharp):

1. string assetPath = AssetDatabase.GetAssetPath(sprite);
2. TextureImporter importer = AssetImporter.GetAtPath(assetPath) as TextureImporter;
3. TextureImporterSettings textureSettings = new TextureImporterSettings();
4. importer?.ReadTextureSettings(textureSettings);
5. if (importer && textureSettings.spriteMeshType == SpriteMeshType.Tight)
6.     tightMeshSprites.Add(sprite);

I posted here figuring this could be better solved by inheriting from TextureImporter, or building interfaces. Although this could be an issue with the AssetImporter providing the base svg asset not the TextureSprite asset.

 

Is there a way to use super sampling on the vectors themselves, rather than applying MSAA to the whole screen?

Here is a snippet from the SS shader code I currently use on sprites/textures: (I'm not sure what would have to change to make it work with the vectors.)

Code (CSharp):

1. half4 col;
2. static const float2 UV_OFFSETS = float2(0.125, 0.375);
3.  
4. fixed4 Tex2DSS(sampler2D tex, float2 uv)
5. {
6.     // get uv derivatives
7.     float2 dx = ddx(uv);
8.     float2 dy = ddy(uv);
9.  
10.     col = 0;
11.  
12.     // MSAA style "four rooks" rotated grid super sampling
13.     col += tex2D(tex, float2(uv + UV_OFFSETS.x * dx + UV_OFFSETS.y * dy));
14.     col += tex2D(tex, float2(uv - UV_OFFSETS.x * dx - UV_OFFSETS.y * dy));
15.     col += tex2D(tex, float2(uv + UV_OFFSETS.y * dx - UV_OFFSETS.x * dy));
16.     col += tex2D(tex, float2(uv - UV_OFFSETS.y * dx + UV_OFFSETS.x * dy));
17.  
18.     col *= 0.25;
19.  
20.     return col;
21. }

 

Screens and Multiplies (transparency layers) made in Illustrator are not showing when imported into Unity. However, if I open the SVG in web browser, it's perfect. Any ideas how to work past this?

 

There doesn't seem to be a change-log entry for version 1.0.0-preview.24. I'd appreciate it if it could be added.

 

I just checked, and on 1.0.0-preview.23, if I have an SVG sprite in the scene, changing the colour on the SpriteRenderer component does change the colour of the object in the scene (the behaviour seems unchanged in *.24). Is that what this changelog is referring to, or is it something different?

 

I wasn't aware of the fact that packages come with a changelog file. Thanks!