Unity Technologies

Thanks, this looks promising
what about run-time conversion performance? Is it suitable for mobile

Click to expand...

Parsing and tessellating an SVG file at runtime can be a slow process, depending on the complexity of the file. So, I would try to do it during the level loading phase instead of during gameplay. For simple SVG scenes, the runtime conversion may be fast enough to be done during the gameplay loop. You'll have to measure with your own assets to see what is acceptable in your situation.

A few SVG features to avoid to speed-up the import process:

Avoid using clipping paths: these take forever to clip the shapes

Avoid filling patterns: these patterns are repeated to fill the shape

Avoid embedded textures in your SVG, which make take a while to bake in an atlas

How can I configure the import at runtime so that the unity does not hang 100%? So it would take longer to load, but it was possible to do a download with animation. If it is not possible now, then it would be great to see such an opportunity. Thanks.

Unity Technologies

How can I configure the import at runtime so that the unity does not hang 100%? So it would take longer to load, but it was possible to do a download with animation. If it is not possible now, then it would be great to see such an opportunity. Thanks.

Click to expand...

This is a tough one right now. While SVG files may be imported in a different thread, but it is not an easy task at this time. I was successful with these two options, but none of them are perfect:

Use the C# job system. This is a bit challenging since the job system only works with blittable types. This means you'll have to use native containers, which requires you to know how many vertices/indices you'll need before the tessellation. Alternatively, you can reserve more space than necessary and have the job write back how many vertices/indices were actually used.

Use plain C# threads. This allows you to do pretty much anything, but you'll have to be more careful.

In both cases, you should only do the SVG parsing + tessellation on a different thread. The sprite/mesh creation should occur on the main thread.

Unity Technologies

SVG filters are a bit problematic to support since they usually involve a screen-space postprocess. In Unity, this is not something that is applied to individual sprites, but usually handled by a camera postprocess pass.

We could probably support filters when importing to a textured sprite, this would be simpler given that the filter effects can be baked in the texture. However, at this time, we leave it to the users to apply the filters (bloom, blur, etc.) directly on the game camera instead.

While working with a multitude of prefabs we encountered the following issue:
when choosing 'Save' (or pressing CTRL+S) when editing a prefab,
previously edited prefabs containing SVG sprites will reimport.

When editing lots of larger prefabs in a row, this takes so long, it cripples our ability to work.
I have created a project reproducing the issue.

Also Included is a video file showing the steps needed to reproduce the issue:

Unity Technologies

While working with a multitude of prefabs we encountered the following issue:
when choosing 'Save' (or pressing CTRL+S) when editing a prefab,
previously edited prefabs containing SVG sprites will reimport.

There are plans to have animation support, but some work has to be done first. Providing bone weights support is not trivial with SVG since the assets can be re-tessellated, so the bone weights have to be transferred back to the new vertices. Doing this in an accurate manner is non-trivial.

For these reasons, we are exploring alternative ways to hook ourselves into the animation system, such as dividing the SVG into parts (a bit like the experimental PSD importer). However, all of this is very exploratory at the moment, and we cannot provide a delivery estimate.

I'm also having this issue, but it's manifesting itself in a different way. I haven't noticed the slowdown at all, but when it re-imports the prefabs it's rearranging the data slightly and saving that out again, generating file modifications in git for every prefab it touches. It might be a bug with the prefab system, but it seems to only be occurring on prefabs with SVGs in them.

Attached is an example of the changes it makes. It always moves around the contents of the m_Modifications array, and never in a consistent way. In this specific case, that m_Modification block got moved back and forth several times throughout the course of the day, so I can't just commit the change and forget about it.

Attached Files:

Hi, I've been wanting to take advantage of the runtime loading and creating sprites from SVG's.

Is there any particular reason why the functions "TessellateNodeHierarchyRecursive" and "TraceNodeHierarchyShapes" are internal/private?

Rather, what's the best way to gain access to use these functions at runtime instead of me directly modifying VectorSceneTessellation.cs inside the Vector Graphics Package. This then makes it impossible to use Unity Cloud Build.

Hi, I've been wanting to take advantage of the runtime loading and creating sprites from SVG's.

Is there any particular reason why the functions "TessellateNodeHierarchyRecursive" and "TraceNodeHierarchyShapes" are internal/private?

