Official Vector Graphics Preview Package

Like all my project I like to automate importsettings for sprites depending in which folder they are. This saves me some manual repeating labor. It seems like I cannot hook into the SVG's AssetPostProcessor like I used to do:

Code (CSharp):

1.     public class SVGPostProcessor : AssetPostprocessor
2.     {
3.         private void OnPreprocessTexture()
4.         {
5.             if(assetPath.EndsWith(".svg"))
6.             {
7.                 SVGImporter svgImporter = (SVGImporter)assetImporter;
8.                 svgImporter.SvgPixelsPerUnit = 100f;
9.                 svgImporter.TargetResolution = 480; //480p in the editor
10.             }
11.         }
12.     }

Is this unsupported or am I doing it wrong?

 

[EDIT] I figured out what the issue was. I was using Screen.dpi in my stroke size calculations and that apparently doesn't work in WebGL. There should probably be some sort of sanity checking on the HalfThickness value. [EDIT]

I'm having no luck using runtime generated vector graphics in a WebGL export (works fine in editor and native builds). My generated content isn't being shown at all, but it sounds like this is supposed to work? I'm getting a couple different errors in the javascript console:

This one (partial) I see even for the working examples others have posted. Based on a quick search it sounds like a known WebKit thing:

Code (csharp):

1. WebGL: INVALID_OPERATION: texImage2D: type HALF_FLOAT_OES but ArrayBufferView is not NULL

But this one (full output) I only see if I do a development build. I appears to be having an issue with the tessellation.

Code (csharp):

