Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Official Vector Graphics Preview Package

Discussion in 'UI Toolkit' started by rustum, May 4, 2018.

  1. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
  2. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    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:
    1. Avoid using clipping paths: these take forever to clip the shapes
    2. Avoid filling patterns: these patterns are repeated to fill the shape
    3. Avoid embedded textures in your SVG, which make take a while to bake in an atlas
     
    MechEthan and jGate99 like this.
  3. MechEthan

    MechEthan

    Joined:
    Mar 23, 2016
    Posts:
    166
    Information like this is gold. Thank you for sharing!
     
  4. AntonVazhinsky

    AntonVazhinsky

    Joined:
    Nov 24, 2013
    Posts:
    67
    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.
     
  5. Jeremy242

    Jeremy242

    Joined:
    Oct 9, 2018
    Posts:
    1
    Will SVG filters be supported in the future?
     
  6. DriesVienne

    DriesVienne

    Joined:
    Jun 22, 2013
    Posts:
    27
    Can I change the default pixels per unit when importing? Specifically of when importing in Vector Sprite mode?

    The package is looking fantastic.
    Compliments to the team.
     
  7. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    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:
    1. 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.
    2. 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.
     
    Last edited: Jan 28, 2019
  8. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    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.
     
  9. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    I think your best bet is to write an asset preprocessor:
    Code (CSharp):
    1. public class Process : AssetPostprocessor
    2. {
    3.     void OnPreprocessAsset()
    4.     {
    5.         if (assetPath.EndsWith(".svg"))
    6.         {
    7.             var svgImporter = assetImporter as SVGImporter;
    8.             svgImporter.SvgPixelsPerUnit = 200.0f;
    9.         }
    10.     }
    11. }
     
    MechEthan likes this.
  10. DriesVienne

    DriesVienne

    Joined:
    Jun 22, 2013
    Posts:
    27
    How did I not see that.
    Thank you for the quick reply.

    I fear we have unexpected behaviour we would like to report:

    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:
    • Edit a prefab containing an SVG
    • Observe import logging: the edited prefab was reimported = Expected
    • Choose File > Save (or hit CTRL+S)
    • Observe no logging = Expected
    • Edit a different prefab containing an SVG
    • Observe import logging: the edited prefab was reimported = Expected
    • Choose File > Save (or hit CTRL+S)
    • Observe the previous prefab beeing imported multiple times = Unexpected
    We only observe this behaviour with prefabs containing SVG's.
    Reproduced using Unity 2018.3.0f2, Vector Graphics 1.0.0-preview.23
     

    Attached Files:

    mcoted3d likes this.
  11. mspetkat

    mspetkat

    Joined:
    Feb 16, 2018
    Posts:
    4
    Is it possible to use Unity's 2D Animation tools with SVGs? If so, how? I'd really like to use the bone rigging. Would streamline workflow greatly.
     
  12. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    I was able to reproduce this, we'll have a look.
     
    Lasseastrup3 and DriesVienne like this.
  13. MechEthan

    MechEthan

    Joined:
    Mar 23, 2016
    Posts:
    166
    From earlier in this thread:
     
    tosiabunio and mcoted3d like this.
  14. mspetkat

    mspetkat

    Joined:
    Feb 16, 2018
    Posts:
    4

    Thank you.
     
  15. jring

    jring

    Joined:
    Dec 2, 2015
    Posts:
    7
    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:

    mcoted3d likes this.
  16. Dangy

    Dangy

    Joined:
    Aug 26, 2013
    Posts:
    7
    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.
     
  17. ecurtz

    ecurtz

    Joined:
    May 13, 2009
    Posts:
    640
    Is there some reason you can't just use SVGParser.ImportSVG(), VectorUtils.TessellateScene(), and VectorUtils.BuildSprite()?
     
  18. Dangy

    Dangy

    Joined:
    Aug 26, 2013
    Posts:
    7
    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.
     
  19. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    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.
     
  20. ecurtz

    ecurtz

    Joined:
    May 13, 2009
    Posts:
    640
    Also VectorUtils.BuildSprite() apparently doesn't work reliably. :(

    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.)
     
  21. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    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
     
  22. ecurtz

    ecurtz

    Joined:
    May 13, 2009
    Posts:
    640
    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...
     
    Last edited: Jan 31, 2019
    mcoted3d likes this.
  23. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    20
    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:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362 329">

    Would it be possible to get support for SVGs with this format? For now, I manually add width and height tags to get dependable scale on my objects. So I just add this to each SVG in a text editor:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362 329" width="362" height="329">

    That information is already contained in the viewBox dimension. Thanks.
     
  24. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    The viewBox attribute makes our life difficult.

    From this post:
    https://forum.unity.com/threads/vector-graphics-preview-package.529845/page-9#post-4104958
    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.
     
  25. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    20
    Disabling "responsive" does the trick. Thanks!
     
  26. Lasseastrup3

    Lasseastrup3

    Joined:
    Oct 16, 2013
    Posts:
    16
    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.
     
  27. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    20
    Can vector graphics be used with the 2D Spriteshapes package by chance?
     
  28. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    SpriteShape is very much implemented in terms of textured sprites as far as I can tell, I would not expect it to work.

    However, you may have some luck if you import your SVG assets as textured sprites.
     
  29. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    From my investigation, it seems that the "textureless sprites" that the SVG importer is instantiating are getting dirtied for no good reason, which forces the assets to re-serialize to disk.

    I'm working on a fix, but this will unfortunately have to be patched in the Unity core (I cannot fix this in the vector graphics package). This will take a bit longer to land in your hands.
     
  30. DriesVienne

    DriesVienne

    Joined:
    Jun 22, 2013
    Posts:
    27
    Thanks for the update!
     
  31. Ommand

    Ommand

    Joined:
    Apr 29, 2015
    Posts:
    6
    Hello!

    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!
     
  32. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    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.

    Given that you know the structure of your specific SVG file, you could write an asset postprocessor to import the SVG file, and tessellate it into multiple sprites yourself. This is all feasible from the vector graphics API. There's an example that should help here: https://github.com/Unity-Technologi...b/master/Assets/RuntimeDemo/SVGRuntimeLoad.cs
     
    eduardmirica likes this.
  33. rockwalrus

    rockwalrus

    Joined:
    Nov 13, 2016
    Posts:
    4
    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.
     

    Attached Files:

  34. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    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).
     
  35. ecurtz

    ecurtz

    Joined:
    May 13, 2009
    Posts:
    640
    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.
     
    mcoted3d and trenthm like this.
  36. rockwalrus

    rockwalrus

    Joined:
    Nov 13, 2016
    Posts:
    4
    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

    Septuple Vision.png
     
  37. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    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.

    Hope this helps!
     
  38. rockwalrus

    rockwalrus

    Joined:
    Nov 13, 2016
    Posts:
    4
    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.

    Thanks!
     
  39. UziLullaby

    UziLullaby

    Joined:
    Jul 4, 2014
    Posts:
    6
    Greetings.

    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.
     
  40. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    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.

    The "Spline" runtime demo is an example of this:
    https://github.com/Unity-Technologi...ples/blob/master/Assets/RuntimeDemo/Spline.cs

    Also note that you can get you hand on specific shapes identified by IDs in the SVG file. See here for an example:
    https://forum.unity.com/threads/vector-graphics-preview-package.529845/page-7#post-3812335
     
    UziLullaby likes this.
  41. UziLullaby

    UziLullaby

    Joined:
    Jul 4, 2014
    Posts:
    6
    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! :)
     
  42. wedgiebee

    wedgiebee

    Joined:
    Aug 9, 2016
    Posts:
    40
    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!

    I've attached the errors, and I've attached the SVG as a .txt file since I couldn't attach the SVG itself...

    Error preview:

     

    Attached Files:

    Last edited: Feb 21, 2019
  43. wedgiebee

    wedgiebee

    Joined:
    Aug 9, 2016
    Posts:
    40
    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!
     
  44. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Thank you, it seems this SVG file contains a path definition that triggers an issue with the importer. We'll have a look.
     
  45. shellyalon

    shellyalon

    Joined:
    Mar 26, 2013
    Posts:
    27
    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.
    • It only happens to Prefabs containing SVG Objects.
    • The fileID changes! Like mentioned above in some post, Unity saves the SVG Assets anew? (see screenshot).

    The issue is pretty easy to reproduce:
    • Make some prefabs with SVG Objects.
    • Make a class 'container' with a variable for a GameObject
    • Make a prefab with the 'container' script and reference a SVG prefab.
    • Build the game several times until something breaks.

    I am desperate. Please help!

     
    Last edited: Feb 21, 2019
  46. shellyalon

    shellyalon

    Joined:
    Mar 26, 2013
    Posts:
    27
    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?
     
  47. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Possibly :p

    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).

    In any case, I'll try to reproduce the issue you described.
     
  48. dgoyette

    dgoyette

    Joined:
    Jul 1, 2016
    Posts:
    4,193
    Hi there,

    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...)
     
  49. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    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?
     
  50. dgoyette

    dgoyette

    Joined:
    Jul 1, 2016
    Posts:
    4,193
    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:

    upload_2019-2-22_14-41-27.png

    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.