Official Vector Graphics Preview Package

I've been trying to write my own shader to render SVG sprites by using Vector.Shader as a starting point.
However, I came into a problem; v2f.texcoord's values are always (0,0), which makes texture mapping an issue.
Is there a way around this?

 

Thanks for the quick reply. Unfortunately, I'm still a bit lost here. From my understanding, the UVs are generated by the
VectorUtils.FillUVs method, as documented in the manual. However, that method's definition doesn't seem to be publicly available to be read, at least not in the imported Package in Unity. I was only able to find it's declaration in VectorUtils' meta data.

Then again, it may be possible that there's a simpler solution to be found that would suit my use case. In my project, I have sprites that have distinct red and green sections in order to map the way I draw them in the editor. You can see below how the sprite looks initially and how it should be rendered by a custom shader.



Before, I used to create SVG shapes using Inkscape and export them as PNG files. The possibility of directly importing them into Unity is the main reason I am interested in this Vector Graphics package. However, unlike traditional sprites, those seems to be designed with specific material/shaders in mind and since the UV is either empty or filled for the purpose of SVG textures and gradients, applying a custom shader on sprites proves to be difficult. Ultimately, all I need is to be able to apply custom shaders on sprites with usable coordinates in my fragment shader. I don't know if you have any solution to this, but otherwise, considering this is a preview version, I would recommend if possible to implement a way to make SVG sprites acts seamlessly like a traditional sprite texture as far as shading is concerned.

On a similar note, I noticed that while using a SVG sprite on a Sprite Renderer, it leaves the Sprite.Texture value as null. If I recall, converting into a Texture2D was on the roadmap. I'm not sure that specific attribute is related to that, but that also limit some of my use cases so far.

Thanks for you cooperation.

 

Hi guys, I've written a small wrapper that lets you call the experimental API as if you were inside an HTML5 canvas: https://github.com/poke1024/unity-vg-demo

 

Hi,

First of all, I think it's a really great API and many thanks for creating it!

We definitely can use it in our current project (mobile) which would be released in September/October. We would use it for simple shapes, background items. Do you have any development schedule what we can count on... or what do you think if we use this release? We have already tested it on some devices and we did not find any bug or performance issue, but our testing opportunity is limited...

A small thing: The FillMesh(... flipYAxis ) parameter is not working.

 

Hi,
Would it be possible to let us choose if we want a 32 bit mesh index buffer?
Is there a way to find out if the current GPU understand 32 bit mesh index buffer? I couldn't find it in doc (our target is full mobile)

 

This is good but note if you try and use the sprites in the UI it all goes a bit wrong - can you not do that?

Regarding use of LibTessDotNet, it is good and robust but does it not create a load of garbage and force you to convert all vectors to its format?
Would be great to have a Unity optimised LibTessDotNet

 

I see, I actually need to be able to stretch the shapes without distorting the stroke, which means redrawing so I may need to roll my own system for that. I also want to keep any lines/strokes the same global size whatever the shape's scale.

Perhaps this is a bit specialised or maybe something others might want in time - a common case is where in a cartoon you often have outlines which appear at a consistent size no matter how big the object on screen.

 

Great work, just what I was looking for!
Quick question, with the Vector API is it possible to acces and edit the colors (Linear gradients and fills) in the svgs? I really need to be able to re colour them in real time for my current project.

 

Hi,

I wanted to try and start a Unity (2018.2.1f1) project with the SVG Importer () and I recieved some weird results. The editor view gives exactly the SVG style I want (smooth even when zooming in hard) but whenever I go to the game view (even if I compile) on any resolution it makes any SVG (even the ones you guys have on your github tiger.svg) very very pixelated. Does this have to do with some setting? It's a clean unity project with only the importer installed and the SVG's imported.

Thanks! See the screenshot for more detail
EDIT: I zoomed the game view to make it more obvious, unzoomed it's less obvious but the pixels still are there, not like the editor view

 

Great thanks @mcoted3d! Will give it a try now

 

Is the resolution of your game screen maybe very low?

 

Tried it on different formats (up to 4K) and it never really worked out the way I expect it to do (like the editor view)

 

Zooming game view makes everything pixelated as it shrinks resolution. Move camera closer to object instead.

 

I have tried this to edit the colours of my vector gradient but I cant seem to access the fill. I can find the drawable in the sceneInfo.Scene like so:

Code (CSharp):

1. sceneInfo.Scene.Root.Children[0].Children[0].Drawables[0]

