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

    rustum

    Unity Technologies

    Joined:
    Feb 14, 2015
    Posts:
    190
    SVGPreview.gif
    We are finally ready to give you a preview release of the vector graphics package. It provides an SVG importer as well as runtime APIs to build vector graphics elements.

    This is phase one of the Vector Graphics package. We want your feedback in order to add the features that are important to you in subsequent phases.

    Here's some additional information:
    • The SVG importer generates triangulated sprites.
    • As a consequence, the size of the imported asset is directly related to the number of generated triangles.
    • We will consider more import options in the future (import to texture, etc.)
    • The runtime API is in preview phase, and may change at any time.
    We've also created a video to showcase the features in action. Watch it here:


    Getting Started:
    1. Download the latest Unity 2018 beta here: https://unity3d.com/get-unity/download
    2. Grab the samples project and documentation here: https://github.com/Unity-Technologies/vector-graphics-samples
    The “SVGDemo/DemoSVG.unity” scene has some examples of SVG files with features that are supported.
    The “RuntimeDemo/RuntimeDemo.unity” scene has some examples of runtime features:
    • A bezier path tessellated at runtime
    • A clipping example
    • An SVG file loaded at runtime
    Please let us know about your experience with this package!
    What worked as expected?
    Did you encounter any bugs?
    What important features are you missing?

    Please share your thoughts!
     
    Fep310, makaka-org, trenthm and 11 others like this.
  2. Kiupe

    Kiupe

    Joined:
    Feb 1, 2013
    Posts:
    528
    Hi,

    "Integration with 2D tools" : does that means that it is compatible with the new animation system ?

    Can SVG be used in UI ?

    Thanks
     
    Thorlar and jeffweber like this.
  3. jeffweber

    jeffweber

    Joined:
    Dec 17, 2009
    Posts:
    616
    Please say yes! :)
     
    Kiupe likes this.
  4. Anthelmed

    Anthelmed

    Joined:
    Mar 2, 2017
    Posts:
    15
    That would be great if the new runtime API work's with something like bodymovin to create rad animation for the UI.
     
  5. ElKrullo

    ElKrullo

    Joined:
    Feb 24, 2013
    Posts:
    17
    This is great news! Looks like you have a lot of features already.

    I haven't tested it out but here are some features that I would like to see:
    - Overlay texture with blend mode
    - Sorting groups
    - Skinning for animation
     
    mcoted3d likes this.
  6. Kiupe

    Kiupe

    Joined:
    Feb 1, 2013
    Posts:
    528
    Maybe this is out of scope. But be able to import a Flash (Animate) animation directly within Unity would be really great.

    ps : I need to check, but last time I check it was not possible to export SVG from Flash (Animate)
     
  7. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    The SVG importer is integrated with the Sprite Editor, but only the "Physics Outline" is implemented at this time. We do have future plans for animation workflows, but probably not the same "bones/skin weights" approach as the 2D animation tools. We are investigating a way to import an SVG file into multiple sprites that would be connected together with regular transforms. This is still very exploratory, let us know what are your needs.

    SVG sprites are currently incompatible with the UI system, unfortunately. We are looking for ways around this!
     
  8. knup_

    knup_

    Joined:
    Feb 23, 2017
    Posts:
    19
    Looks very promising! Does this support 3d beziers - I'm thinking quill/tilt-brush type application.
     
  9. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Our vector structures are all implemented using Vector2, so you won't be able to express 3D curves. Moreover, all of the vector tessellation and operations are implemented with a 2D mindset, so you couldn't get very far even if we were using Vector3.
     
    knup_ likes this.
  10. v2-Ton-Studios

    v2-Ton-Studios

    Joined:
    Jul 18, 2012
    Posts:
    238
    Man, very excited to see this happening. I'll try to find time to give it a look.

    Top of mind features:

    - Lightning fast perf and scale. To me this isn't interesting b/c you can zoom into static visuals, but b/c it opens the door to realising full games done entirely in vectors. Flat, minimalist style with modern processing effects.

    - Works with dynamic lighting.

    - Works with baked lighting. SpriteRenderer doesn't seem to today, major pain.

    - Works with all PostProcessing effects like DepthOfField, Fog, etc, out of box, no need for custom shaders. Again, SpriteRenderer doesn't out of the box, very frustrating.

    - Can be used with Unity's animation system, as sprites would today, meaning you can build a 2d doll (chest > shld > arm > hand). Fancier bone stuff would be great too, but basic parity would go a long way.

    - In-unity editing, so you can tweak assets imported from say Illustrator.

    - Round-tripping to standard vector editors would be great. Something as basic as save unity version out to SVG so you can load your edits in something like Illustrator.

    Hope that's useful.
     
    Last edited: May 4, 2018
  11. TimNedvyga

    TimNedvyga

    Joined:
    May 18, 2015
    Posts:
    95
    UI support pleeeeeease
    This is the major pain for me.
     
  12. S4UC1SS0N

    S4UC1SS0N

    Joined:
    May 29, 2014
    Posts:
    49
    CSS support ? Very nice idea.
     
  13. enhawk

    enhawk

    Joined:
    Aug 22, 2013
    Posts:
    833
    Congratulations on this release, a very long time coming!!

    Does this work with Canvas?

    Vector graphics in UI would be the no.1 use case for me, to give multi resolution UI using vector graphics
     
    shaneparsons likes this.
  14. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    584
    Would also love to use SVGs for resolution independent UIs. Preferably with some sort of antialiasing without MSAA.
     
    Thorlar and mahdi_jeddi like this.
  15. robertwahler

    robertwahler

    Joined:
    Mar 6, 2013
    Posts:
    43
    This is pretty exciting news! You can get a lot done with vector like graphics in Unity now if you are willing to build your own true type fonts. FontForge with SVG glyphs work well for font building. This works in the UI and in 3D space. TextMeshPro does a great job of handling SDF fonts. All the foreground visuals in my latest 2D Unity game SiNKR are built with TextMeshPro. One downside to this approach is the need for separate glyphs for each color so simple graphics are best.
     
  16. enhawk

    enhawk

    Joined:
    Aug 22, 2013
    Posts:
    833
    its doable but you're limited to one flat colour per glyph as you say. Vector UI for the win!!
     
    recon0303 likes this.
  17. BeeBop1

    BeeBop1

    Joined:
    Oct 5, 2013
    Posts:
    19
    This is going to be amazing for our 2D games to keep them very low file size and be able to scale onto any screen resolution.

    Some things we're interested in:
    • Inspector information for the generated mesh showing how big each generated asset is, this will help us keep an eye on overall file size.
    • UI and canvas support (including 9 slicing, or is that already supported?)
    • Atlas support, for example using something like Spine to animate, it generates a png atlas. Be fantastic to be able to replace the png atlas with a SVG one.
    • A frame animator, say I'm animating a mouth that has 10 shapes. A frame animator component that would allow me to swap SVG asset on the timeline (maybe theres a better way to do that)
     
    mcoted3d likes this.
  18. NaoyaKurihara

    NaoyaKurihara

    Joined:
    Apr 29, 2014
    Posts:
    3
    Hi. I'm so interested in this feature.

    I had one problem when I imported my own svg file.
    My svg has attributes that explicitly describes stroke-dasharray is none.
    like this,
    style="opacity:1;fill:#ededdc;fill-opacity:1;stroke:#000000;stroke-width:7.9380002;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    That caused error.
    I looked into some code.
    I think it should be checked if the value is "none" in SVGParser.cs around line 1303. Thanks.

    Code (CSharp):
    1.  
    2.                 string pattern = styleResolver.Evaluate("stroke-dasharray", SVGResolveLimit.Hierarchy);
    3.                 if (pattern != null && pattern != "none")
    4.                 {
     
  19. Lars-Steenhoff

    Lars-Steenhoff

    Joined:
    Aug 7, 2007
    Posts:
    3,521
    I hope it works this way, but Im a bit worried that he svg is just imported and saved as a sprite or texture and therefore is actually bigger in data than the source svg
     
  20. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Thank you for reporting this, we'll introduce the fix in the next release.
     
  21. BeeBop1

    BeeBop1

    Joined:
    Oct 5, 2013
    Posts:
    19
    @mcoted3d perhaps you could fill us in on how the assets are stored? Do they become textures or are they handled more like a mesh?
     
  22. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    SVG files are imported as sprite assets, so they are more like a mesh. The size of the asset (in bytes) is directly related to the number of triangles that was generated for the sprite. So, if you want a higher quality tessellation, you will get heavier assets, although the adaptive tessellator is pretty good at avoiding unnecessary vertices.

    We don't yet show the stats of the generated asset, but you can get a rough idea of the asset size by getting the imported Sprite object and looking at the size of the Sprite.vertices property. For non-textured SVG sprites, each vertex has at a 2D position and color attributes, which results in 12 bytes per vertex. For textured/gradient SVG sprites, you'll get around 24 bytes per vertex.

    If you want to keep the small source SVG file, you could, in theory, save the SVG files as raw text, and load them at runtime using the SVGParser.ImportSVG API. However, this process can be (very) slow and resource hungry, so I would avoid it for complex SVG files. Moreover, this technique also generates a heavier Sprite object in memory, and would only save space for the stored asset on disk.
     
    Last edited: May 15, 2018
  23. BeeBop1

    BeeBop1

    Joined:
    Oct 5, 2013
    Posts:
    19
    Sounds great!

    Another feature request would be a "recover svg" option on the converted asset, this would allow us to recover the file, edit it in our vector program like Illustrator, then overwrite it in the scene.
     
  24. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    The good news is that there's no need to do that, since the .svg file will still be there in the Assets folder even after being imported. The imported asset (the one written in the asset database) is saved as a sprite, but the actual file in the Assets folder is left unchanged.
     
  25. BeeBop1

    BeeBop1

    Joined:
    Oct 5, 2013
    Posts:
    19
    That's great!
     
  26. ilookha

    ilookha

    Joined:
    Sep 25, 2013
    Posts:
    9
    Amazing stuff! Really happy to see vector graphics getting the attention it deserves :)

    Is there a chance of optimizing the tesselator for decent run-time performance? I assume this use case might be too specific. But I made a quick test of tesselating 4 solid-filled Shapes, each one with a single closed BezierContour made of 42 points. TesselateShape takes 54.71ms, inducing a 0.8MB GC Alloc. Not quite ready to be called every frame :)
     
  27. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Yes, we're working on making the tessellation faster, especially for simple cases. However, more complex situations (shapes with holes, clipped shapes, etc.) triggers a slow path which results in slow performances as you experienced.

    So yes, we are not "quite there yet" for runtime tessellation, although you may be able to get away with simple stroked bezier coutours and simple convex shapes.

    Hope this helps!
     
  28. ilookha

    ilookha

    Joined:
    Sep 25, 2013
    Posts:
    9
    Thanks mcoted3d! This is reassuring. My use case is tesselation of concave and sometimes self-intersecting shapes with stroked bezier contours. I was struggling to find a well-performing plugin on the asset store, but also too lazy to write my own (or port old gameswf code which does the job) :) So I'll make sure my code is compatible with hopefully upcoming updates of Unity Vector Graphics!
     
    mcoted3d likes this.
  29. AlexHell

    AlexHell

    Joined:
    Oct 2, 2014
    Posts:
    167
    Which differences are between this project (except free cost) and SVG Importer asset? Also what about code base: is it refactored version of any SVG plugin or the complete new code?
     
  30. AlexHell

    AlexHell

    Joined:
    Oct 2, 2014
    Posts:
    167
    Where is the source code? I found no source, dll only:
    Unity.VectorGraphics.dll
    com.unity.vectorgraphics.dll
    Is it without source?
     
  31. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    This is a completely different implementation. I don't know much about the asset store SVG importer, but I think the main difference is that we provide APIs to build vector graphics at runtime. We also provide our own optimized tessellator for paths: it is faster and generates more GPU-friendly geometry.

    The source can be found in the package manager cache. I believe it is located at:

    C:\ProgramData\Unity\cache
    on Windows and

    ~/Library/Unity/cache
    on macOS.

    After it is loaded, the package is compiled in a DLL as you found out, just like user scripts.
     
  32. AlexHell

    AlexHell

    Joined:
    Oct 2, 2014
    Posts:
    167
    Could you please explain in details: which optimized tesselator you use? I found LibTessDotNet which exactly the fastest one, and it's also used in SVG Importer.

    Also I have not found sources nor in "C:\ProgramData\Unity\cache" nor in other folders like "C:\Program Files\Unity 2018.2.0b4\Editor\Data". Could you please say correct path?

    p.s. Also I'm very interesting in the fastest one approach to build meshes by vector graphics at runtime. Do you investigating in this way? For example: special optimizations for multi-threaded, simd, special algorithms for fast bezier triangulator?
     
  33. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    For stroked paths we have our own tessellator. It walks along the path and generates vertices along the way. For generic shapes, we use LibTess as well.

    We do have plans to optimize it quite a bit more, and possibly to make use of the Job System. We'll make sure to share our results when we have made progress in that regard.

    The packages source changed location since the latest 2018.1 version, sorry for the confusion. You should find the package's data in the AppData folder:
    C:\Users\username\AppData\Local\Unity\cache\packages\staging-packages.unity.com
     
  34. ScottyB

    ScottyB

    Joined:
    Apr 4, 2011
    Posts:
    146
    Hi @mcoted3d, are you planning on making the Vector Graphics repository public and being allowed to accept pull requests from the public?

    We currently use the SVG Importer plugin in a lot of our games but have modified it extensively to fix bugs and improve performance. This means that we can't easily get new versions of the SVG Importer plugin without a large merge process, which is an annoying situation to be in.

    We are investigating the viability of switching to Unity's Vector Graphics package and we would prefer to not differ to much from upstream by being able to send fixes/improvements upstream.
     
    Invertex likes this.
  35. AlexHell

    AlexHell

    Joined:
    Oct 2, 2014
    Posts:
    167
    Thanks. Also, could you please explain your bezier interpolation algorithm? I have found TraceShape method, it use PathDistanceForwardIterator, but I can't fast understand which method it use.. it has some parameters like maxCordDeviationSq + maxTanAngleDevCosine (like recursive algorithm) and also stepSizeT (like incremental with fixed step). In my experiments I have found what recursive algorithm give the best results for performance (for runtime) and for points count. References
    http://antigrain.com/research/adaptive_bezier/
    antigrain.com/__code/src/agg_curves.cpp.html
    I found what you use other algorithm. Why? My question is for finding the best one.. if your current implementation is for test only, it's ok. But if you chose this for some reasons, please explaint it.
     
  36. Invertex

    Invertex

    Joined:
    Nov 7, 2013
    Posts:
    1,539
    This is looking great! I'm curious from a technical perspective what the downsides of simply generating an SDF from the SVG files and using that would have been over using this mesh tessellation approach you guys are going. Is there some extra functionality you get with it that you wanted which SDFs wouldn't have really allowed? (I believe calculating raycast hit on an SDF is still possible as well due to its math based nature, but correct me if I'm wrong). Plus an SDF takes care of the edge aliasing issues.

    Indeed, quite a few Unity repos are open to public pull requests now. I hope more of Unity development starts to adopt this idea because really the whole community and Unity only gains to benefit from it through crowd-sourced bug-testing and fix help. I can understand them not doing it if this is code that intends to live primarily in the C++ side though, though they expressed that they were trying to move towards keeping stuff on C# now these days since we have these great new compilers to take advantage of.
     
  37. AlexHell

    AlexHell

    Joined:
    Oct 2, 2014
    Posts:
    167
    Hello! If I correctly understand SDF tech, we can't simply replace one svg to one sdf due to many inner contours.. it works great for fonts when inner contours not exist, otherwise we need 2-3-10 sdf's.. for arbitrary svg with many inner elements we take many sdf's or need hybrid approach (don't know any one).
    Illustration http://prntscr.com/jksqxc
    p.s. Also svg can have multiple layers with arbitrary opacity and color, which blend can't be coded to one sdf
    p.s.2 I'm not expert, and not from unity.. wait for expert answers :)
     
    Last edited: May 21, 2018
  38. Invertex

    Invertex

    Joined:
    Nov 7, 2013
    Posts:
    1,539
    Your holes example could be said the same of for this mesh approach, in either case, you're generating extra data to support those holes, here it's a new series of vertices to tessellate, and with SDF it's a subtractive SDF. And you definitely can do that blended layers with SDF :p

    Have you seen the game "Dreams" on the PS4 btw? The whole world is constructed from SDFs, even the characters you see, many thousands of SDFs.
     
  39. AlexHell

    AlexHell

    Joined:
    Oct 2, 2014
    Posts:
    167
    Specially my approach not to build meshes at build, but at runtime, and my game is for mobiles and web, not standalone, and we don't need thousants of SDF's or meshes which is huge space consumers.
    May be your are right, and SDF for pre-build approach is better than meshes.

    p.s. Also if you take SDF's to build, if I correctly understand, you need SDF per layer (or not?), due to unique opacity and color, and if layers count is huge (100s-1000 per SVG) you take 1000 SDF's, or you take only one mesh with specified gradients and colors and opacity - which is better for space usage, imo.
     
    Last edited: May 22, 2018
  40. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    The VectorGraphics repository is private at this time, so you won't be able to make pull requests. I'm not sure whether or not it will stay that way in the future. I would recommend that you work with us for additional features and bugfixes.
     
  41. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    The TraceShape method uses two constraints to know when to subdivide the bezier curves. There's the "Max Cord Deviation" and the "Max Tangent Angle" constraints. Using these constraints may result in slightly slower tessellation, but will greatly improve the quality of the tessellated mesh. You'll find more info about them in the docs here, in the "Advanced tessellation" section:
    https://github.com/Unity-Technologi...s/blob/master/Documentation/vectorgraphics.md

    The reason we introduced these constraints is by running the tessellator on a variety of SVG files. We found out that the "Max Cord" constraint worked best for really pronounced curvatures, but is slower to evaluate. The "Max Tangent" constraint is faster to evaluate and provides decent quality for smooth curvatures.

    From what I see, our "Max Tangent Angle" constraint seems similar to what AGG is doing using the curve_angle_tolerance_epsilon value. I hope this helps!
     
  42. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    SDFs works great in some situations. However, for some geometric shapes, you may get stair-case "stepping" or rounded corners where you don't want them. To solve this, you may end up with very large SDFs that consume a lot of data. For these reasons, we ended up with a more straightforward tessellated mesh instead, and rely on MSAA for antialiasing.

    Note that we may add more import option in the SVG importer in the future. An "import to texture" option is a common request.
     
  43. heartshapedbox

    heartshapedbox

    Joined:
    May 27, 2018
    Posts:
    31
    Hi. I'm very happy unity decide to support svg file.

    And i have some questions.

    https://imgur.com/6st7SBz or check the attached file

    The 'img1' is minimized in illustrator and as you can see the pic,
    It is very sharp and clean.

    The 'img2' is a svg file on scene view in unity editor, and the 'img3' is on game view in unity editor.
    and those are very blurry.

    what's the different between them?

    How can i get a better result in unity editor when i minimized svg file?
    It is usually good when i enlarge image, but it is not good when i minimize it.

    thanks!
     

    Attached Files:

  44. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    It's hard to tell how the SVG is constructed from the screenshots. I can see two things:
    1. The SVG is constructed from very thin shapes, leading to aliasing issues. If this is the case, enabling MSAA would very probably help.
    2. The SVG contains a raster image, in which case there may be a bug on how we handle the texture.

    If you can send us your SVG file we will look at it.
     
  45. heartshapedbox

    heartshapedbox

    Joined:
    May 27, 2018
    Posts:
    31
    Okay, where should i send e-mail?
     
  46. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    We'll contact you, thanks!
     
  47. rahuxx

    rahuxx

    Joined:
    May 8, 2009
    Posts:
    537
    Looks Good.
     
  48. AbgaryanFX

    AbgaryanFX

    Joined:
    Jan 9, 2010
    Posts:
    167
    I'm not able to use sprite(svg) with UI, is it ok ?
     
  49. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    This is a known issue. This is a side-effect of the UI system not supporting sprites with tight meshes. We are working with the UI team to try to solve this.
     
    WhiteGfx and AbgaryanFX like this.
  50. foolmoron

    foolmoron

    Joined:
    Jun 22, 2013
    Posts:
    41
    Not sure exactly where to report bugs but I ran into a little crash when importing an SVG at SVGParser.cs:197
    The SVG had an "image" tag which wasn't supported and so the subTags access crashed. I just changed it to return if the nodeName isn't in subTags.