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

    fridaytechnologies

    Joined:
    Jun 13, 2013
    Posts:
    3
    It's very inefficient to read 13 pages of this thread to find out most recent news.
    Is there a roadmap related to this project?
    Most specifically, I'm interested in whether Unity UI has come around to support svgs, or will it any time soon?
     
    TurboNuke likes this.
  2. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    There's no public roadmap as of today, but there is a specific thread that explains SVG support with Unity UI and its limitations: https://forum.unity.com/threads/unity-ui-svg-support-script.551254/
     
  3. warpbu

    warpbu

    Joined:
    Jan 29, 2017
    Posts:
    8
    Sounds like something that would warrant a release if confirmed. Any news on this?

    Cheers,
    Patrik
     
  4. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    If you are using Unity 2019.1 or before, 1.0.0-preview.27 fixes the issue. For 2019.2 and above, the fix will land in the next release (should happen this week).
     
  5. Miguel_TagaiArts

    Miguel_TagaiArts

    Joined:
    Jan 12, 2018
    Posts:
    39
    Hi there,

    Just writing to let you know @mcoted3d that the changelog still does not reflect the 1.0.0-preview.27 changes, so we're not sure what it includes and what could potentially break. Is it possible for you guys to update it?

    Thanks!
     
    Last edited: Jun 27, 2019
  6. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    It takes some time for the docs team to validate and publish it. But you can always have a look in the package itself, you'll see the
    CHANGELOG.md
    file. That said, preview.27 only introduces a simple bugfix:

    * Fixed 'T' path instruction not computing the proper reflected control point
     
    Miguel_TagaiArts likes this.
  7. PantonVentura

    PantonVentura

    Joined:
    Apr 26, 2018
    Posts:
    42
    I'm using Unity 2019.3 but there seems to be no way to import SVG assets. The Package Manager does not include Vector Graphics and SVG files seem to be unrecognised when importing assets.

    Am I doing something wrong or has support for SVG been "hidden" in these latest releases?
     
    kovalevde likes this.
  8. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    The vector graphics package version 2.0.0-preview.3 should show-up in the Package Manager window in Unity 2019.3. You have to select the "Show preview packages" options from the "Advanced" button on the toolbar.
     
    kovalevde likes this.
  9. PantonVentura

    PantonVentura

    Joined:
    Apr 26, 2018
    Posts:
    42
    Thanks - I found it and installed it.

    But... when I try to Import New Asset it does not allow me to select SVG files. Is there something I need to "switch on" to get this to work?
     
  10. Miguel_TagaiArts

    Miguel_TagaiArts

    Joined:
    Jan 12, 2018
    Posts:
    39
    Okay, thank you and sorry if my comment came out as rude or something, just wanted to let you know in case it was some kind of overlook.
     
    mcoted3d likes this.
  11. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Hmm, that's odd. If using Windows, make sure that the file dialog filter (next to the "File name:" box) is set to "All files".

    Alternatively, you can just drag/drop SVG files in the project browser.

    Another way: copy the SVG files somewhere under your project's Assets folder (using Windows Explorer, etc.) and give focus back to Unity, they should import. If they don't, right-click in the corresponding Project Browser folder and select "Refresh".
     
  12. PantonVentura

    PantonVentura

    Joined:
    Apr 26, 2018
    Posts:
    42
    OK, I have imported 2 SVG files by copying them into the Assets folder and they appear there in Unity but have the Internet Explorer icon associated with them and I am not permitted to drag them into the Hierarchy or Scene panels. If I open them, they open in Internet Explorer, even on a Windows 10 machine.

    It looks like the Vector Graphics Package is installed but does not know what an SVG file is or how it should be treated.

    Any ideas?
     
  13. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    They have the Internet Explorer icon in Unity, or in Windows Explorer? I guess it's the latter, and it's normal; Unity won't take over the SVG file association, it will just import the asset and allow you to use it in your project.

    Can you tell me if the assets in the Project Browser window show up as "sprites" or as "default assets" (with a blank icon). If you have a default asset, that means that the import failed. If so, try this:

    - In the project browser, expand the "Packages" section
    - Look for Vector Graphics, right-click on it, then choose "Reimport"
    - Reimport your SVG files

    Also, I think you mentioned that you are using 2019.3? Do you have the same issues with 2019.2?
     
  14. PantonVentura

    PantonVentura

    Joined:
    Apr 26, 2018
    Posts:
    42
    I'm referring the SVG icon within Unity itself.

    What I have discovered is the Vector Graphics work in the latest Beta 7 of Unity 2019.2 but not in the latest Alpha 5 of Unity 2019.3 so I assume it's a regression.
     
  15. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Ok, I think I understand what's going on. The Vector Graphics package is compatible with 2019.3, but requires a new asset type that was recently introduced in 2019.3.0a8, so earlier version of 2019.3 won't work.

    Hope this helps!
     
  16. RisingMos

    RisingMos

    Joined:
    Aug 28, 2015
    Posts:
    17
    Hi mcoted3d, I am new to SVG importer and SVG in general. Everything is working as expected for small SVGs but I have one large SVG with two objects. As you can see from the screenshot attached here one of them is clipped (black area). I am not sure why. When I insert it vector sprite, it works (without clipping) with the default shader but I get the clipping when I use the diffuse shader (which is what I want to use). Any suggestions? I will send you the vector graphics in a private message.

    Things I tried so far:
    - Tried both unity gector graphics versions (1 on 2019.1, and 2 on 2019.3).
    - Tried exporting the SVG from illustrator on different settings including SVG 1 and 1.1.
    - Tried exporting the SVG from Inkscape.
     

    Attached Files:

  17. wkunker

    wkunker

    Joined:
    Jan 6, 2018
    Posts:
    1
    Hello!

    I'm currently trying to build a library to display a stylized vector tile map. Tessellation currently takes multiple seconds for me with a decent sized scene. I had to break tessellations up based on geometry type and combine the meshes afterwards, otherwise I got a glitch where the geometry was often completely broken. Coincidentally, running the tessellations on separate threads seems to have reduced the total tessellation time; but it's still far from the big browser based maps. It's not a problem for fill shapes etc, because I can scale the geometry and fill the mesh without tessellating, but line width and color (and presumably more) seem to be dependent on tessellation. Are there any performance tricks i should be aware of? For example, is there a way to change color or line width without tessellating? Or is it best to wait out eventual performance gains in the tessellation code?

    Thanks!
     
  18. dshook

    dshook

    Joined:
    Jul 14, 2015
    Posts:
    11
    Hi, I'm trying to switch over from SVGImporter to this for better SVG support and came across this issue with a simple shape being stretched when imported no matter what settings I tweak on the asset.

    I'm also wondering if the implementation source code is open source anywhere or if there are plans to make it open source. Since this doesn't seem to be a priority for Unity to improve very quickly it would be nice if the community could help out speed it along.

    Code (CSharp):
    1.  
    2. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    3. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    4. <svg width="100%" height="100%" viewBox="0 0 101 101" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    5. <g transform="matrix(1,0,0,1,-124,-250)">
    6. <g id="bar_bg" transform="matrix(1,0,0,1,124.81,-0.557008)">
    7. <rect x="0" y="251" width="100" height="100" style="fill:none;"/>
    8. <g transform="matrix(0.499999,0,0,1,25.0001,1)">
    9. <path d="M92.114,278.921C92.114,267.299 73.243,257.864 50,257.864C26.757,257.864 7.886,267.299 7.886,278.921L7.886,321.035C7.886,332.656 26.757,342.091 50,342.091C73.243,342.091 92.114,332.656 92.114,321.035L92.114,278.921Z" style="fill:white;stroke:black;stroke-width:8.22px;"/>
    10. </g>
    11. </g>
    12. </g>
    13. </svg>
    14.  
    In Editor:
    upload_2019-7-7_16-40-50.png

    Imported:
    upload_2019-7-7_16-41-14.png
     
  19. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    The region with the black bars is the generated texture atlas, not the vector content itself. It was generated because there's an embedded raster image in the SVG file. To properly map this raster image on vector graphics assets you have to use the "Unlit/VectorGradient" shader, otherwise, the atlas content won't be decoded properly.

    Using a diffuse shader with SVG content isn't supported out of the box. If you want to make this work, you'll probably have to build your own diffuse shader and get the atlas decoding part from the "Unlit/VectorGradient" shader. It is part of the package at "Runtime/Materials/Unlit_VectorGradient.shader".
     
  20. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    You can change the color without re-tessellating. The
    VectorUtils.TessellateScene()
    method returns a list of Geometry objects, which has a color property. You can change the color value before regenerating your sprites/mesh to have the new color take effect.

    The stroke width is a different matter though. Changing the stroke width may change how the corners and joins are generated, so a re-tessellation may be necessary to have correct results.

    That being said, if you know your strokes are simple (no corners, simple joins), you could get away with generating a "base stroke" that you expand/retract by pushing the vertices relative to the centerline. You would do that by moving the vertices from the array in the corresponding Geometry object. No guarantees that this would work in every case, but maybe this could work in your situation.
     
  21. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    The stretching occurs because of the non-linear scaling that is applied on the path:
    <g transform="matrix(0.499999,0,0,1,25.0001,1)">


    Opening the SVG file in Chrome shows the same stretching, so that result seems normal.

    May I ask which SVG tool your are using? It seems that the tool has support for "constant width" strokes, but doesn't export this properly to the SVG file. However, since the SVGImporter doesn't support non-scaling strokes, your best bet is to avoid non-uniform scaling altogether.
     
  22. nsxdavid

    nsxdavid

    Joined:
    Apr 6, 2009
    Posts:
    476
    @mcoted3d Am I correct that the SVG Image component doesn't support SVGs with gradients? Seems problematic because Unity UI uses it's own special shader (for things like clipping) but SVGs also need their own very specific shader.
     
  23. warpbu

    warpbu

    Joined:
    Jan 29, 2017
    Posts:
    8
    I submitted a bug through the in Editor tool a few days ago but it seemingly disappeared into a black void, so here goes:

    Re-importing SVG assets of Generated Asset Type "Textured Sprite" fails with the following exception:


    Asset import failed, "Assets/Button-settings.svg" > ArgumentNullException: Value cannot be null.
    Parameter name: shader
    UnityEngine.Material..ctor (UnityEngine.Shader shader) (at /Users/builduser/buildslave/unity/build/Runtime/Export/Shader.bindings.cs:105)
    Unity.VectorGraphics.VectorUtils.RenderSpriteToTexture2D (UnityEngine.Sprite sprite, System.Int32 width, System.Int32 height, UnityEngine.Material mat, System.Int32 antiAliasing, System.Boolean expandEdges) (at Library/PackageCache/com.unity.vectorgraphics@1.0.0-preview.27/Runtime/VectorSprite.cs:339)
    Unity.VectorGraphics.Editor.SVGImporter.BuildTexture (UnityEngine.Sprite sprite, System.String name) (at Library/PackageCache/com.unity.vectorgraphics@1.0.0-preview.27/Editor/SVGImporter.cs:391)
    Unity.VectorGraphics.Editor.SVGImporter.GenerateTexturedSpriteAsset (UnityEditor.Experimental.AssetImporters.AssetImportContext ctx, UnityEngine.Sprite sprite, System.String name) (at Library/PackageCache/com.unity.vectorgraphics@1.0.0-preview.27/Editor/SVGImporter.cs:325)
    Unity.VectorGraphics.Editor.SVGImporter.OnImportAsset (UnityEditor.Experimental.AssetImporters.AssetImportContext ctx) (at Library/PackageCache/com.unity.vectorgraphics@1.0.0-preview.27/Editor/SVGImporter.cs:278)
    UnityEditor.Experimental.AssetImporters.ScriptedImporter.GenerateAssetData (UnityEditor.Experimental.AssetImporters.AssetImportContext ctx) (at /Users/builduser/buildslave/unity/build/Modules/AssetPipelineEditor/Public/ScriptedImporter.cs:20)


    How to reproduce:

    Unity 2018.4.3f1
    Vector Graphics Package 1.0.0 Preview 27
    macOS Mojave 10.14.5 (18F132)

    1) Create a project containing the Vector Graphics package.
    2) Add an SVG asset and set "Generated Asset Type" to "Textured Sprite".
    3) Exit Unity.
    4) Delete the Library folder.
    5) Open the project again to let Unity re-import assets.
    6) Boom!

    Cheers,
    pabu
     
  24. dshook

    dshook

    Joined:
    Jul 14, 2015
    Posts:
    11
    Ah interesting, I didn't see that looking at the code. I exported this with Affinity Designer which does have different options for scaling the stroke differently so I'll make sure to fix that if I see this again.

    Any word on the source?

    Thanks for the quick reply!
     
  25. PantonVentura

    PantonVentura

    Joined:
    Apr 26, 2018
    Posts:
    42
    @mcoted3d

    I can confirm that SVG imports work in Unity 2019.3.a8 as you suggested.

    Thanks for your help and patience.
     
    mcoted3d likes this.
  26. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Gradients are supported with SVGImage, but require a few tweaks. See here for details:
    https://forum.unity.com/threads/unity-ui-svg-support-script.551254/

    The relevant part is here:
     
  27. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Don't worry, we received your bug report :) A fix is coming soon, thanks for your repro steps.
     
  28. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Note that the source code is visible to the public from the package folder, just wanted to point that out first. So you can, of course, make suggestions and we will consider them.

    We don't have immediate plans to accept pull requests from the public yet, however. There are various reasons, but we need to steer the development very carefully at this time to make sure we will be compatible with future features of Unity.

    That being said, I'll forward your suggestion of open sourcing the package to our product manager. Thanks!
     
    tosiabunio likes this.
  29. nsxdavid

    nsxdavid

    Joined:
    Apr 6, 2009
    Posts:
    476
    @mcoted3d

    Though the code is available via the package (from the cache), the solution file is not included. Which makes it exceedingly hard to work with. Could you provide that in the package (or some other way)?

    I made an extension to take an SVG and build a GameObject hierarchy of it's groups so that each part could have it's transforms individually animated. To make this work, however, I needed to make a specialized version of VectorUtils.BuildSprite where the Rect was a ref so that I could examine it after the call.

    This is trivial to do, but I want to make all this a clean extension of the package. Extending VectorUtils would normally be no big deal since you made the class partial. EXCEPT, C# doesn't let you extend partial classes in other assemblies, and of course the package is it's own assembly. Try as I might, I couldn't get around that. I also couldn't just use an extension method since BuildSprite type methods call other internal/private methods in the class. SAD PANDA!

    I ended up having to make my own class and copying out BuildSprite, making my little mod to the argument signature... but then also had to copy out every method that BuildSprite calls. Ugly and brittle. SADDER PANDA!

    Not sure what the answer is, but maybe you could add a way to get the bounds of a sprite? Or maybe there already is?

    Sadly, while my code works quite nicely, it only works at runtime. You use methods that can only work in the player loop or at asset import time, so I cannot make a general utility that works at edit time. Why these methods, like Sprite.OverrideGeometry (I think it was) have such a restriction is beyond me... and makes life a lot harder than it needs to be.

    So my next approach was to make an alternate SVG importer that combined what yours does with what mine does. This is where I stopped, for now, because I'm a bit unsure how to do this. Since your package already has an asset importer for ".svg", it's not clear how I can override that with my own scripted importer. Perhaps with a lower importQueuePriority value? Not sure that would work or not... pretty sure that's not how it's intended to be used.

    Any ideas?
     
  30. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    The simplest way to deal with this is to embed the package in your project:
    https://docs.unity3d.com/Manual/upm-embed.html

    Basically, you copy the package in your project's Package/com.unity.vectorgraphics folder. Sources will now be part of your project's solution.

    Isn't Sprite.bounds what you're looking for?
    https://docs.unity3d.com/ScriptReference/Sprite-bounds.html

    Yes, Sprites.OverrideGeometry() is problematic in an Editor environment, but there's a way around by using an AssetPostprocessor. By implementing an AssetPostprocessor for your SVG files you can override the geometry there. There's an example here:
    https://forum.unity.com/threads/vector-graphics-preview-package.529845/page-9#post-4084111

    If you really need to go that route, I would use a different extension (e.g., "svg2"). Having multiple importers for the same asset type is asking for problems. That being said, I think an AssetPostprocessor should get you out of trouble.

    Hope this will alleviate some of your concerns!
     
  31. nsxdavid

    nsxdavid

    Joined:
    Apr 6, 2009
    Posts:
    476
    @mcoted3d Yeah, I don't see how the asset post processor hook helps in this instance. This is essentially a different type of asset import. Where as you build a sprite from the geomoetry, I take the scene nodes and split them into individual sprites based on the structure, assigning them to a hierarchy of gameobjects so that each part can be transformed independently. I'm not sure I can achieve that in AssetPostPRocessor.

    I do think I can make a new asset importer do it without much trouble. But I definitely do not want to use a different extension (like "svg2"), which I had already considered. It's a pain as, in the case of SVGs, this is a living file (not just an export) so it needs to be easy to open back up in SVG editing tools, and strange extensions won't fly there. See what I mean?

    I'd prefer if there was a way to plug in an alternate importer.
     
  32. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Yes, I see what you mean. Unfortunately, I don't think the ScriptedImporers support multiple importers listening to the same extensions.

    I don't think there's an ideal solution right now, as the SVGImporter isn't really extensible. The only workaround that I see at this time would be to embed the vector graphics package in your project and disable the SVGImporter from the package (you can simply change the extension it's listening to). This way, only your version of the importer will listen to ".svg" files.

    This is less than ideal of course, since you'll have to manually update the embedded package if you want to update the version.
     
  33. nsxdavid

    nsxdavid

    Joined:
    Apr 6, 2009
    Posts:
    476
    Technically you could implement some callbacks to allow for different behavior, but that may be out of scope.
     
  34. nsxdavid

    nsxdavid

    Joined:
    Apr 6, 2009
    Posts:
    476
    @mcoted3d

    Running into an odd issue. In the image below I am rendering this SVG notched circle thing two different ways:

    Screenshot_070919_032241_PM.jpg

    Version A is a SVG sprite in 3D space. And version B is the same sprite as a SVG Image on a canvas.

    The SVG Image one (B) is rendering rather rough around the edges, like it isn't being anti-aliased. Happens regardless of the SVG used.

    Note this happens when the Canvas is in Screen Space - Overlay mode, but not the other modes.

    Any idea what may be causing this?
     
    Last edited: Jul 9, 2019
  35. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Yes. The overlay-mode for the Canvas UI basically works in screen-space *after* MSAA has been resolved. So even if you enable anti-aliasing for your project, canvases in overlay-mode won't benefit from it. To have anti-aliased edges you'll have to stick to a camera-space canvas.
     
  36. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Should be fixed with 1.0.0-preview.28
     
  37. warpbu

    warpbu

    Joined:
    Jan 29, 2017
    Posts:
    8
    Confirmed to work as expected in 1.0.0-preview.28, thanks a bunch!

    Cheers,
    pabu
     
    mcoted3d likes this.
  38. Jimmyrooster

    Jimmyrooster

    Joined:
    Feb 15, 2018
    Posts:
    2
    Hello,
    I've imported the Vector Graphics 2.0.0 from the package manager in unity 2019.3.0a5 and I'm getting this compiler error

    Library\PackageCache\com.unity.vectorgraphics@2.0.0-preview.4\Runtime\InternalBridge\VectorImageBridge.cs(206,64): error CS0246: The type or namespace name 'GradientSettings' could not be found (are you missing a using directive or an assembly reference?)

     
  39. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    The package will only work with 2019.3.0a8 and above.
     
  40. dshook

    dshook

    Joined:
    Jul 14, 2015
    Posts:
    11
    Hi! Another question for you that may just be my own ignorance. When importing a simple square/rectangle there are more vertices generated than you need. It generates 8 with weird triangles on the corners of the square when it should only need the 4 corner vertices right?

    I can't post the full svg code without it getting flagged as spam but it's just a normal rect inside the svg & g tags:

    <rect x="0" y="0" width="100" height="100" style="fill:white;"/>

     

    Attached Files:

  41. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Absolutely. This is caused by our generic path iterator which is very flexible but doesn't always generate optimal meshes. We have a ticket to improve this. Thanks for reporting!
     
    dshook likes this.
  42. PantonVentura

    PantonVentura

    Joined:
    Apr 26, 2018
    Posts:
    42
    I tried using the classic tiger SVG to test the Vector Graphics in Unity 2019.3.0a8 and found that the rendering is of very high quality on Windows but very low quality when the platform is set to WebGL (as in attached screenshots).

    Why is there such a difference in quality and clarity? Tiger SVG Windows.jpg Tiger SVG WebGL.jpg
     
  43. Hylus

    Hylus

    Joined:
    Jul 4, 2017
    Posts:
    7
    Hello. Im trying to understand why outline shader doesn't work with your generated svg. What is the cause of moves outline? I attached a gif below.

    Code (CSharp):
    1. // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'
    2.  
    3. Shader "Custom/Outline"
    4. {
    5.     Properties //variables
    6.     {
    7.         _MainTex("Main Texture (RGB)",2D) = "white" {} // allows for a texture property
    8.         _Color("Color", Color) = (1,1,1,1) // allows for a color property
    9.         _OutlineTex("Outline Texture", 2D) = "white" {}
    10.         _OutlineColor("Outline Color", Color) = (1,1,1,1)
    11.         _OutlineWidth("Outline Width", Range(1.0,10.0)) = 1.1
    12.     }
    13.  
    14.         Subshader
    15.         {
    16.             Tags
    17.             {
    18.                 "Queue" = "Transparent"
    19.             //    "DisableBatching" = "True"
    20.             }
    21.  
    22.             Pass
    23.             {
    24.                 Name "OUTLINE"
    25.  
    26.                
    27.                 ZWrite Off
    28.                
    29.  
    30.                 CGPROGRAM // allows talk between two languages: shader lab and nvidia C for graphics
    31.  
    32.                 // Function Defines - defines the name for the vertex and fragment functions
    33.  
    34.                 // Define for the building function.
    35.                 // Has information of the shape and tells program how to build it
    36.                 #pragma vertex vert
    37.  
    38.                 // Define for coloring function
    39.                 #pragma fragment frag
    40.  
    41.                 // Includes
    42.  
    43.                 #include "UnityCG.cginc" // build in shader functions.
    44.  
    45.                 // Structures - can get data like - vertices's, normal, color, uv
    46.  
    47.                 //appdata basically says how the vertex function has going to get inforamtions
    48.                 struct appdata // vertex information
    49.                 {
    50.                     float4 vertex : POSITION;
    51.                     float2 uv : TEXCOORD0;
    52.                 };
    53.  
    54.         // how fragments get its data
    55.         struct v2f // fragment inforamtion
    56.         {
    57.             //without SV_ this shader doesnt work on playstation and some other platforms
    58.             float4 pos : SV_POSITION;
    59.             float2 uv: TEXCOORD0;
    60.         };
    61.  
    62.         // Imports - Re-import property from shader lab to nvidia cg
    63.         // properties have to same the same name like in shader lab part
    64.         float4 _OutlineColor;
    65.         sampler2D _OutlineTex;
    66.         float _OutlineWidth;
    67.  
    68.         // Vertex function - builds the object
    69.         //vertex to fragment
    70.  
    71.         //put struct appdata (above) into IN and convert it into a v2f
    72.         v2f vert(appdata IN)
    73.         {
    74.             //get all vertexes of the shape and it's going to
    75.             //times it by the outline width
    76.             // and so its gonna make it either the same size if its 1 or more than one
    77.             // SO its gonna get the shape and then its goona increase it a bit bigger than the actual shape size
    78.  
    79.             IN.vertex.xyz *= _OutlineWidth;
    80.  
    81.             v2f OUT;
    82.             // its gonna take the object form the object space and
    83.             // put it into camera clip space so it's gonna allow it to appear
    84.             // on the screen
    85.  
    86.             //OUT.pos = UnityObjectToClipPos(IN.vertex);
    87.             OUT.pos = UnityObjectToClipPos(IN.vertex);
    88.  
    89.         //    OUT.pos -=  float4(1, 0, 0,0);
    90.             // swapping the uvs to our uvs
    91.             OUT.uv = IN.uv;
    92.  
    93.             return OUT;
    94.         }
    95.  
    96.         // fragment function - color it in
    97.  
    98.         fixed4 frag(v2f IN) : SV_Target
    99.         {
    100.             //gets the teture and wraps it around the uvs of the objects
    101.             float4 texColor = tex2D(_OutlineTex, IN.uv);
    102.             return texColor * _OutlineColor;
    103.         }
    104.  
    105.         ENDCG
    106.     }
    107.  
    108.     Pass
    109.     {
    110.         Name "OBJECT"
    111.         CGPROGRAM // allows talk between two languages: shader lab and nvidia C for graphics
    112.  
    113.         // Function Defines - defines the name for the vertex and fragment functions
    114.  
    115.         // Define for the building function.
    116.         // Has information of the shape and tells program how to build it
    117.         #pragma vertex vert
    118.  
    119.         // Define for coloring function
    120.         #pragma fragment frag
    121.  
    122.         // Includes
    123.  
    124.         #include "UnityCG.cginc" // build in shader functions.
    125.  
    126.         // Structures - can get data like - vertices's, normal, color, uv
    127.  
    128.         //appdata basically says how the vertex function has going to get inforamtions
    129.         struct appdata // vertex information
    130.         {
    131.             float4 vertex : POSITION;
    132.             float2 uv : TEXCOORD0;
    133.         };
    134.  
    135.         // how fragments get its data
    136.         struct v2f // fragment inforamtion
    137.         {
    138.             //without SV_ this shader doesnt work on playstation and some other platforms
    139.             float4 pos : SV_POSITION;
    140.             float2 uv: TEXCOORD0;
    141.         };
    142.  
    143.         // Imports - Re-import property from shader lab to nvidia cg
    144.         // properties have to same the same name like in shader lab part
    145.         float4 _Color;
    146.         sampler2D _MainTex;
    147.  
    148.         // Vertex function - builds the object
    149.         //vertex to fragment
    150.  
    151.         //put struct appdata (above) into IN and convert it into a v2f
    152.         v2f vert(appdata IN)
    153.         {
    154.             v2f OUT;
    155.             // its gonna take the object form the object space and
    156.             // put it into camera clip space so it's gonna allow it to appear
    157.             // on the screen
    158.             OUT.pos = UnityObjectToClipPos(IN.vertex);
    159.             // swapping the uvs to our uvs
    160.             OUT.uv = IN.uv;
    161.  
    162.             return OUT;
    163.         }
    164.  
    165.         // fragment function - color it in
    166.  
    167.         fixed4 frag(v2f IN) : SV_Target
    168.         {
    169.             //gets the teture and wraps it around the uvs of the objects
    170.             float4 texColor = tex2D(_MainTex, IN.uv);
    171.             return texColor * _Color;
    172.         }
    173.  
    174.  
    175.         ENDCG
    176.     }
    177.         }
    178. }
     

    Attached Files:

  44. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    The WebGL build is showing aliasing artifacts, probably because MSAA is disabled by default on WebGL builds. To get the same quality, you'll have to enable antialiasing on the WebGL quality settings (Edit > Project Settings > Quality > Antialiasing).
     
    PantonVentura likes this.
  45. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Looking at the outline shader, it seems that you are scaling the vertices by the outline width (from the vertex shader:
    IN.vertex.xyz *= _OutlineWidth;
    ). This will work fine for convex shapes where each vertex is evenly distributed around the center, but this won't work well with concave shapes, as this will basically push the vertices away from the center of the shape.

    What you would want is to push of vertices along their normal, but we don't provide any normal information along with the SVG generated meshes. So I think that would be challenging to do.

    Alternatively, you could look into screenspace post-process effects to generate the outlines. There are many information online on how to do this.

    Hope this helps!
     
    Hylus likes this.
  46. PantonVentura

    PantonVentura

    Joined:
    Apr 26, 2018
    Posts:
    42
    @mcoted3d Thanks - that tip improved the WebGL rendering quality though it is still not on parity with Windows.

    I have another issue...

    I have an SVG of a button and I get different results with the rendering of this button depending on whether the view port is set to be preserved or not.

    The following 2 screenshots show the problem.

    The first is as I would like it to be but it involves not preserving the view port and then scaling 500 times when adding it to the scene.

    The second is with the view port preserved and although it is sized more nicely without the need for scaling, it is angled rather than curved and a little bit messy.

    Any ideas what might be causing this?

    Button SVG Viewport Not Preserved.jpg Button SVG Viewport Preserved.jpg
     
  47. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    I think this is caused by a very common issue: the root <svg> tag probably has a viewBox attribute applied to it. In this situation, we rescale the imported asset to fit in a fixed size dimension. This was the cause of a lot of confusion, so we decided to ignore the viewBox attribute by default in vectorgraphics-2.0.0-preview (only compatible with Unity 2019.2+).

    If using vectorgraphics-1.0.0-preview, try to not export a viewBox. If you are using Illustrator, you can do this by unchecking the "responsive" checkbox.

    Let me know if you need more information.
     
  48. sergebat

    sergebat

    Joined:
    Nov 22, 2015
    Posts:
    6
    I am trying this extremely promising package in a work-in-progress game.

    I seem to observe two issues:
    • Pivot: SVG Origin, Generated Asset Type: Texture Sprites. What I expect: pivot to be the same as SVG origin (like with Generated Asset Type: Vector Sprite). What I observe: pivot is (0, 0).
    • Viewport: Preserve Viewport. Add this sprite to Sprite Atlas. What I expect: transparent area of the sprite is trimmed in the atlas (like with alpha-transparent PNG). What I observe: entire sprite is preserved in the atlas.
    Basically I hope to import SVG with 20+ individual elements. I split it into 20 individual SVGs, and now I want to import them maintaining relative position.
     
  49. PantonVentura

    PantonVentura

    Joined:
    Apr 26, 2018
    Posts:
    42
    Yes, this seems to be the issue - thanks.

    BTW - when will Vector Graphics no longer be in "preview" mode and make it's way into the production package list?
     
  50. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    We couldn't reproduce this behavior here. If you could send an official bug report with the problematic assets, that would be best. (Help > Report a bug...)

    I'm not sure I understand the request here. Are you referring to the "Sprite Atlas" asset type or the atlas that's generated while importing an SVG asset?