1. [Error] exception thrown: Error: Out of bounds Trunc operation (evaluating 'Module["asm"]["dynCall_viiiii"].apply(null, arguments)'),<?>.wasm-function[_VectorUtils_TessellatePath_mBAF8BBAEA49F06530A5CEF55CD8BE8E843D94F5E]@[wasm code]
2. <?>.wasm-function[_VectorUtils_TessellateShape_mC1582E5ADD69D0BE44F2F07E1D70CFF2EE630CA7]@[wasm code]
3. <?>.wasm-function[dynCall_viiiii]@[wasm code]
4. wasm-stub@[wasm code]
5. dynCall_viiiii@[native code]
6. blob:http://localhost:63217/830ac37a-b83b-4af9-a3f9-82a2faa24d8c:26353:46
7. invoke_viiiii@blob:http://localhost:63217/830ac37a-b83b-4af9-a3f9-82a2faa24d8c:18512:27
8. wasm-stub@[wasm code]
9. <?>.wasm-function[_VectorUtils_TessellateNodeHierarchyRecursive_mBCAEBCB5F854E8984DF4E0957D84C4E1CA6DB75D]@[wasm code]
10. <?>.wasm-function[_VectorUtils_TessellateScene_m77EB7AA09E71D5C0E460E666B94D12CE197CC788]@[wasm code]
11. <?>.wasm-function[_PolyShape_GenerateGeometry_mF8F7817EBECE60EA4D123D6C16C2491DCF1D73DE]@[wasm code]
12. <?>.wasm-function[__ZN18VirtActionInvoker06InvokeEjP12Il2CppObject]@[wasm code]
13. <?>.wasm-function[_VectorShape_GenerateMesh_mBD6965C191D679BCE811983896B6B6A5434E8C60]@[wasm code]
14. <?>.wasm-function[_VectorShape_get_ShapeMesh_m029B0E16146CEA1632A300197AE46B5B4D64CED1]@[wasm code]
15. <?>.wasm-function[_PlayfieldPanel_OnRenderObject_mACCA26D0EE1B1E94053F6118508CD5A51B89E4DA]@[wasm code]
16. <?>.wasm-function[__Z65RuntimeInvoker_TrueVoid_t22962CB4C05B1D89B55A6E1139F0E87A90987017PFvvEPK10MethodInfoPvPS4_]@[wasm code]
17. <?>.wasm-function[dynCall_iiiii]@[wasm code]
18. wasm-stub@[wasm code]
19. dynCall_iiiii@[native code]
20. blob:http://localhost:63217/830ac37a-b83b-4af9-a3f9-82a2faa24d8c:25683:45
21. invoke_iiiii@blob:http://localhost:63217/830ac37a-b83b-4af9-a3f9-82a2faa24d8c:17440:33
22. wasm-stub@[wasm code]
23. <?>.wasm-function[__ZN6il2cpp2vm7Runtime6InvokeEPK10MethodInfoPvPS5_PP15Il2CppException]@[wasm code]
24. <?>.wasm-function[_il2cpp_runtime_invoke]@[wasm code]
25. <?>.wasm-function[__Z23scripting_method_invoke18ScriptingMethodPtr18ScriptingObjectPtrR18ScriptingArgumentsP21ScriptingExceptionPtrb]@[wasm code]
26. <?>.wasm-function[__ZN19ScriptingInvocation6InvokeEP21ScriptingExceptionPtrb]@[wasm code]
27. <?>.wasm-function[__ZN13MonoBehaviour20InvokeOnRenderObjectEv]@[wasm code]
28. <?>.wasm-function[__ZN13RenderManager29InvokeOnRenderObjectCallbacksEv]@[wasm code]
29. <?>.wasm-function[__ZN6Camera18DoRenderPostLayersEPK11CullResultsR17ShaderPassContextNS_10RenderFlagEPFvvE]@[wasm code]
30. <?>.wasm-function[__ZN6Camera12CustomRenderER11CullResultsR17ShaderPassContextPK21CameraRenderingParamsNS_10RenderFlagEPNS_21PerformRenderFunctionEPFvvE]@[wasm code]
31. <?>.wasm-function[__ZN13RenderManager13RenderCamerasEiPFvvE]@[wasm code]
32. <?>.wasm-function[__Z12PlayerRenderb]@[wasm code]
33. <?>.wasm-function[__ZZ23InitPlayerLoopCallbacksvEN45PostLateUpdateFinishFrameRenderingRegistrator7ForwardEv]@[wasm code]
34. <?>.wasm-function[__Z17ExecutePlayerLoopP22NativePlayerLoopSystem]@[wasm code]
35. <?>.wasm-function[__Z17ExecutePlayerLoopP22NativePlayerLoopSystem]@[wasm code]
36. <?>.wasm-function[__Z10PlayerLoopv]@[wasm code]
37. <?>.wasm-function[__ZL8MainLoopv]@[wasm code]
38. <?>.wasm-function[dynCall_v]@[wasm code]
39. wasm-stub@[wasm code]
40. dynCall_v@[native code]
41. blob:http://localhost:63217/830ac37a-b83b-4af9-a3f9-82a2faa24d8c:26023:41
42. browserIterationFunc@blob:http://localhost:63217/830ac37a-b83b-4af9-a3f9-82a2faa24d8c:6826:23
43. runIter@blob:http://localhost:63217/830ac37a-b83b-4af9-a3f9-82a2faa24d8c:6928:9
44. Browser_mainLoop_runner@blob:http://localhost:63217/830ac37a-b83b-4af9-a3f9-82a2faa24d8c:6864:27
45.     printErr (UnityLoader.js:1044)
46.     runIter (blob:http://localhost:63217/830ac37a-b83b-4af9-a3f9-82a2faa24d8c:6933)
47.     Browser_mainLoop_runner (blob:http://localhost:63217/830ac37a-b83b-4af9-a3f9-82a2faa24d8c:6864)

 

Right, my bad. Thanks!

 

I get a lot of bugs trying to build to UWP for 2018.3.0f2 now:

Library\PackageCache\com.unity.vectorgraphics@1.0.0-preview.22\Runtime\SVGParser.cs(59,22): error CS1061: 'XmlReaderSettings' does not contain a definition for 'ProhibitDtd' and no accessible extension method 'ProhibitDtd' accepting a first argument of type 'XmlReaderSettings' could be found (are you missing a using directive or an assembly reference?)

Library\PackageCache\com.unity.vectorgraphics@1.0.0-preview.22\Runtime\SVGParser.cs(61,22): error CS1061: 'XmlReaderSettings' does not contain a definition for 'ValidationFlags' and no accessible extension method 'ValidationFlags' accepting a first argument of type 'XmlReaderSettings' could be found (are you missing a using directive or an assembly reference?)

Library\PackageCache\com.unity.vectorgraphics@1.0.0-preview.22\Runtime\SVGParser.cs(62,22): error CS1061: 'XmlReaderSettings' does not contain a definition for 'ValidationType' and no accessible extension method 'ValidationType' accepting a first argument of type 'XmlReaderSettings' could be found (are you missing a using directive or an assembly reference?)

Library\PackageCache\com.unity.vectorgraphics@1.0.0-preview.22\Runtime\SVGParser.cs(63,22): error CS1061: 'XmlReaderSettings' does not contain a definition for 'XmlResolver' and no accessible extension method 'XmlResolver' accepting a first argument of type 'XmlReaderSettings' could be found (are you missing a using directive or an assembly reference?)

Library\PackageCache\com.unity.vectorgraphics@1.0.0-preview.22\Runtime\SVGParser.cs(420,53): error CS0117: 'Thread' does not contain a definition for 'Sleep'

Library\PackageCache\com.unity.vectorgraphics@1.0.0-preview.22\Runtime\VectorSprite.cs(113,124): error CS0117: 'Type' does not contain a definition for 'DefaultBinder'

Library\PackageCache\com.unity.vectorgraphics@1.0.0-preview.22\Runtime\SVGParser.cs(2085,25): error CS1061: 'SVGDocument.ElemHandler' does not contain a definition for 'Method' and no accessible extension method 'Method' accepting a first argument of type 'SVGDocument.ElemHandler' could be found (are you missing a using directive or an assembly reference?)

​

 

@mcoted3d

I found a SVG Asset bug on Android , when import an svg file into unity, unity auto convert it with an unlit/vectorgradient shader, and build it to the Asset bundles ,
when load the bundle and spawn the game object, the material says : Material does not have a _MainTex texture property. it is required for SpriteRenderer.

SVG Package version1.0.0. preview.23,

Notice: the material is fine when drag the svg object into scene, when load the svg game object from asset bundle on Android , this will occur, and this bug only occur on Android Asset bundle. it's ok with iOS ABs.
if you need , I can give you the AB.

Can you help to fix this ?

 

I really, really, really, really, really, really, really, really, really, really, really, really, really need this functionality, and I need it now.

What can I do to make it work? Do you have somewhere I can get access to the code to try to fix it myself? Is all of it in the repository?

 

Thank you for this. We are using the HoloLens so we need the .NET-option so we can debug in Visual Studio after building for it, however we can also build for IL2CPP if this works. I can do some tests when I have the time, but unfortunately for now I will have to wait with this until next week.

 

Hello All, I'm very new to unity but I'm having a problem using svg files. I have the latest download (2018.3) but I do not see the Vector Graphics package in the Package Manager (w/ All packages tab). I can drag svgs to Assets, but it won't let me do anything with them. Am I missing something? TIA

 

Did you click Advanced -> Show Preview Packages?

 

Thank You!!! I guess I missed that part.

 

As discussed before, I'd like to split a svg file info multiple sprites, but do it in Editor (building these runtime is slow).

I tried simple code as a proof of concept

VectorUtils.TessellationOptions tessOptions = new VectorUtils.TessellationOptions()

{

StepDistance = 100,

MaxCordDeviation = float.MaxValue,

MaxTanAngleDeviation = Mathf.PI / 2.0f,

SamplingStepSize = 10

};



string filename = "Assets/!/live trace test/martin/straw.svg";

var sceneInfo = SVGParser.ImportSVG(new StreamReader(filename));

var geom = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions);

Sprite sprite = VectorUtils.BuildSprite(geom, 10.0f, VectorUtils.Alignment.SVGOrigin, Vector2.zero, 128, true);

when I run this (triggered by a button in EditorWindow), VectorUtils.BuildSprite returns

Not allowed to override geometry on sprite ''

UnityEngine.Sprite:OverrideGeometry(Sprite, Vector2[], UInt16[])

Unity.VectorGraphics.VectorUtils:BuildSprite(List`1, Rect, Single, Alignment, Vector2, UInt16, Boolean) (at /Users/mvaligursky/Library/Unity/cache/packages/packages.unity.com/com.unity.vectorgraphics@1.0.0-preview.23/Runtime/VectorSprite.cs:116)

Unity.VectorGraphics.VectorUtils:BuildSprite(List`1, Single, Alignment, Vector2, UInt16, Boolean) (at /Users/mvaligursky/Library/Unity/cache/packages/packages.unity.com/com.unity.vectorgraphics@1.0.0-preview.23/Runtime/VectorSprite.cs:69)

Can I generate and save sprites in editor this way?

 

Hi, tanks for the feature, it seems very promising.
A problem for me is the generation of the collider. The physic shape doesn't line up at all with the actual geometry. I tried to adjust the tolerance in the sprite editor but can't get a good result.

How is the shape generated? What I need is for the collision shape to be generated from the svg geometry (in my case it can be exactly the same edges, but I'd except separate tesselation settings for the collider in the svg importer).
I tried to modify the code of the importer, but couldn't figure out how to get a shape rather than a triangulated mesh out of the tessellation api).

Any hints? Thanks!

 

That was my approach, but I'm stuck at the "construct the physics outline from those shapes" part. I'm trying to use the api of the package to do this. I'll dig a little deeper and come back to you. Thanks!

 

At first tanks you for this great package.

Can vector graphics import each Layer in SVG file (or group) into separate game object in unity.
I need something like importing FBX files in to unity (Each group into separate game object)

 

Ok, I got it to work. I added this code in SVGImporter.cs at the end of
OnImportAsset.

Code (CSharp):

1. if (m_BetterGeneratePhysicsShape)
2. {
3.     var physicsShapes = VectorUtils.TraceNodeHierarchyShapes(sceneInfo.Scene.Root, tessOptions);
4.  
5.     foreach (var vertices in physicsShapes)
6.     {  
7.         if (rect == Rect.zero)
8.         {
9.             rect = VectorUtils.Bounds(vertices);
10.             VectorUtils.RealignVerticesInBounds(vertices, rect, flip: true);
11.         }
12.         else
13.         {
14.             VectorUtils.FlipVerticesInBounds(vertices, rect);
15.  
16.             // The provided rect should normally contain the whole geometry, but since VectorUtils.SceneNodeBounds doesn't
17.             // take the strokes into account, some triangles may appear outside the rect. We clamp the vertices as a workaround for now.
18.             VectorUtils.ClampVerticesInBounds(vertices, rect);
19.         }
20.     }
21.    
22.     sprite.OverridePhysicsShape(physicsShapes);
23. }

Here is a comparaison of the colliders generated with the build edge detection vs this solution


It would be great if you could support this kind of collider generation in the package.

 

I didn't try, but indeed it wouldn't work. One solution might be to fuse all the shapes together using a boolean algorithm.

 

Hello,

I'm quite new to Unity. I'm the artist for my team so I'm learning some of the things that will affect the design of our game. This package helps tremendously with my work and how I design our worlds.

I've recently been learning how to tile and I love but I can not figure out how to use my SVGs with this system.
Is this not supported or am I possibly not porting them correctly for tiling? I understand that I can not cut up SVGs like a regular sprite sheet but instead load them in individually. I have done this for the paper-doll animations for our characters. Works awesomely!

 

@mcoted3d
when import the svg files into unity, sometimes it will generate the a sprite and atlas , or sometimes it only just a sprite, I found it's related to svg has gradient color or not,
when the svg has gradient color, it will generate the sprite, the sprite has a size ,it shows the scale,
my questions :
1. how can i get the sprite size at runtime ,see the image below.
2. the artist make the svg image size for example 1024*1024, how can get the scale ratio to make size to fit. for example if the sprite size is 100*100, the scale is 1024/100=10.24, how can i get the sprite size for pure colo svg image which they have no sprite or atlas .

I have no idea how unity calculate the sprite size, and how to get it at runtime.

Can you help me out?

 

As you mentioned the sprite size also depending on how the svg file is constructed. so the sprite size may change.

Does unity provide the runtime api to get the sprite size? no matter what the setting is, what all I want is get the imported sprite size, and get the unit, then scale it to my size.
If there isn't, how can i make sure every time when import the svg file, the sprite size is 100*100( the pixels per unit is 100, preserve viewport is checked.)

I have a png sprite which size is 1024*1024, the svg sprite should be exactly the same size as the png sprite, and overlay on it.

 

Would you mind sharing how you were able to accomplish this? I'm trying to do the same thing, but am a bit lost. Thanks!

 

Thanks! I saw that, and get the OnPostProcessAllAssets part. I'm just not sure how to apply the TargetResolution settings to the imported asset, as @LukasH was trying to do:

Maybe I should do this in OnPreprocessAsset()?

 

Perfect, thanks!

 

Hello!
I have problems with opacity when rendering a vector image. Can someone help me solve them, please?

What I see (Unity):


What I want to see (Inkscape):


svg file has parental tag with opacity:

<g

     id="g6485"

     style="opacity:0.7">

It looks like layer's alphas are added to each other, instead of setting alpha after they are blend together.

Generated asset type is "Vector Asset". I use the "preview-23" package version.
Is there any chance I can solve it? Thanks!

 

Hi! I've tried out the preview package and it's great and exactly what I need.
I've got a question and a minor problem. The question first: I'm using it for very simple shapes with no gradient. Can I safely build with the preview package for iOS? When is it expected to be released proper into Unity?

My little problem is that on my macbook pro (from 2011) the shapes are all white. They are white SVGs to begin with, but the color (tint) I set in the SpriteRenderer component isn't being applied. On my windows desktop machine this error does not occur. If that's a bigger problem to solve, I could use different materials and adjust their color.

Thanks!

 

Great news on incorporating this into Unity, I've been using SVG Importer up until now but the support isn't so great so good to know this will be supported in the engine. Just a quick question, will 9 slice be supported for this feature at all?Slicing doesn't work so well with SVG Importer so just wondering whether this will be a feature or not, couldn't see it mentioned but thought I'd ask just in case it's in the pipeline as it'd be useful for my project.

 

You should be able to debug IL2CPP in Visual Studio (as in, step through C# instead of C++) on Hololens as of 2018.2:
https://docs.unity3d.com/Manual/windowsstore-debugging-il2cpp.html

 

Can i use a remote SVG file, load it via UnityWebRequest and show it inside canvas ui?
Thanks

 

I‘m using an old mbp from 2011. It may not have the Metal API. I‘m developing for mobile and must calculate with older devices. Will the Sprite Tinting stay this way? Or do you plan to change that to support older devices?

I could just use different materials and change their color as a workaround, right?

 

@shellyalon @mcoted3d

Unfortunately Metal isn't supported on older macs like the 2011 MBP: https://support.apple.com/kb/SP728

​

Also, Unity doesn't support GPU instancing on OpenGL older than 4.1, and macOS stopped at OpenGL 3.2

I definitely didn't look this up to procrastinate on writing a spec document.

 

Just a little note of gratitude. You have fixed bezier curve rendering with degenerated polygons in preview 23. Our squishy dynamic characters look so sweet now. I love you

 

Any clues about how to change the import setting for svg file with this function?

Code (CSharp):

1.  
2. public class SVGPostprocessor : AssetPostprocessor {
3.     static void OnPostprocessAllAssets(string[] importedAssets, string[] deletedAssets, string[] movedAssets, string[] movedFromAssetPaths)
4.     {
5.         foreach (string str in importedAssets){
6.             if(str.EndsWith(".svg")){
7.                 //what to do to get the svg importer.
8.                 //svg.targetResution =
9.                 //svg.preserveviewport =
10.             }
11.         }
12.     }
13. }

 

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