Official Vector Graphics Preview Package

Hey I'm having trouble saving a gradient to prefab. All other sprites display correctly except for the gradient.
I generated and save the atlas to the prefab. But it is still not rendering. It only happens if when I save to the prefab, might be references missing or something.

Code (CSharp):

1.          
2.             Scene newTempScene = new Scene() { Root = newSceneInfo.Scene.Root.Children[0].Children[0]};
3.             var geom = VectorUtils.TessellateScene(newTempScene, tessOptions);
4.             var newSprite = VectorUtils.BuildSprite(geom, 10.0f, VectorUtils.Alignment.SVGOrigin, Vector2.zero, 128, true);
5.             GameObject go2 = new GameObject();
6.             SpriteRenderer s2 = go2.AddComponent<SpriteRenderer>();
7.             if (i == 3)
8.             {
9.                 var atlas = VectorUtils.GenerateAtlasAndFillUVs(geom, 128);
10.                 AssetDatabase.AddObjectToAsset(atlas.Texture, newPrefab);
11.                 s2.material = svgMat;
12.                 s2.sprite = newSprite;
13.              
14.             }
15.             else
16.             {
17.                 s2.material = svgMat;
18.                 s2.sprite = newSprite;
19.                
20.             }
21.          
22.             go2.transform.SetParent(transform.GetChild(0));
23.             id++;
24.             go2.name = "Child" + id.ToString();
25.             AssetDatabase.AddObjectToAsset(newSprite, newPrefab);
26.  
27.         }

both the sprite and the atlas are there on the prefab and i'm using a unlit/vectorGradient material

 

Hi

Are you able to release an opaque shader for Vector sprites on here?

Can I mask vector sprites only as part of the ui and not sprite masks?

I'm trying to figure out if I can create a vector shape mask in the UI too, with vector graphics shown within the mask.

Thanks
Chris

 

Hi Unity Team,

I changed some geometry in shape to use in my game and it's working. And i saved them and view like image
But it's very slow when load a lots of SVG file the same time so I decided to try to save Sprite from SVG file
But Sprite returned from VectorUtils.BuildSprite() function has NOT texture, so how to save sprite texture from SVG file?
(Runtime Mode)

Thanks you!

 

Is it possible to blur the edges of the SVG after importing it? I'm using them to make shadows. Hard shadows look good but I'd like to experiment with soft edges.

 

Doing that happens on runtime right?
What I was referring to was adding the blur and storing it in the file. Like how you can change the vector graphics to a texture graphics and hit apply.

 

