Official Vector Graphics Preview Package

First off, thanks so much to mcoted3d for being so patient and helpful in this forum, and I'm really happy that it's possible to import SVGs into Unity now. And I apologize, I'm sure this question has been asked, but I can't find it with search.

For my weird use case I want to render SVGs with a MeshRenderer and custom shader, so I want to access the actual mesh the SVGImporter generates, and the sprite doesn't help because it doesn't give access to the vertex colors. Is there a way to hook in during asset import to get the generated mesh object? I suppose I can read the SVG asset text myself and do my own tessellation, but then I'm processing each asset twice, and it would be nice to have the exact same mesh used to make the sprite so they look the same. The project will eventually have thousands of small SVGs and it would be nice to keep asset processing times down.

Thanks so much!

 

Perfect, thanks!

 

Hi guys

Is it possible to make the vector graphics selectable? I understand there is no interactive function yet, but is there any work around ways to do it?

Also if my scene have multiple root, do I need to create multiple scenes?

thank in advance for any reply!

 

Thanks very much for the great answer!

Sorry for the ambiguous description. I mean the vector scene class. My data structure cannot put all the scenenode under one single root due to the current graph structure has multiple roots. It is a sankey diagram https://en.wikipedia.org/wiki/Sankey_diagram. So if I want to create such, do I need to create multiple scenes or I can fit them in one single scene in some way? I would prefer one single scene if it is possible.

 

@mcoted3d Thanks for adding the preserve aspect ratio feature. I had made my own SVGImage class to do the same thing. But it required a lot of duplicating code out of the SVG package to make it happen. Yuck. Now all clean again!

So along the same lines... how about 9-slice support pretty please?

 

'any idea when this will be out of 'preview'?

 

Hi guys. me again. currently playing around the Vector graphics API. There is a problem that VectorUtils.GenerateAtlas always returns a null TextureAtlas.

My code just simply makes some rectangles and convert them into meshes. Previous steps look ok for me. VectorUtils.Geometry got indices and vertices after tessellation. Then I cannot get textureAltas for uvs. I searched in the forum for similar cases, but didnt find anything. I might make some stupid mistakes...

Thanks very much for any help!

Code (CSharp):

1.  
2.         List<Shape> shapes = new List<Shape>();
3.  
4.         Shape rectangle = new Shape();
5.         foreach(var nodeGroup in result)
6.         {
7.             for(int i =0; i < nodeGroup.Value.Count; i++)
8.             {
9.                 VectorUtils.MakeRectangleShape(rectangle, new Rect( nodeGroup.Value[i].X, nodeGroup.Value[i].Y, nodeGroup.Value[i].Width, nodeGroup.Value[i].Height));
10.                 rectangle.Fill = new SolidFill() { Color = Color.blue };
11.                 rectangle.PathProps = new PathProperties() {
12.                     Stroke = new Stroke() { Color = Color.red }
13.                 };
14.  
15.                 shapes.Add(rectangle);
16.             }
17.         }
18.  
19.         // only uses one rectangle for the testing purpose
20.         Scene scene = new Scene() {
21.             Root = new SceneNode() { Shapes = new List<Shape> {shapes[0]} }
22.         };
23.  
24.         VectorUtils.TessellationOptions options = new VectorUtils.TessellationOptions()
25.         {
26.             StepDistance = 5.0f,
27.             MaxCordDeviation = float.MaxValue,
28.             MaxTanAngleDeviation = Mathf.PI / 2.0f,
29.             SamplingStepSize = 1.0f
30.         };
31.  
32.         List<VectorUtils.Geometry> geoms = VectorUtils.TessellateScene(scene, options);
33.         // here altas is always a null object
34.         VectorUtils.TextureAtlas altas = VectorUtils.GenerateAtlas(geoms, 128);
35.         VectorUtils.FillUVs(geoms, altas);

 

I need the UV since I need to draw the shape mesh on GUI as populateMesh. So the problem is the fill if change the fill then it can generate atlas and UV? Got it, thanks very much!

Besides of draw svg as tessellated mesh, is there any other way to draw vector image on GUI?

 

Hi,

is there anything I can do regarding the "SpriteColor or SpriteFlip for renderers that are not sprite renderers. Values are undefined" error? I simply exported a SVG from Illustrator and get after importing into Unity the given error.

Unity version: 2019.2.5f1
Vector Package Version: 2.0.0-preview.5 (same error with preview.6)

The Vector I tried to import is enclosed.

Thanks!

Edit: I have not used the SVG graphics somewhere yet. I simply imported it and the warning showed up.

 

@mcoted3d Vector graphics appear to be broken in both the current pre-release versions namely 2019.3.0b4 and 2020.1.0a3.

Is this correct or is it just me?

 

@mcoted3d Any word on the issue where UI in overlay mode won't anti-alias? Working around this leads to other issues that if antialiasing functioned we could just avoid.

 