Rather, what's the best way to gain access to use these functions at runtime instead of me directly modifying VectorSceneTessellation.cs inside the Vector Graphics Package. This then makes it impossible to use Unity Cloud Build.

Click to expand...

Is there some reason you can't just use SVGParser.ImportSVG(), VectorUtils.TessellateScene(), and VectorUtils.BuildSprite()?

Is there some reason you can't just use SVGParser.ImportSVG(), VectorUtils.TessellateScene(), and VectorUtils.BuildSprite()?

Click to expand...

I'm trying to only draw or pull certain SceneNodes in the SVG rather than the whole SVG. It has enabled me to generate specific physic shapes to then be used as clickable hotspots and groups of items to be toggled on and off.

Unity Technologies

I'm trying to only draw or pull certain SceneNodes in the SVG rather than the whole SVG. It has enabled me to generate specific physic shapes to then be used as clickable hotspots and groups of items to be toggled on and off.

Click to expand...

For that use case, you can create a new Scene object for each sub-hierarchies that you want to pull out, and add the extracted SceneNodes to the Root of those scenes. Then you can call TessellateScene() on them.

I have seen it work fine both in the editor and a built project, but I've also gotten "Not allowed to override geometry on sprite" in the editor and nothing at runtime. Why does this work intermittently? Are Sprite objects pooled and it depends on whether something was disposed?