but I don't know how to access the fill to edit it. Did I missunderstand how to do it?

PS:
If I try and get the type of the drawable:

Code (CSharp):

1. sceneInfo.Scene.Root.Children[0].Children[0].Drawables[0].GetType()

I get:

Code (CSharp):

1. Unity.VectorGraphics.Rectangle

but if I try to access the Fill of the Rectangle it gives me this error:

Code (CSharp):

1. Type `Unity.VectorGraphics.IDrawable' does not contain a definition for `Fill' and no extension method `Fill' of type `Unity.VectorGraphics.IDrawable' could be found

 

Amazing thanks got it working with SolidFill going to give the GradientFill a try now!

 

It looks like setting pivot to SVG Origin sometimes works incorrectly. For attached file (rename it to Turbine.svg) I need to set pivot to the center of the turbine, but no luck.

 

So I like I mentioned before was able to edit the color of a SolidFill that worked great, but I´m still having problems with the gradients.

This is how I was changing the SolidFill of a simple Rectangle:

Code (CSharp):

1.         var tessOptions = new VectorUtils.TessellationOptions();
2.         tessOptions.StepDistance = 10f;
3.         tessOptions.MaxCordDeviation = 1f;
4.         tessOptions.MaxTanAngleDeviation = 5f;
5.         tessOptions.SamplingStepSize = 100f;
6.  
7.         var sceneInfo = SVGParser.ImportSVG(new StreamReader(Application.dataPath + "/" + svgFileName));
8.      
9.         IDrawable drawable = sceneInfo.Scene.Root.Children[0].Drawables[0];
10.      
11.         var filled = drawable as Rectangle;
12.         var fill = filled.Fill as SolidFill;
13.  
14.         fill.Color = Color.blue;
15.      
16.         var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions);
17.         var sprite = VectorUtils.BuildSprite(geoms, 100.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
18.         GetComponent<SpriteRenderer>().sprite = sprite;

now when I try to do the same for a simple rectangle that has a 2 stop gradient, it just makes the sprite gray:

Code (CSharp):

1.         var tessOptions = new VectorUtils.TessellationOptions();
2.         tessOptions.StepDistance = 10f;
3.         tessOptions.MaxCordDeviation = 1f;
4.         tessOptions.MaxTanAngleDeviation = 5f;
5.         tessOptions.SamplingStepSize = 100f;
6.  
7.         var sceneInfo = SVGParser.ImportSVG(new StreamReader(Application.dataPath + "/" + svgFileName));
8.      
9.         IDrawable drawable = sceneInfo.Scene.Root.Children[0].Drawables[0];
10.  
11.         var filled = drawable as Rectangle;
12.         var fill = filled.Fill as GradientFill;
13.  
14.         fill.Stops[0] = new GradientStop() { Color = Color.red, StopPercentage = 0.0f };
15.         fill.Stops[1] = new GradientStop() { Color = Color.blue, StopPercentage = 0.0f };
16.  
17.         var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions);
18.         var sprite = VectorUtils.BuildSprite(geoms, 100.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
19.         GetComponent<SpriteRenderer>().sprite = sprite;

Even if I dont change the fill and do nothing to it, it still gets turned gray like so (Solid example on left and the gradient on right):

 

Ah I see, thank you so much I thought I was going crazy. Will give that a go. Also thanks for the tips.
PS: Tried it, works perfect. It´s faster than I expected tried with 10 gradients constantly changing color every frame on mobile and it stayed at constant 60 fps thats more than enough for what I need

 

Hello! Thanks thaiscorpion and mcoted3d for explaining how to change fill properties - just in time for my needs!

One other question I have - the automatic generation of paths for a PolygonCollider2D when it is added to a sprite doesn't seem to happen with SVG in this current state. I am currently working around this by exporting all of my files as both SVG and PNG, using the PNG to generate the PolygonCollider2D path(s) and then swapping in the SVG. Whilst this works, I'd be interested to know if this will be fixed in future. Thanks!

 

@bhison If you edit the physics shape in the sprite editor it should work, (works for me) you can click on generate button to automatically generate the physics shape. Then when adding the PolygonCollider2D the path(s) are added correctly.

 

Unfortunately I am doing this at scale and in a perfect world on the fly at runtime, but its good to know you can automatically generate the outline in the sprite editor, I would have never figured that out.

And @mcoted3d - great to hear this will be implemented eventually, it makes me less worried about my scrappy interim workaround.

 

Just want to go back to this so it doesn't get lost. I don't see why generating a texture should be explicitly tied to sprite usage, since sprites have special requirements beyond those of a regular texture (e.g. only works while the scene is active.)

 

Quick question, now that I can change the color to my svg (solid and gradients) I tried to create my first game level, but since I was changing the color on start it was impossible to design the level properly. I tried changing the color in editor mode so I could see the colors whilst designing, but I get this error:

Code (CSharp):

1. Not allowed to override geometry on sprite ''

Is there a way to do this in the editor?

 

i noticed when importing multiple svgs they are beeing cropped and i have to line them up by hand again.
selecting "svg origin" as Pivot uses the Bottom left of the svg as origin. it would be nice to have the original svg Center as Pivot Option.

also using outlines on clipping masks make the object appear black in Unity (reported as bug).

 

Setting SVG origin doesn't seem to work correctly. It's like the y-axis is flipped. These pieces have the same origin and should line up to look like the right, but the bottom piece is on the top and the top piece is on the bottom and so on. The x positions are right though.

 

i am exporting multiple svgs from Illustrator, all within the same artboard.
but beause Unity seems to crop the svgs (or ignores the arbord / origin) on import, the Center Position changes.

example sprite in Illustrator:

in Unity:


even when using "svg origin" they do not line up inside Unity.
but when reimporting them to Illustrator, the positions are still correct.

edit: added quick example svg files
Illustrator

Unity

 

The imported sprites are rather small in the game view with a new scene. I tried to reduce the PPU (something like 50 and 10) as well as increase the zoom (something like 10) but after clicking "Apply", the assets say "0 Vertices, 0B".

Also, I didn't see a way to generate anti-aliased sprites from the svg files. Is that possible?

It would be very helpful if you could define multiple import settings, similar to setting up a sprite atlass with multiple variants for different textue quality bundles/settings.

 

Changing the PPU only does still break the asset. With the standard settings (zoom=1, PPU=100) the file has roughly 21.000 vertices/512kb. When I change the PPU to 10 and leave the zoom at 1, the file becomes "0 Vertices and empty. So the PPU seems to have an effect here, too. What could that be?

Alright, I didn't know that. I was reading "Sprite" and also the animation created a sprite renderer, so I thought it creates a sprite from the SVG. OP mentions something like "triangulated sprite", is there more information about what that is? Are existing sprite shaders compatible with this?

Would be really cool to override that setting per platform.

I noticed another strange behaviour: when changing and reapplying the pivot, the imported svgs became way smaller each time (smaller in the scene/game view). This happened three times. After that, they were extremely small and kept their size.

How well does this play with Anima2D?

It would be an improvement if I could directly select the imported sprites without having to enter "sprite" in the search bar or without having to expand every svg asset I want to drop at the animation window.

Also, having a preview in the animation window for each frame (like when you place a "real" sprite onto the animation window) would be great.

 

Thank you, that explains it very well. However, reducing the PPU does not change the size in the scene/game view. Could this be due to the bug I explained in my previous post? I'll just quote it here again:

Using MSAA if it is like a mesh makes perfectly sense, then. While I can grasp what it could be, I'm still a bit confused about what "tesselated sprite" means. Are there any literature or online links about this?

Thank you so much for doing this. Makes my team very happy! Last month, we released our cartoon game with all the actors being vector graphics/SVG files (https://catmic.itch.io/return-of-the-tentacle).

 

Hi is CSS support still intended?

if so, how does that work? is that internal CSS of the SVG file or would we be able at runtime apply a CSS to a SVG file?

I'm asking as I intend to use the new SVG system to display a map with icons that can be toggled on and off. Each icon would be a symbol that the artist can manually place where the locations on the map. Would I be able to apply a CSS visibility to a particular def symbol to turn them on and off at runtime?

 

Hello!

When I import the SVGs (from Affinity Designer), all using the same settings, the sizes in Unity vary greatly and in a way I don't quite understand. Here I made a few bars. Duplicated them exactly, and just grouped them differently each time (i.e. they are exactly the same). But once in Unity, they have different sizes. I've tried to switch around export settings which looked like they may have an effect, but to no avail.

I want to export a set of SVG sprites, e.g. tiles, character parts etc. and want that they all have the same scale as setup in the graphics program. I.e. when the character is 2x the size of a box, I'd like that to also be the case once it's in Unity. Any ideas why this rescaling happens, or how to make the scale stay consistent?