It's one of those things where every work-around presents other obstacles. Overlay doesn't work due to the lack of antialiasing. So we use camera overly and render the UI to an offscreen texture, which we then post process (antialiasing, etc.) and then render as a normal UI image in a normal canvas. This works fine in the standard rendering pipeline... where we are prototyping.... but will not work in Universal or HDRP. The issue is you the render targets don't support Alpha there (and issue I've screamed myself horse about now).

In fact, there is no way to use vector graphics in a UI in, say, HDRP that doesn't look bad (due to a lack of anti-aliasing). You can try to do it without rendering to a texture and then attempting to have antialiasing happen on the UI camera, but it can make a confusing mess of things as the framebuffer contains both the scene and the UI. Odd results in temporal AA, etc.

Since the standard pipeline is deprecated, we have to move to HDRP (Universal is not feature complete enough for our needs).

Still trying to find some simple way to do what should be simple: Make a game with a vector-based UI. You can do it, but doing it at anything resembling production polish. Worse, not sure if anyone is connecting the dots over there that these things.... each developed in isolation.... have to meld together as a cohesive solution.

 

Re: Bug in SVG Polygons with rounded corners

I'm seeing a possible bug in the SVG importer: Rounded corners seem to work fine in stroked paths and polylines, but NOT in polygons. Here's a simple example where the polyline and path both have rounded corners rendering correctly, and a polygon where they render as sharp corners instead.

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<polygon style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 23px;" points="147.729 64.397 39.774 162.667 161.614 299.45 247.57 133.418"/>
<polyline style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 15px; stroke-linecap: round; stroke-linejoin: round;" points="359.815 235.512 272.293 333.42 362.825 375.612 421.214 291.739"/>
<path d="M 381.923 42.504 C 356.526 50.376 330.444 56.307 305.733 66.121 C 303.767 66.902 307.892 69.811 309.381 71.313 C 313.334 75.302 316.838 80.232 321.972 82.509 C 347.985 94.047 375.013 103.194 401.949 112.372 C 413.579 116.335 425.876 118.085 437.557 121.892 C 439.753 122.608 445.279 124.724 443.254 125.835 C 394.11 152.806 340.56 171.68 292.941 201.259 C 281.149 208.584 276.356 223.524 268.063 234.656" style="stroke: rgb(0, 0, 0); fill: none; stroke-width: 12px; stroke-linecap: round; stroke-linejoin: round;"/>
</svg>

Should I submit through the Unity bug system, or is this forum the right place? Thanks!

 

The lack of AA for SVGs in Screen Space Overlay UI is also something I've brought up in several different threads, including this one over a year ago now: https://forum.unity.com/threads/unity-ui-svg-support-script.551254/

Almost a month ago, I brought it up again in the UI Elements roadmap thread and this was the reply:
https://forum.unity.com/threads/ui-roadmap.735338/#post-4927202

I'm really hoping they prioritize this.

 

I appreciate the acknowledgement of the issues. It's been tough for us as we're working on a pretty large-scale project (8 figure dev budget / 30+ team size) . With Unity being in this strange "in between" state right now, we're having a hard time making progress in a way that makes sense. We have to show progress to secure green-lights as we go, but ultimately are really banking on eventually being able to move to HDRP for competitive reasons. Right now we can't make it work at all, with SVG being the gating issue. The longer we are in standard pipeline space, the more worse this is going to be for us when we try to switch.

As for this issue, shouldn't there be some simple way to get the order right on when the MSAA occurs? Or something?

If you have to do it inside of SVG itself, then the only way I've seen it done in the past is with edges being rendered with this sorta shark-fin geomeotry that is always scaled to the pixel grid. This creates the antialiasing on vector geometry (scaleform did this) at the cost of a lot of gemoetry and geometry operations. Not ideal.

 

Ok, another weird question about SVG Sprite meshes. Thanks again for your endless time on this thread! Sorry!

Background: I'm noticing that many of the meshes I've extracted from SVG Sprites have a few backwards facing triangles mixed in here and there. Some have more than others, I think it might be related to <path> elements. The reason I care is that I was hoping to have my vector meshes be invisible from the back, so that you could see through walls that are facing away from you. I've written some code to remove backwards triangles when I extract the mesh from the sprite, and that seems to work great, at the cost of additional processing.

The Question: are backwards facing triangles something expected and intentional, or is this a bug I should report? I have a super simple SVG that generates them that I can submit.

 

@mcoted3d Thank you very, very much for taking the time to look at this. And to feel our pain. Makes me feel very good that you guys are internalizing this disconnect in the feature streams. Much appreciated!

 

I presume this would work too, but the sticky point might be doing the antialiasing on the render target texture where the UI is rendered. The post processing stack on HDRP is different in the types of buffers it can work on (very restricted or something). I'll have to figure out how to give this a try.

 