(Yeah this is something I complained about earlier, but I thought it was fixed, because I've seen it work.)

Unity Technologies

I have seen it work fine both in the editor and a built project, but I've also gotten "Not allowed to override geometry on sprite" in the editor and nothing at runtime. Why does this work intermittently? Are Sprite objects pooled and it depends on whether something was disposed?

Click to expand...

This is a weird limitation with Sprites, the geometry can only be overridden at runtime or during import. For editor code, your best option is to override the geometry with an asset postprocessor. See here for more details: #417

This is a weird limitation with Sprites, the geometry can only be overridden at runtime or during import. For editor code, your best option is to override the geometry with an asset postprocessor. See here for more details: #417

Click to expand...

Yeah, you explained this to me before. The only thing is I've seen runtime / editor sprite creation work.
No matter though, finally got off my butt and just wrote a camera based version of my own for making the textures.

EDIT: I take it back, my replacement code doesn't work at runtime.
EDIT 2: Just trying to use a Material that wasn't included in build. One of those days...

I'm still having with preserve viewport working as expected. I use Adobe Illustrator to create my SVGs, but illustrator doesn't include the width and height tags on export. This is the format it creates:

Unity Technologies

I'm still having with preserve viewport working as expected. I use Adobe Illustrator to create my SVGs, but illustrator doesn't include the width and height tags on export. This is the format it creates:

When there's a viewBox, things are a bit more complicated. The point of the viewBox is to tell how to automatically scale the SVG content to fit a given "window". That makes sense in a web browser, but not so much in Unity. I think we provide a "virtual window" of size 100x100 for the root element in this situation, so the size of the resulting sprite should be around 1 unit if your "Pixels per Unit" is 100, but could be different depending on how the SVG file is constructed.

Click to expand...

I'm pretty sure Illustrator has an option to prevent it from generating a viewBox (the option is called "responsive" if my memory serves me well). Otherwise, we'll have a discussion about how we could handle that property more gracefully.

I'm pretty sure Illustrator has an option to prevent it from generating a viewBox (the option is called "responsive" if my memory serves me well). Otherwise, we'll have a discussion about how we could handle that property more gracefully.

Sounds good! We're also currently getting haunted by exceedingly long save times. We have 100 or so instances of prefabs in our scene that contains SVG files, and when we save the scene it takes 13 minutes or so even when we haven't touched any of the prefabs. It sounds as that issue is related to our current situation. We tried using a script that implemented UnityEditor.AssetModificationProcessor to see what's saved, and all the prefabs popped up which doesn't make sense since we haven't touched them at all. Should only be the scene file and nothing more.

Unity Technologies

While working with a multitude of prefabs we encountered the following issue:
when choosing 'Save' (or pressing CTRL+S) when editing a prefab,
previously edited prefabs containing SVG sprites will reimport.

Is the issue with "A sprite mesh may not have more than 65535 vertices." gonna be fixed? Or is there any workaround for this? Cause I'm trying to render a very high quality svg earth map and it's just impossible to perform this using tessellation settings. Do I really have to split the source svg into multiple files? If so, it would be great to have the built-in utility to perform this in the most optimal way.

Unity Technologies

Is the issue with "A sprite mesh may not have more than 65535 vertices." gonna be fixed? Or is there any workaround for this? Cause I'm trying to render a very high quality svg earth map and it's just impossible to perform this using tessellation settings. Do I really have to split the source svg into multiple files? If so, it would be great to have the built-in utility to perform this in the most optimal way.

Any help would be greatly appreciated!

Click to expand...

This is an unfortunate limitation of the sprite system which doesn't support 32-bit indices to store the mesh. You summarized very well your options:
- Reduce the quality of the mesh. I would try to only enable the "max tangent" limit and leave the step distance to a very high value.
- Split the SVG into multiple smaller SVG files, and assemble them back in Unity. We do have plans to provide an option to automatically split an SVG into multiple sprites (probably grid-based, or group-ID based), but I can't provide an ETA.

Attached Files:

Unity Technologies

The attached project has an SVG file that is displaying horribly wrong when set to use a vector sprite. In textured mode, it looks fine.

Click to expand...

I assume you're referring to the very thin black lines that look very aliased? You'll have to enable antialiasing to get better quality (Edit > Project Settings > Quality > Anti Aliasing). Also makes sure that your camera has MSAA enabled. You may only see the correct result in the Game View (not sure if the Scene View supports MSAA on all platforms).

Using "textured sprites" also works since you can provide the number of samples to use (4 by default).

It would be nice if there was a built-in option to generate a mesh that would work with a line shader as well as the regular mesh generation. I've done a crummy one myself so I can do zooms without regenerating the mesh all the time which I'm happy to share if anyone wants it, but it's definitely not "professional" quality.

I assume you're referring to the very thin black lines that look very aliased? You'll have to enable antialiasing to get better quality (Edit > Project Settings > Quality > Anti Aliasing). Also makes sure that your camera has MSAA enabled. You may only see the correct result in the Game View (not sure if the Scene View supports MSAA on all platforms).

Using "textured sprites" also works since you can provide the number of samples to use (4 by default).

Click to expand...

See the attached image. It's rendering seven copies of the bitmap instead of just one. This is with version 1.0.0-preview.23

Unity Technologies

See the attached image. It's rendering seven copies of the bitmap instead of just one

Click to expand...

Ah! You are using it inside a UI canvas, correct?

Since the SVG has an embedded image, it generated a texture atlas. SVG sprites with gradients and/or embedded images require special handling with the UI canvas:
1. Create a new material that uses "Unlit/VectorGradient", and assign it to the SVGImage component.
2. Choose the canvas in the hierarchy and select "TexCoord2" in "Additional Shader Channels" from the inspector.

Since the SVG has an embedded image, it generated a texture atlas. SVG sprites with gradients and/or embedded images require special handling with the UI canvas:
1. Create a new material that uses "Unlit/VectorGradient", and assign it to the SVGImage component.
2. Choose the canvas in the hierarchy and select "TexCoord2" in "Additional Shader Channels" from the inspector.

Hope this helps!

Click to expand...

That did the trick! I'm a little suprised it didn't do that automatically when I created it with Game Object->UI->SVG Image.

Any plans to add control of SVG elements once the vector graphic has been loaded to Unity?
I would be interested in being able to control those properties through code at run time, to modify for instance the color, opacity, visibility, style options, etc of a path/group svg element.

Unity Technologies

Any plans to add control of SVG elements once the vector graphic has been loaded to Unity?
I would be interested in being able to control those properties through code at run time, to modify for instance the color, opacity, visibility, style options, etc of a path/group svg element.

Click to expand...

Adding controls after the SVG has been imported would be challenging since you are basically dealing with a tessellated mesh at that point. However, you can modify the vector scene before tessellation, and retessellate as needed when the controls change.

Adding controls after the SVG has been imported would be challenging since you are basically dealing with a tessellated mesh at that point. However, you can modify the vector scene before tessellation, and retessellate as needed when the controls change.

Interesting.
I want to load SVGs with Kanji characters and control the order in which each stroke (paths in this case) is loaded. I will have a look at the links you posted to see if I can make it work with that. Thank you so much for your reply!

Hi! I'm getting an error when importing an SVG. I think something about my SVG must be set up incorrectly, but I'm very new to working with them so I'm not sure what I might be doing wrong!

Click to expand...

UPDATE: I fixed this but am not sure why my fix fixed it. In my SVG, there was an object named "Button1". Destroying and recreating that object allowed the import to succeed. No clue if this was an Inkscape error or a Unity error. If it was a Unity error, hopefully this can shed some light on a weird bug!

Hi! I've got a rather nasty bug.
I've got many Prefabs with SVG objects in them. Those prefabs are referenced in other Prefabs and ScriptableObjects.
Now, often when I build, the connection is lost. In the build and in the editor as well.
I've tested it a lot and haven't found a quick solution. What I managed to find out:

This is somehow connected to the Nested Prefabs. In earlier versions (2018.1) this isn't happening. In the newest (2018.3.6) it is.

Hi! I've got a rather nasty bug.
I've got many Prefabs with SVG objects in them. Those prefabs are referenced in other Prefabs and ScriptableObjects.
Now, often when I build, the connection is lost. In the build and in the editor as well.

Click to expand...

Okay. My Issue just evaporated? Somehow, and I really don't understand it, the bug is gone. I've had this issue for 2-3 days or two different computers (a mac and a windows pc). Now it's gone in both! I am happy and ehm angry and I don't know.

Unity Technologies

Okay. My Issue just evaporated? Somehow, and I really don't understand it, the bug is gone. I've had this issue for 2-3 days or two different computers (a mac and a windows pc). Now it's gone in both! I am happy and ehm angry and I don't know.

Maybe it will come back and haunt me in a few days?

Click to expand...

Possibly

There was an issue with SVG sprites being "always dirty" which caused issues similar to the one you described. I pushed a fix in Unity, but the fix is not in your hands yet (I can't fix it in the package, unfortunately).

Any idea whether it's possible to use ShaderGraph to affect the UV of an SVG? I was trying a simple test case, just creating a simple ShaderGraph shader that applied a UV offset to the sampler of _MainTex, but it has no affect on the rendered SVG. From looking through this thread, it seems like maybe UV offset would require using TexCoord2 instead of TexCoord0, but I don't see a way to do that in ShaderGraph.

(Not sure whether to be asking this here or over in the Experimental Graphics forums, since it's kind of the combination of two packages...)

Unity Technologies

Any idea whether it's possible to use ShaderGraph to affect the UV of an SVG? I was trying a simple test case, just creating a simple ShaderGraph shader that applied a UV offset to the sampler of _MainTex, but it has no affect on the rendered SVG. From looking through this thread, it seems like maybe UV offset would require using TexCoord2 instead of TexCoord0, but I don't see a way to do that in ShaderGraph.

(Not sure whether to be asking this here or over in the Experimental Graphics forums, since it's kind of the combination of two packages...)

Click to expand...

UVs with SVG sprites are a bit weird. If I remember correctly, UVs are essentially unused for pure vector sprites since they won't have any texture assigned.

For SVG sprites with embedded texture or gradients, the shader will use a combination of TexCoord0 and TexCoord2 to apply the texture from the SVG atlas. (We couldn't use TexCoord1 because it was reserved by the sprite system if my memory serves).

UVs with SVG sprites are a bit weird. If I remember correctly, UVs are essentially unused for pure vector sprites since they won't have any texture assigned.

For SVG sprites with embedded texture or gradients, the shader will use a combination of TexCoord0 and TexCoord2 to apply the texture from the SVG atlas. (We couldn't use TexCoord1 because it was reserved by the sprite system if my memory serves).

What would you like to achieve by modifying the SVG sprite UVs?

Click to expand...

I was working on a UI shader to add some static/distortion effects to images, via piping a noise textures into a UV offset for the sprite. For example, this round image was been heavily distorted:

But that approach didn't work with the SVG images, and I didn't see any knobs to turn in ShaderGraph to use TexCoord2 instead of TexCoord0.

Oops...

"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.