Vector Graphics Preview Package

FWIW: i have an SVG that does specify width and height, and when i do "preserve viewport" to preserve some blank space on the right side, it instead returns an empty sprite:

<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="300 300 300 300" width="300" height="300"><clipPath id="_clipPath_2l2wr5J7AJZZO9exMZGd8NiOLPUnNniU"><rect x="300" y="300" width="300" height="300" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,255,255)"/></clipPath><g clip-path="url(#_clipPath_2l2wr5J7AJZZO9exMZGd8NiOLPUnNniU)"><path d=" M 300 500 L 300 400 C 365.491 398.99 398.751 365.667 399.748 300 L 499.496 300 C 499.496 363.636 500.63 534.091 499.496 600 L 399.748 600 C 399.748 534.091 369.144 501.136 300 500 Z " fill="rgb(190,195,124)"/></g></svg>


I'm not an svg expert, and couldn't see anything obviously wrong here (osx and inkscape can both render the svg correctly - preserving the whitespace).

Hope this helps debugging!

 

I am unity developer and bought this package two days before and it is easy to use. SVG support in unity is really a big achievement. Our company mostly work in coloring applications and producing a lot of hit applications color by number and now we are interested to accommodate SVG in our applications so that we can remove blurness and also reduce the apk size. We want to shift all our applications but not have a clear idea of coloring in SVG. Has any one idea about it ?

Waiting for reply.

Thanks !

 

FYI:
The official unity SVG support is a free package (still a preview package, acceptable from window/package manager > all > vector graphics), the paid one (https://assetstore.unity.com/packages/tools/sprite-management/svg-importer-38258) was developed by a third party team a couple of years ago.

 

yes dear I bought paid one package (https://assetstore.unity.com/packages/tools/sprite-management/svg-importer-38258). Do you have any idea how to make Coloring application using SVG ?

 

I imported a white circle with a black border using this package into unity, and it imported just fine, but the entire circle is black rather than filled in with white. Is there a reason why this is happening? I am using 2018.3, with the package version preview.21. This exact same bug also happened when I imported any other svg file. The svg files themselves are fine, but unity renders them in solid black only...

 

Here's what I'm using. Really, really simple image, and it looks fine everywhere except in unity.

https://www.dropbox.com/sh/oubn9ydrq0od80s/AABlL6G_w0nzDqzFLtby2HRSa?dl=0

 

Hello, I'm using Vector Graphics with HDRP but I'm having a problem with aliasing.

I have sprite renderers with .SVGs that have "Vector Sprite" as "Generated Asset Type".

As you can see in the following image the result is not very good, the four white hexagon icons are svg files.
The screenshot has taken in full screen with full HD resolution and "ultra" quality.


I've already enabled "Enable MSAA" in HDRP asset, but it does not resolve the problem. Probably I'm missing other settings.
Someone can help me? Thank you in advance.

 

Thank you, I followed your advice and it works better setting "Texture Sprites".
Please let me know if you find out something about the HDRP compatibility, it would be nice to have the possibility of use the Vector Sprite, thank you.

Another thing, when I set "Texture sprites" in my .SVGs I encountered a bug; it seems that modify one attribute of two or more .SVGs files at the same time causes troubles. I submitted a bug report (#1096831).

 

When I try to import a SVG with embedded jpg texture, I get the error "Incomplete mesh data in Sprite. Please reimport or recreate the Sprite" and nothing shows up. After importing, it defaults to the Unlit_Vector material I tried manually changing to a material that uses Unlit_VectorGradient but that also does not work. It is a massive SVG, however the version without texture works with advanced tesselation settings. The image was added to the SVG as per the part in bold:

...
<g>
<pattern id="texture" patternUnits="userSpaceOnUse" width="500" height="500">
<image xlink:href="texture.jpg" x="0" y="0" height="500" width="500" />
</pattern>
<path ... >
</g>
...

And it looks fine when I open it up in the browser.

Any chance you might know what the issue could be?

 

How about adding a Matrix2D.RotateAround() method for convenience?

 

Is there a way to add an emissive texture to a vector sprite? I currently do this with regular sprites to make certain parts of the sprite glow. It would be great to be able to achieve the same effect with these large vectors with an option like this:

 

That would work, but wouldn't it mean I'd lose the benefits of scalable vector graphics (performance, file size)?

 

Just tested the package for the first time. First SVG (30kb) generated the "too many vertices" error, trial-and-error with reducing the Advanced tesselation settings didn't really help. Gave up on that. I can send you the file via PM if you want.

Smaller SVGs worked fine, but have really bad aliasing artifacts compared to textures (which is quite obvious given that they're meshes, after all). So I ended up using the "Texture 2D" import option instead of the Vector option.

Some feature requests:

1) ability to import an SVG in several layers - this would be the single most important reason for us to move to a vector workflow. Instead of exporting PNG layers, being able to have a single SVG that contains multiple layers and turning those into separate textures / meshes would be great.

2) ability to generate UV coordinates for the generated meshes that give a feeling of antialiasing. Basically stretching a texture with smooth borders along the SVG, giving smooth edges. If I recall correctly, the AssetStore package "Vectrosity" does it that way to achieve super nice line graphics.

3) Slight bug report: changing the import option from "Vector" to "Texture" while already having the vector object on a SVG image keeps the image visible, despite the source now not being a Vector object anymore. I guess it should say "missing" or be smart enough and have a button to turn the SVG image back into a regular UI Image.

 

Hello I notice im able to add SVG images in a UI Canvas

UI > SVGImage

Is this a suppoted way of adding a SVG image to a Unity UI Canvas? (release version of unity 2018.2)

 

i like the svg importer so far, nice work =)
Some quick notes:
-show svg shape in inspector preview:
When i add an SVG Image to a canvas and select it in the canvas, in the inspector at the bottom it shows default ui material as just a white rectangle.
It would be much better if it would show the image/shape there like it does for sprites

-Show width/height:
Also when selecting an image in a canvas or the sprite in the assets one can see the width/height of it there in the inspector preview at the bottom, too.
Now i know one of the cool sides about svgs is that one can use them much freer at different dimnensions but it would still be useful to show WidthxHeight there for them, too so that when i drop a svg into an svg image one should get an idea what to set width/ height of the recttransform to to get it not squeezed looking

-Show preview icon in assets:
For sprites one can see a small representation of the image as its icon in the assets, it would be cool if that was the case for svg items, too, right now they just look like model asset icons there

 

also slight usability bug:
-when one drags an svg asset into the scene but inside a ui canvas element (like as child element of a recttransform having element or of a canvas in general), it should place it as svgimage component having game object instead of as Spriterenderer one

 

Howdy all!

I'm working on a project that is using SVGs for some interactive storytelling. We have an art team in Thailand that is creating the images in Adobe Illustrator. We are having trouble with about 1/3 of the images they are providing us. Here are some of the images and how the web browser views them which is correct... versus how they are getting imported.

https://www.dropbox.com/s/xol8y1ijvy5xb9e/7A_Akili_3_way-1.svg?dl=0

vs

https://www.dropbox.com/s/5yumdbaskkyrydz/Screenshot 2018-11-14 16.42.17.png?dl=0

We have a bunch of different images where this kind of thing is happening. Any assistance would be great!

 

I'm seeing inconsistent sizes when exporting SVGs (in Affinity Designer on Windows 10) and importing them to Unity 2018.2.15f1 w/ Vector Pkg 1.0.0-preview.21.

When I export parts individually, they need to be scaled down anywhere from 0.165 to 0.36 in Unity to match what I believe is the "correct" size. However if I export them in a single SVG, their size seems correct. I'm not sure where the problem lies (Affinity or Unity) but any help debugging would be great. Not sure what info would be helpful either, this is a bit hard to explain...

Apologies if this has been asked, but a search for "scale" did not yield anything.

EDIT: Actually, after unchecking "Set viewbox" in the Affinity exporter, I seem to be getting consistent sizes now. Does this sound like the proper fix?

 

Hi, do you have plans on implementing SVG animation and if so, how are you going to approach it? Personally I would love to see SMIL support. It would be great to have multiple animations in one SVG file like "idle", "walk" and "jump", and then you could somehow expose those to C# code with a method like StartAnimation("walk").

 

Is there a good way to load SVG files from the Resources folder and/or an directory outside of the unity project?

 

Tried my first WebGL export and unfortunately just getting a black screen (Chrome/FireFox/Edge).

Windows standalone build look good.

Fairly simple scene with basic SVG assets. Any thoughts where to begin debugging? Is WebGL even supported?

And this works for me: https://files.unity3d.com/marcot/tanks/ so not just my machine thankfully.

 

Hi there
so I want to generate textures at runtime from dynamically generated svg files. I've got it working in the start method, but when I move it out of start to another method and call that method during runtime, I get an error:

Code (CSharp):

1. Not allowed to override geometry on sprite ''
2. UnityEngine.Sprite:OverrideGeometry(Sprite, Vector2[], UInt16[])
3. Unity.VectorGraphics.VectorUtils:BuildSprite(List`1, Rect, Single, Alignment, Vector2, UInt16, Boolean) (at C:/Users/gkruger/AppData/Local/Unity/cache/packages/packages.unity.com/com.unity.vectorgraphics@1.0.0-preview.22/Runtime/VectorSprite.cs:116)
4. Unity.VectorGraphics.VectorUtils:BuildSprite(List`1, Single, Alignment, Vector2, UInt16, Boolean) (at C:/Users/gkruger/AppData/Local/Unity/cache/packages/packages.unity.com/com.unity.vectorgraphics@1.0.0-preview.22/Runtime/VectorSprite.cs:69)

My code to generate the texture is:

Code (CSharp):

1. var sceneInfo = SVGParser.ImportSVG(new StringReader(svg));
2. var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions);
3.  
4. // Build a sprite with the tessellated geometry.
5. var sprite = VectorUtils.BuildSprite(geoms, 10.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
6. var texture = VectorUtils.RenderSpriteToTexture2D(sprite, 512, 512, material);

Seems from other comments this should work, but maybe I'm doing something wrong. Any ideas?

 

Nothing out of the ordinary it seems. Tried a Development Build as well. These look like the same logs when I run the WebGL sample, too:

Code (CSharp):

1. Successfully compiled asm.js code (total compilation time 0ms; not stored in cache (too small to benefit)) UnityLoader.js
2. Successfully compiled asm.js code (total compilation time 1ms; not stored in cache (too small to benefit)) UnityLoader.js
3. Successfully compiled asm.js code (loaded from cache in 545ms) /
4. unreachable code after return statement /:166:2
5. Prefixed Fullscreen API is deprecated. Please use unprefixed API for fullscreen. For more help https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API /:11165:2

 

Will do. Also I noticed sprite colors do not seem to work when I switched to WebGL (even in the editor, the colors do not work). Is this a known limitation? I'm using the Unlit/Vector material (I may have also enabled GPU Instancing?) which seems fine in standalone.

I tried a most basic new proj with a simple SVG asset (no code) and I DO see that render (in Edge, strangely enough. Firefox gives me "WebAssembly support is not detected in this browser." I literally just created a new Unity proj, imported the Vector Graphics package and dragged in a single svg asset to the scene).Thoughts?

EDIT: I see that the new project was defaulting to WebAssembly whereas the other had somehow switched over to asm.js.

EDIT 2: I changed the quality settings to match the default proj settings (High) as well as removing UNITY_POST_PROCESSING_STACK_V2 and disabling the Post Process Layer script (I was using SMAA). I now see the proj running in FireFox (will continue to debug). Is there a known limitation with WebGL/PostProcessV2/SVG that I might be missing here?

EDIT 3: After looking into AA a bit more, what's the best approach to AA SVG assets? If I understand, Unity's default MSAA won't have any effect on SVGs. However when I run with the PPSV2, that seems to cause the black screen in WebGL =(

EDIT 4: Apologies at my incohesive updating, but I didn't realize PPV2 was experimental and PPV1 was still supported. I've since downgraded to PPV1 and the AA technique is working there! I will chock this up to a WebGL bug with PPV2. Sorry for the long rant.

EDIT 5: I was able to get vertex colors working in webGL by using MaterialPropertyBlocks with the Unlit/Vector shader.

And thus concludes the epic edit post with all questions answered (for now).

 

Thanks, after preparing a simple demo I figured out what I was doing wrong. My mistake (as you mentioned) was that I called the code via an editor script that hooked into my *running* game scripts, which I assumed equals runtime, but once I moved the trigger to a UI button to test with, instead of an editor button, the error disappeared.
Thanks for the help!

 

I'm evaluating the library and it's pretty good so far. I build up a quick prototype for an inventory system using a scroll rect, a mask (image) and a scrollbar. All the items in the scroll rect are displayed using SVGImage in vector sprite mode.

I noticed a strong FPS drop while dragging the scroll rect containing the SVGImages of the inventory items.

By looking at a deep profile of what is going on I noticed that the SVG Image seems to gets rebuilt very often (if it's not every frame). Is there any way to prevent that on the user side?

 

I wil try to reduce my tesselation, thanks for pointing that.

Changing to "Texture Sprites" will have the effect of doubling my sets of of data (one for the UI in "Texture Sprite" and one for in game in "Vector Sprite" mode).

The other option will be to use all my data in "Texture Sprite" mode but I will definitively lose the svg property for being resolution independant.

Or I could still keep the very low fps and stay in Vector Sprite mode and hope that the fps won't be too low on low spec machines or search for an alternative for the scroll rect.

Talking about the texture sprite mode, is there any compression option I can use over the generated textures?

 

Currently my artist is exporting the .svg in .png to benefit from unity's regular texture compression. The Texture mode will definitively cut these steps and make the library more usefull if it is available. Thanks for the answers.