Sorry for trouble but, Unity Beta 2020.1 Packages [https://unity3d.com/unity/beta/packages ] state Vector Graphics are importable but 2020.1.0b8.3654 is not showing this preview package in the manager at all.
I got awhile back at Unity again, and downloaded the latest Beta from Unity Hub, looked through the manual as well but couldn't find anything relevant. Please let me know what I'm doing wrong, all these different versions stuff is making me confused

 

Great that seemed to do the trick! Apologies if it was stupid.
But this was especially confusing as a Preview Package named "TextMesh Pro" was already visible (without checking this option from Project Settings) so it indeed seemed that preview packages were available but the Vector Graphics one was not.

Anyway thanks again! Much appreciated.

 

Hello,

Is it possible to have a "slice" mode for SVG image ? The editor button is here, I can set borders but when using an SVG Image there is not "Image type" like option.

Thanks

 

Ok. At least it's clear !

Thanks

 

Hi and thanks for "Vector Graphics" tool, it's really useful and powerful.
Do you know if we can use Animated SVGs (I'm importing SVG animated from Adobe Animate 2020)? I'm talking about SVGs that contain graphic vectors and also animated parameters.
If not, do you know if we could have this great feature in a near future? ^^

 

Hello,

Is there an ETA for going from preview to production ready ?

 

Hello,
I'm having a weird issue using an SVG exported from Illustrator which has gradient and I don't know how to fix it. The asset is supposed to represent some kind of a frame using a greyscale gradient.

Do you have any idea what's happening ? Is it possible to fix it from my side ?

Thanks

 

Hi mcoted3d,
is there a way to get the same quality of pixel perfect SVG at 2160(4k) Zoom Factor 20, as with Advanced settings, specifically inside C#?

I've tried a lot of values and the closest I can get doesn't look as good as using 'Basic' with 4k and around 20 zoom, but the code API TesselationOptions doesn't have basic options?

 

When I use the SVGRuntimeLoad.cs demo and plugin tiger.svg instead of the svg = you have there originally, and use these values, the SVG import fails -

Incomplete mesh data in Sprite. Please reimport or recreate the Sprite.

UnityEngine.GUIUtility:ProcessEvent(Int32, IntPtr)

When I use DemoSVG.unity and use 'Advanced' settings, the settings do not allow for "SamplingStepSize" it asks for "Sampling Steps" and the value is not allowed to be lower than 3. The result is not a pixel perfect svg. Also if I leave the "Deviation" options at 0.01 in the Advanced settings, then switch to Basic, and apply, the svg is not pexel perfect. There appears to be some settings bugs -

DemoSVG.unity

Using "Advanced" settings with your suggestions and the settings defaulting to 3 for "Sampling Steps"


Using "Basic" settings with all "Advanced" setting at default or initial values:


Using "Basic" settings with "Advanced" settings still having values from screenshot 1 -



RuntimeDemo.Unity

        var tessOptions = new VectorUtils.TessellationOptions() {

               SamplingStepSize = 0.01f,

               StepDistance = 1000,

               MaxCordDeviation = 0.01f,

               MaxTanAngleDeviation = 0.01f

        };



"Incomplete mesh data in Sprite. Please reimport or recreate the Sprite.

UnityEngine.GUIUtilityrocessEvent(Int32, IntPtr)"

        var tessOptions = new VectorUtils.TessellationOptions() {

            SamplingStepSize = 3,

            StepDistance = 1000,

            MaxCordDeviation = 0.01f,

            MaxTanAngleDeviation = 0.01f

        };

var tessOptions = new VectorUtils.TessellationOptions() {

            SamplingStepSize = 15, // 15 - 1000 show little to no discernible difference

            StepDistance = 0.65f, // anything lower throws error

            MaxCordDeviation = float.MaxValue, // no value 0.01f - 100 seems to make any difference

            MaxTanAngleDeviation = float.MaxValue //no value 0.01f -100 seems to make any difference

        };

If it's hard to see the difference in some of the qualities, pay attention to the white "light reflection" shape inside the green eye part, and also the black pupil shape.

 

How can I find these settings values?

 

I'm trying something most don't, my plan is to use SVG for all graphics in-game so its important to me that any SVG looks pixel perfect, I also plan to try to use SVG morphing algorithms to create frame to frame interpolation and swap out the in-game vector sprite with the new frame shape to fake animation. I don't know how the performance of this will work out, I tried this in HTML5 and the DOM rendering was killing performance with more than 100 paths (in this case each path of the tiger for example).

 

I finally got time to play with this today and I have a request for a feature:
I'd love to be able to set the generated asset type to "plain mesh" so I can conveniently use the mesh for various rendering trickery.
I'm not familiar with the code base enough to say for sure, but I guess some features require a texture as well as as a mesh (complex gradients maybe?) that would obviously not work, but for simpler shapes/fills it would be great!

I went on a small rampage through the source and managed to hack it in fairly easily. Is this something you'd be willing to consider?

 

That's great! Another thing I ran into, which I'm sure you are aware of is z-sorting. The generated polygons are all coplanar, so anything that has more than one layer and involves the z-buffer will not work particularly well.
A way to ever so slightly offset each layer in z-space would be very helpful!

 

Yeah, z-fighting for multiple objects on the same plane is to be expected.

I'm referring to having multiple shapes in one svg file. They won't render properly unless ZWrite is Off, which is a whole ordeal when trying to render this alongside other things in an actual scene.

The SVG I used: https://gist.github.com/grapefrukt/2ffe11850bf83bcf158d6043038df528

ZWrite off, looks good, except it won't z sort alongside anything else, which is bad:


ZWrite on, sorts fine but has internal z-fighting making it look bad unless aligned perfectly with the camera:


And, for clarity, here's the wireframe:


What I'm wishing for is an option for a tiny z-offset of the "internal" layers, making this use case possible.

[EDIT]:
This would be fixable by merging the layers as a preprocessing step ensuring there's no overlapping geometry, which could be done with say Clipper or manually in Illustrator, but that's not really ideal either.

 

both solid requests @grapefrukt

those are things I miss from the now dead SVG Importer plugin:
http://svgimporter.com/documentation/

Choosing opaque/transparent as an import setting option

"Opaque
This mode best fits for non-transparent objects which utilise the Z-Buffer which will discard non-visible pixels as soon as possible. This greatly improves the performance, because you render only what you see.
The only downside is that you have to handle your z position manually to avoid z-fighting glitches and artefacts.
Transparent
This mode is best when used on transparent or semi- transparent objects. It does not use Z-buffer and it can suffer from great performance loss. But it can be fully alpha blended, great for fade in/out effects. This mode behaves exactly the same as Unity Sprites."

and these settings

Depth Offset
This option is available only if Format is set to Opaque.
Small values can introduce an z-fight artefact due to low z-buffer precision, increase this number if you see any problematic z-buffer issues.

Save Mesh File
This will save the mesh generated by SVG importer so it can be used in any other way than for SVG graphics. For instance as a particle system emitter or particle it self.

 

We've got some graphics that use gradients (the same gradient). When I have too many objects in an svg, the verts are over 300 (and to enable dynamic batching), I export these as seperate svg files. But then each svg imported creates it's own gradient texture.

Is there any way to make multiple imported svgs use the same material/gradient texture?

Thanks

 

Hi mcoted3d, thanks for the previous help, one thing I'm wondering is if it's possible to exclude a folder from the automated import?

 

Hi @mcoted3d (or maybe @grapefrukt since it sounds like you figured out how to achieve this!): I want to at runtime generate a mesh from an imported SVG file using the VectorUtils.FillMesh function. How can I reference the SVG file in a script so that I can get info from there and into the FillMesh function?

 

Hi, I'm trying to change an SVG's stroke dash gap at runtime. I can't seem to figure out where to even start as the documentation only confuses me further. Any pointers?

 

Hi, @mcoted3d!

I trying to use vector graphics for making a simple painting game.
My goal is to load a vector image from TextAsset and then paint each shape with a different color.

I want to use Physics2D.RayCast, but I can't add collider of proper form for shapes. Polygon collider doesn't fit shape correctly.

How can I accurate Raycast shape?
Or may be there is another way to change dynamicly color of each shape? I mean I want to click on the shape with mouse and change pixel color on the shape.

 

Any news on 9 slices ?

 

Hi,

With my team, we really like this package and are using it a lot. We are currently migrating to unity 2020.1 beta and we got a strange issue. We are using the latest version of the package 2.0.0 preview 12. I would like to know if someone have the same issue or if we are doing a mistake somewhere.

The issue happen with svg asset that generate Texture2D (no issue with textured sprite [edit: in fact It also happen with textured sprite]). But it happen only if the import is done on our Azure pipeline build machine (we are using a Microsoft hosted MacOS agent). In this case, there is no error in the log but the resulting texture is corrupted. We tried to do fresh import from CLI on other Mac machines and windows machines without reproducing the bug.
Here is what the texture should look like:

Here is how it look like:

And here is our current import configuration:


Do you have any ideas? I can provide more information if needed.

Thanks

 

SVG Animations possible workarounds compatible with Vector Graphics

Hello everyone, for those interested in SVG Animations, there are some workarounds. They are far from perfect and have some errors, but at least they offer something. I hope it helps someone and maybe inspires someone to make them better:

There is an open project in Github https://github.com/leetful/u.movin it's based on bodymovin animations in After Effects. Unfortunately, some features don't work, but some of them do (you can test some from https://lottiefiles.com/), and I'm sure it could be a good start point and a possible workaround until Unity gives a solution.

On the other hand, regarding simpler Motion Graphics and UI, there is another repo https://github.com/yasuohasegawa/SVGPainterUnity but unfortunately it doesn't work propertly in newer versions of Unity, although it's also a good starting point. In conjunction with http://lazylinepainter.info/ is a great way to create some animations. Unity Japan has also 2 interesting videos:

and

It's a pity that Unity is so far away beyond the easiness and quality in animations with web technologies. I could understand their position betting on their own animation system, but ignoring other technologies just frustrates a lot of devs.

 

Have you seen Shape, from Freya Holmer the creator of Shader Forge:
https://acegikmo.com/shapes/

 

@coshea although Shape seems a good way to go for vector graphics, the main problems are not supporting SVG, not being open source and not giving a solution to reuse animations made with more suitable software.