Is there a way to tesselate a shape in VectorUtils so that we end up with more vertices in the middle of the shape, similar to the tessellation found in this solution: https://github.com/mattatz/unity-triangulation2D

 

Hi again @mcoted3d - I have an issue with SVG rendering on Android.

I've been developing an app on Windows where all the SVGs render nicely but when I tried deploying it to my Android device, many of the SVGs show rendering artifacts or do not render well at all.

Is this a known problem or is it a configuration issue?

 

Hello!
What is the best way to place SVG sprite to the skinned mesh (square plane) after SVGImporter?

VectorUtils.BuildSprite then VectorUtils.RenderSpriteToTexture2D?

 

Thank you! It's works. I am implementing flipping book page with SVG sprite on it. Page is skinned mesh.

So, one more question from me please: There are errors in the Unity console:
Missing Profiler.EndSample (BeginSample and EndSample count must match): GenerateAtlas
Previous 5 samples:
GC.Alloc
Application.CallLogCallback()
GC.Alloc
logCallback.Invoke
GC.Alloc
In the scope:
GenerateAtlas
MainGameManager.Update()
BehaviourUpdate
Update.ScriptRunBehaviourUpdate
PlayerLoop

In MainGameManager.Update() I use BuildSprite and RenderSpriteToTexture. The errors don't break program execution, just annoying. If I remove "Profiler" strings from the VectorSprite.cs code they will recover next Unity load. Should I create a ticket?

 

Hi @mcoted3d,

I have a simple SVG that can't be successfully loaded as an asset.

The SVG contents for it is:

<?xml version="1.0" standalone="no"?>
<svg contentScriptType="text/ecmascript" fill="#ff0066" width="600.0px" xmlns:xlink="http://www.w3.org/1999/xlink"
baseProfile="full" zoomAndPan="magnify" contentStyleType="text/css" height="600.0px" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg" version="1.0">
<defs>
<radialGradient id="grad1571458196878" gradientUnits="objectBoundingBox">
<stop stop-opacity="0.9" stop-color="#ff3333" offset="40%"/>
<stop stop-opacity="1" stop-color="#000000" offset="100%"/>
</radialGradient>
<linearGradient id="grad1571460174232">
<stop stop-opacity="1" stop-color="#333333" offset="0%"/>
<stop stop-opacity="1" stop-color="#cccccc" offset="100%"/>
</linearGradient>
</defs>
<rect x="91.0" y="200.0" fill="#000000" width="441.0" rx="80" height="162.0" ry="80" stroke="url(#grad1571460174232)"
stroke-width="10"/>
<ellipse rx="190.0" fill="url(#grad1571458196878)" ry="72" fill-opacity="0.8" cx="313.0" cy="282.0"/>
<rect x="135.00003" y="213.0" fill-opacity="0.13" fill="#ffffff" width="354.99997" rx="30" ry="30" height="57.0"
stroke="none"/>
</svg>

It seems that the gradient on the stroke of the first rect is the problem. Take that away and it loads fine.

Is this a bug?

 

Thanks @mcoted3d - we have quite a range of SVGs that all use this feature so it is important that it is supported.

 

Hello!
I am currently using the Vector Graphics library in order to read SVGs. The idea of our 2d project was to optimize the level building pipeline by using the SVG format. We are drawing our levels in an SVG editor like Illustrator and want to have some Levelbuilder class, that generates a level from the SVG, by some rules. For example all black rectangles should have Collision (We are using a prebuild rectangle prefab inside unity here), while all paths should be turned to semi transparent platforms (using a linerenderer with a Line Collider) and at the positions of circles we want to place certain objects in our level, depending on the color of the circle.

My big request now would be, to make it possible to distinguish between shapes in the Vector Graphics library, when reading an SVG file. As far as i know at the moment, the only possible way to see the difference between a circle and a rectangle is to analyze the segments of the objects, which takes forever and might not even be precise if done wrong. Would it be a big problem to add some information about how a shape is defined inside the SVG file?
Thanky for your time!

 

Hi, I may have a performance question:
I am using Vector graphics to make a svg based game. There is a svg file with 4000+ pathes.
I built sprite by this file runtime.
I found the function VectorUtils.TessellateScene cost too much time.
When input a svg file with 4000+ path, this function cost about 17000ms.
My tessOptions is :
StepDistance = 1000,
MaxCordDeviation = float.MaxValue,
MaxTanAngleDeviation = 0.05f,
SamplingStepSize = 0.01f
Did I do something wrong, or there is a way to opmiz this?

Thank you

 

Thanks for the good tip and the fast reply!
I would really be looking forward to these metadate informations, as that would even make user generated levels possible in our game, because SVGs are so easy to construct.

 

Yes, they do - thanks for the amazingly fast implementation!