Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

Unity Vector Graphics Preview Package

Discussion in '2D Experimental Preview' started by rustum, May 4, 2018.

  1. Miniced

    Miniced

    Joined:
    Aug 18, 2015
    Posts:
    5
    I've been trying to write my own shader to render SVG sprites by using Vector.Shader as a starting point.
    However, I came into a problem; v2f.texcoord's values are always (0,0), which makes texture mapping an issue.
    Is there a way around this?
     
  2. wbahnassi_unity

    wbahnassi_unity

    Unity Technologies

    Joined:
    Mar 12, 2018
    Posts:
    28
    Texture coordinates are generated in certain cases only, otherwise they will be 0. The UVs get generated if the SVG shape has a texture fill or a gradient fill. In the latter case you can review the VectorGradient shader to see how the gradient is evaluated.
    If you want UVs regardless of the fill choice, you can look at the code that generates UVs and use that as a starting point. It bounds each shape and maps the bounds to UV [0,1]. That is only one possible mapping. Finally, you can rely on procedural UV generation in the shader using the position as a parameter (e.g. planar projection).
     
    Miniced likes this.
  3. Miniced

    Miniced

    Joined:
    Aug 18, 2015
    Posts:
    5
    Thanks for the quick reply. Unfortunately, I'm still a bit lost here. From my understanding, the UVs are generated by the
    VectorUtils.FillUVs method, as documented in the manual. However, that method's definition doesn't seem to be publicly available to be read, at least not in the imported Package in Unity. I was only able to find it's declaration in VectorUtils' meta data.

    Then again, it may be possible that there's a simpler solution to be found that would suit my use case. In my project, I have sprites that have distinct red and green sections in order to map the way I draw them in the editor. You can see below how the sprite looks initially and how it should be rendered by a custom shader.

    Primitive.png upload_2018-7-26_16-27-45.png

    Before, I used to create SVG shapes using Inkscape and export them as PNG files. The possibility of directly importing them into Unity is the main reason I am interested in this Vector Graphics package. However, unlike traditional sprites, those seems to be designed with specific material/shaders in mind and since the UV is either empty or filled for the purpose of SVG textures and gradients, applying a custom shader on sprites proves to be difficult. Ultimately, all I need is to be able to apply custom shaders on sprites with usable coordinates in my fragment shader. I don't know if you have any solution to this, but otherwise, considering this is a preview version, I would recommend if possible to implement a way to make SVG sprites acts seamlessly like a traditional sprite texture as far as shading is concerned.

    On a similar note, I noticed that while using a SVG sprite on a Sprite Renderer, it leaves the Sprite.Texture value as null. If I recall, converting into a Texture2D was on the roadmap. I'm not sure that specific attribute is related to that, but that also limit some of my use cases so far.

    Thanks for you cooperation.
     
    Last edited: Jul 27, 2018
  4. poke1024

    poke1024

    Joined:
    May 30, 2015
    Posts:
    3
  5. MAttila

    MAttila

    Joined:
    Jun 9, 2015
    Posts:
    5
    Hi,

    First of all, I think it's a really great API and many thanks for creating it!

    We definitely can use it in our current project (mobile) which would be released in September/October. We would use it for simple shapes, background items. Do you have any development schedule what we can count on... or what do you think if we use this release? We have already tested it on some devices and we did not find any bug or performance issue, but our testing opportunity is limited...

    A small thing: The FillMesh(... flipYAxis ) parameter is not working.
     
    Last edited: Jul 29, 2018
  6. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    At this time, the imported SVG sprite will not have UVs if the sprite doesn't have a texture. This is regardless of whether you call FillUVs or not (we may need to revise that). If you use a gradient fill for your shapes, a texture will be generated and UVs will be assigned to the vertices.

    Otherwise, you can assign UVs to the sprite manually by using the Sprite.SetVertexAttribute method:
    https://docs.unity3d.com/ScriptRefe...eDataAccessExtensions.SetVertexAttribute.html
     
  7. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    If the VectorGraphics package version that you are using works for you, feel free to use it. Just keep in mind that this is still an experimental package, so the functionalities and public APIs may change in future versions. That said, previous versions should always be available, so you should be able to depend on any published version of the package at any time.
     
  8. r-pedra

    r-pedra

    Joined:
    Dec 4, 2015
    Posts:
    104
    Hi,
    Would it be possible to let us choose if we want a 32 bit mesh index buffer?
    Is there a way to find out if the current GPU understand 32 bit mesh index buffer? I couldn't find it in doc (our target is full mobile)
     
  9. andyz

    andyz

    Joined:
    Jan 5, 2010
    Posts:
    1,150
    This is good but note if you try and use the sprites in the UI it all goes a bit wrong - can you not do that?

    Regarding use of LibTessDotNet, it is good and robust but does it not create a load of garbage and force you to convert all vectors to its format?
    Would be great to have a Unity optimised LibTessDotNet ;)
     
  10. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    This isn't supported at this time, mostly because the native Sprite system doesn't support them. We could go with 32bit index buffers when generating meshes though, but we have some work to do for that as well :)

    I don't think there's an API that will tell you if the GPU supports them. That said, almost every device support 32bit index buffers, apart from low-end Android devices with the Mali-400 GPU. This is mentioned in the docs here:
    https://docs.unity3d.com/2017.3/Documentation/ScriptReference/Rendering.IndexFormat.html

    Hope this helps!
     
  11. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    The Canvas UI, unfortunately, doesn't understand the "textureless sprites" generated by the SVG importer. We're in discussion with the UI team, but we cannot yet tell if or when this will be fixed.

    That's correct, we have to do quite a bit of data copy back and forth when using LibTessDotNet, which is unfortunate. For that reason, we try to minimize its use as much as possible:
    - Strokes are tessellated with our own custom stroke tessellator
    - Shapes that are guaranteed convex (rectangles, circles, etc.) are tessellated in a simple triangle fan
    - Other shapes go through LibTessDotNet

    That would be nice :)
     
    andyz likes this.
  12. andyz

    andyz

    Joined:
    Jan 5, 2010
    Posts:
    1,150
    I see, I actually need to be able to stretch the shapes without distorting the stroke, which means redrawing so I may need to roll my own system for that. I also want to keep any lines/strokes the same global size whatever the shape's scale.

    Perhaps this is a bit specialised or maybe something others might want in time - a common case is where in a cartoon you often have outlines which appear at a consistent size no matter how big the object on screen.
     
  13. thaiscorpion

    thaiscorpion

    Joined:
    Mar 14, 2012
    Posts:
    18
    Great work, just what I was looking for!
    Quick question, with the Vector API is it possible to acces and edit the colors (Linear gradients and fills) in the svgs? I really need to be able to re colour them in real time for my current project.
     
    bhison likes this.
  14. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    With the current system, you will have to re-tessellate every time the scale changes to keep a constant width border. I would think that a custom shader could do that more gracefully, maybe a vertex shader that will "unscale" the vertices, or a fragment shader that will rasterize your outline at a constant width.

    Let us know if you come up with something! This is a feature that was quite popular in the Flash days, so we may have to tackle this as well (you mentioned outlines for cartoons, which is a very good example).
     
  15. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    Yes, it's possible to do that.

    However, since the gradients are stored in a texture, you will have to regenerate the texture if any color changes in a gradient. These textures are usually quite compact, so it may be "fast enough" depending on your use case. Note that the texture generation is done automatically by the VectorUtils.BuildSprite method, but if you want to build a mesh, you will have to call VectorUtils.GenerateAtlas explicitely.

    Here's a snippet:
    Code (CSharp):
    1. var sceneInfo = SVGParser.ImportSVG(new StreamReader(svgFilePath));
    2.  
    3. // Get your hand on the GradientFill from sceneInfo.Scene, you may have to crawl the node tree
    4. GradientFill fill = ...;
    5.  
    6. // Modify the colors
    7. fill.Stops = new GradientStop[] {
    8.     new GradientStop() { Color = Color.red, StopPercentage = 0.0f },
    9.     new GradientStop() { Color = Color.blue, StopPercentage = 1.0f }
    10. };
    11.  
    12. // Tessellate the scene
    13. var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions);
    14.  
    15. // Generate the sprite, this will automatically generate the texture atlas
    16. var sprite = VectorUtils.BuildSprite(geoms, 10.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
    17. GetComponent<SpriteRenderer>().sprite = sprite;
     
    bhison and thaiscorpion like this.
  16. Lorpo

    Lorpo

    Joined:
    Jun 27, 2016
    Posts:
    2
    Hi,

    I wanted to try and start a Unity (2018.2.1f1) project with the SVG Importer () and I recieved some weird results. The editor view gives exactly the SVG style I want (smooth even when zooming in hard) but whenever I go to the game view (even if I compile) on any resolution it makes any SVG (even the ones you guys have on your github tiger.svg) very very pixelated. Does this have to do with some setting? It's a clean unity project with only the importer installed and the SVG's imported.

    Thanks! See the screenshot for more detail :)
    EDIT: I zoomed the game view to make it more obvious, unzoomed it's less obvious but the pixels still are there, not like the editor view
     
    Last edited: Aug 2, 2018
  17. thaiscorpion

    thaiscorpion

    Joined:
    Mar 14, 2012
    Posts:
    18
    Great thanks @mcoted3d! Will give it a try now :D
     
    mcoted3d likes this.
  18. thaiscorpion

    thaiscorpion

    Joined:
    Mar 14, 2012
    Posts:
    18
    Is the resolution of your game screen maybe very low?
     
  19. Lorpo

    Lorpo

    Joined:
    Jun 27, 2016
    Posts:
    2
    Tried it on different formats (up to 4K) and it never really worked out the way I expect it to do (like the editor view)
     
  20. Kamyker

    Kamyker

    Joined:
    May 14, 2013
    Posts:
    85
    Zooming game view makes everything pixelated as it shrinks resolution. Move camera closer to object instead.
     
    wbahnassi_unity likes this.
  21. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    My guess is that the source SVG file has coordinates that are quite small. If that's the case, adjusting the "Pixels Per Unit" to something lower may help.
     
  22. thaiscorpion

    thaiscorpion

    Joined:
    Mar 14, 2012
    Posts:
    18
    I have tried this to edit the colours of my vector gradient but I cant seem to access the fill. I can find the drawable in the sceneInfo.Scene like so:
    Code (CSharp):
    1. sceneInfo.Scene.Root.Children[0].Children[0].Drawables[0]
    but I don't know how to access the fill to edit it. Did I missunderstand how to do it?

    PS:
    If I try and get the type of the drawable:
    Code (CSharp):
    1. sceneInfo.Scene.Root.Children[0].Children[0].Drawables[0].GetType()
    I get:
    Code (CSharp):
    1. Unity.VectorGraphics.Rectangle
    but if I try to access the Fill of the Rectangle it gives me this error:

    Code (CSharp):
    1. Type `Unity.VectorGraphics.IDrawable' does not contain a definition for `Fill' and no extension method `Fill' of type `Unity.VectorGraphics.IDrawable' could be found
     
    Last edited: Aug 3, 2018
    bhison likes this.
  23. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    You will have to cast your drawable to get the information you want. In your case, you can cast your drawable as a Rectangle, which derives from the Filled class which has a Fill property. Alternatively, you could try to cast your drawable as a Filled directly:
    Code (CSharp):
    1. var filled = drawable as Filled;
    2. if (filled != null)
    3. {
    4.     var gradientFill = filled.Fill as GradientFill;
    5.     // ...
    6. }
    Hope this helps!
     
    bhison and thaiscorpion like this.
  24. thaiscorpion

    thaiscorpion

    Joined:
    Mar 14, 2012
    Posts:
    18
    Amazing thanks got it working with SolidFill going to give the GradientFill a try now! :D
     
    Last edited: Aug 3, 2018
  25. Fido789

    Fido789

    Joined:
    Feb 26, 2013
    Posts:
    331
    It looks like setting pivot to SVG Origin sometimes works incorrectly. For attached file (rename it to Turbine.svg) I need to set pivot to the center of the turbine, but no luck.
     

    Attached Files:

  26. thaiscorpion

    thaiscorpion

    Joined:
    Mar 14, 2012
    Posts:
    18
    So I like I mentioned before was able to edit the color of a SolidFill that worked great, but I´m still having problems with the gradients.

    This is how I was changing the SolidFill of a simple Rectangle:

    Code (CSharp):
    1.         var tessOptions = new VectorUtils.TessellationOptions();
    2.         tessOptions.StepDistance = 10f;
    3.         tessOptions.MaxCordDeviation = 1f;
    4.         tessOptions.MaxTanAngleDeviation = 5f;
    5.         tessOptions.SamplingStepSize = 100f;
    6.  
    7.         var sceneInfo = SVGParser.ImportSVG(new StreamReader(Application.dataPath + "/" + svgFileName));
    8.      
    9.         IDrawable drawable = sceneInfo.Scene.Root.Children[0].Drawables[0];
    10.      
    11.         var filled = drawable as Rectangle;
    12.         var fill = filled.Fill as SolidFill;
    13.  
    14.         fill.Color = Color.blue;
    15.      
    16.         var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions);
    17.         var sprite = VectorUtils.BuildSprite(geoms, 100.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
    18.         GetComponent<SpriteRenderer>().sprite = sprite;
    now when I try to do the same for a simple rectangle that has a 2 stop gradient, it just makes the sprite gray:

    Code (CSharp):
    1.         var tessOptions = new VectorUtils.TessellationOptions();
    2.         tessOptions.StepDistance = 10f;
    3.         tessOptions.MaxCordDeviation = 1f;
    4.         tessOptions.MaxTanAngleDeviation = 5f;
    5.         tessOptions.SamplingStepSize = 100f;
    6.  
    7.         var sceneInfo = SVGParser.ImportSVG(new StreamReader(Application.dataPath + "/" + svgFileName));
    8.      
    9.         IDrawable drawable = sceneInfo.Scene.Root.Children[0].Drawables[0];
    10.  
    11.         var filled = drawable as Rectangle;
    12.         var fill = filled.Fill as GradientFill;
    13.  
    14.         fill.Stops[0] = new GradientStop() { Color = Color.red, StopPercentage = 0.0f };
    15.         fill.Stops[1] = new GradientStop() { Color = Color.blue, StopPercentage = 0.0f };
    16.  
    17.         var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions);
    18.         var sprite = VectorUtils.BuildSprite(geoms, 100.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
    19.         GetComponent<SpriteRenderer>().sprite = sprite;
    Even if I dont change the fill and do nothing to it, it still gets turned gray like so (Solid example on left and the gradient on right):
     
  27. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    That's because you found a bug! :)

    When generating the texture to hold the gradients, we forgot to call Apply() on it, so it was never updated. We will fix that, but in the meantime, you can call Apply() yourself as a temporary workaround:

    Code (CSharp):
    1. var sprite = VectorUtils.BuildSprite(geoms, 100.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
    2. sprite.texture.Apply();
    A few more points to be careful about:
    - Make sure your SpriteRenderer uses a material with the "Unlit/VectorGradient" shader
    - Make sure your gradient stops don't have the same StopPercentage value (as in your example) :)
     
    bhison likes this.
  28. thaiscorpion

    thaiscorpion

    Joined:
    Mar 14, 2012
    Posts:
    18
    Ah I see, thank you so much I thought I was going crazy. Will give that a go. Also thanks for the tips.
    PS: Tried it, works perfect. It´s faster than I expected tried with 10 gradients constantly changing color every frame on mobile and it stayed at constant 60 fps thats more than enough for what I need :D
     
    Last edited: Aug 6, 2018
  29. bhison

    bhison

    Joined:
    Feb 9, 2015
    Posts:
    6
    Hello! Thanks thaiscorpion and mcoted3d for explaining how to change fill properties - just in time for my needs!

    One other question I have - the automatic generation of paths for a PolygonCollider2D when it is added to a sprite doesn't seem to happen with SVG in this current state. I am currently working around this by exporting all of my files as both SVG and PNG, using the PNG to generate the PolygonCollider2D path(s) and then swapping in the SVG. Whilst this works, I'd be interested to know if this will be fixed in future. Thanks!
     
  30. thaiscorpion

    thaiscorpion

    Joined:
    Mar 14, 2012
    Posts:
    18
    @bhison If you edit the physics shape in the sprite editor it should work, (works for me) you can click on generate button to automatically generate the physics shape. Then when adding the PolygonCollider2D the path(s) are added correctly.
     
    bhison likes this.
  31. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    As @thaiscorpion mentioned, you can open the Sprite Editor Window for your SVG asset and generate the physics outline there. If you are using Unity 2018.1, there's a bug in which the sprite will only appear in the editor window if you select the "sprite sub asset" of your main SVG file. This is fixed in 2018.2.

    With that said, we do have plans to add an option to auto-generate an outline for you when importing an SVG file.
     
    bhison likes this.
  32. bhison

    bhison

    Joined:
    Feb 9, 2015
    Posts:
    6
    Unfortunately I am doing this at scale and in a perfect world on the fly at runtime, but its good to know you can automatically generate the outline in the sprite editor, I would have never figured that out.

    And @mcoted3d - great to hear this will be implemented eventually, it makes me less worried about my scrappy interim workaround.
     
  33. ecurtz

    ecurtz

    Joined:
    May 13, 2009
    Posts:
    612
    Just want to go back to this so it doesn't get lost. I don't see why generating a texture should be explicitly tied to sprite usage, since sprites have special requirements beyond those of a regular texture (e.g. only works while the scene is active.)
     
  34. thaiscorpion

    thaiscorpion

    Joined:
    Mar 14, 2012
    Posts:
    18
    Quick question, now that I can change the color to my svg (solid and gradients) I tried to create my first game level, but since I was changing the color on start it was impossible to design the level properly. I tried changing the color in editor mode so I could see the colors whilst designing, but I get this error:
    Code (CSharp):
    1. Not allowed to override geometry on sprite ''
    Is there a way to do this in the editor?
     
  35. BloodMarked

    BloodMarked

    Joined:
    Dec 11, 2013
    Posts:
    20
    i noticed when importing multiple svgs they are beeing cropped and i have to line them up by hand again.
    selecting "svg origin" as Pivot uses the Bottom left of the svg as origin. it would be nice to have the original svg Center as Pivot Option.

    also using outlines on clipping masks make the object appear black in Unity (reported as bug).
     
  36. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    Overriding the sprite geometry can only be done at runtime, or during the sprite import process. In your case you could try to override it in an AssetPostprocessor (by implementing OnPostProcessSprites):

    https://docs.unity3d.com/ScriptReference/AssetPostprocessor.OnPostprocessSprites.html
     
  37. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    I'm not sure I understand what would be the difference between the "original svg center" and just using "center" as a pivot? The "SVG Origin" pivot will only try to keep the same origin as what's in the SVG document, so if your sprites are all aligned on the (0,0) of the document, they should be aligned in the Editor as well.

    Thank you!
     
  38. samth

    samth

    Joined:
    Aug 9, 2015
    Posts:
    3
    Setting SVG origin doesn't seem to work correctly. It's like the y-axis is flipped. These pieces have the same origin and should line up to look like the right, but the bottom piece is on the top and the top piece is on the bottom and so on. The x positions are right though. svgoriginpieces.PNG
     
  39. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    Thanks, we'll have a look.

    EDIT: @samth you were right, the SVG Origin wasn't computed properly when the Y-axis is flipped. This will be fixed in the next release.
     
    Last edited: Aug 14, 2018
  40. BloodMarked

    BloodMarked

    Joined:
    Dec 11, 2013
    Posts:
    20
    i am exporting multiple svgs from Illustrator, all within the same artboard.
    but beause Unity seems to crop the svgs (or ignores the arbord / origin) on import, the Center Position changes.

    example sprite in Illustrator:
    unitysvg.JPG
    in Unity:
    unitysvg3.JPG

    even when using "svg origin" they do not line up inside Unity.
    but when reimporting them to Illustrator, the positions are still correct.

    edit: added quick example svg files
    Illustrator
    testsvg.JPG
    Unity
    testsvg2.JPG
     

    Attached Files:

    Last edited: Aug 14, 2018
  41. ReaktorDave

    ReaktorDave

    Joined:
    May 8, 2014
    Posts:
    105
    The imported sprites are rather small in the game view with a new scene. I tried to reduce the PPU (something like 50 and 10) as well as increase the zoom (something like 10) but after clicking "Apply", the assets say "0 Vertices, 0B".

    Also, I didn't see a way to generate anti-aliased sprites from the svg files. Is that possible?

    It would be very helpful if you could define multiple import settings, similar to setting up a sprite atlass with multiple variants for different textue quality bundles/settings.
     
  42. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    The "Zoom Factor" property is used to tell how close you expect the user to see this asset. This is a tessellation quality setting, so a higher value will generate more vertices. I suspect that with your settings, the tessellation generated more than the 32k vertices limit and you got the "0 Vertices" imported. If you want the adjust the size of the imported sprite, the "Pixels Per Unit" is the way to go! (and leave the "Zoom Factor" to 1)

    This version of the SVG importer relies on MSAA to do antialiasing. You can turn it on in Edit > Project Settings > Quality and look for the Anti Aliasing option. We may provide other antialiasing options in the future.

    Yes, we definitely want to provide a way to have per-platform import settings, but it's unfortunately not feasible from a package at this time. We will try to expose what's necessary for a future Unity version.
     
  43. ReaktorDave

    ReaktorDave

    Joined:
    May 8, 2014
    Posts:
    105
    Changing the PPU only does still break the asset. With the standard settings (zoom=1, PPU=100) the file has roughly 21.000 vertices/512kb. When I change the PPU to 10 and leave the zoom at 1, the file becomes "0 Vertices and empty. So the PPU seems to have an effect here, too. What could that be?

    Alright, I didn't know that. I was reading "Sprite" and also the animation created a sprite renderer, so I thought it creates a sprite from the SVG. OP mentions something like "triangulated sprite", is there more information about what that is? Are existing sprite shaders compatible with this?


    Would be really cool to override that setting per platform.

    I noticed another strange behaviour: when changing and reapplying the pivot, the imported svgs became way smaller each time (smaller in the scene/game view). This happened three times. After that, they were extremely small and kept their size.

    How well does this play with Anima2D?

    It would be an improvement if I could directly select the imported sprites without having to enter "sprite" in the search bar or without having to expand every svg asset I want to drop at the animation window.

    Also, having a preview in the animation window for each frame (like when you place a "real" sprite onto the animation window) would be great.
     
  44. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    Yes you are correct, we increase the quality setting when PPU is lower, so you may reach the vertices limit by playing with this setting. You have two ways of working around this: set a "zoom factor" that's smaller than 1, or play with the advanced settings to find something that works for you. You can find documentation on the advanced settings here:
    https://github.com/Unity-Technologi...s/blob/master/Documentation/vectorgraphics.md

    The SVG importer does indeed create a sprite. But it is not a "regular" textured sprite, but a tessellated sprite (similar to a mesh). This is why these SVG sprites work well with MSAA.

    I'm not sure, but I would expect Anima2D to work best with regular textured sprites. It's worth a try though. Also, we may provide an "import to textured sprite" option later. This would make SVG imported sprites compatible with other systems (but you'll lose the "infinite" resolution compared to tessellated SVG sprites).

    Noted!

    Thanks for your feedback!
     
  45. ReaktorDave

    ReaktorDave

    Joined:
    May 8, 2014
    Posts:
    105
    Thank you, that explains it very well. However, reducing the PPU does not change the size in the scene/game view. Could this be due to the bug I explained in my previous post? I'll just quote it here again:
    Using MSAA if it is like a mesh makes perfectly sense, then. While I can grasp what it could be, I'm still a bit confused about what "tesselated sprite" means. Are there any literature or online links about this?

    Thank you so much for doing this. Makes my team very happy! Last month, we released our cartoon game with all the actors being vector graphics/SVG files (https://catmic.itch.io/return-of-the-tentacle).
     
    mcoted3d likes this.
  46. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    I'm a little bit perplexed by this one. If you could send me an example SVG file that has the issue, that would help.

    Sprites are usually just textured quads. However, Unity Sprites have the ability to have any geometry. This is used to more closely follow the shape of the sprites to avoid drawing many transparent pixels on the screen. You can even override the sprite geometry with the Sprite.OverrideGeometry() method:
    https://docs.unity3d.com/ScriptReference/Sprite.OverrideGeometry.html

    For SVG sprites, we used this feature to send the SVG shape geometry to the sprite object. Since we assign colors to the vertices, these sprites don't require any texture. We call those "textureless sprites" or "tessellated sprites". If you set your Scene View in "Shaded Wireframe" mode, you will see the generated geometry for these sprites, they are basically meshes.

    I hope this clarifies things up.
     
  47. Dangy

    Dangy

    Joined:
    Aug 26, 2013
    Posts:
    5
    Hi is CSS support still intended?

    if so, how does that work? is that internal CSS of the SVG file or would we be able at runtime apply a CSS to a SVG file?

    I'm asking as I intend to use the new SVG system to display a map with icons that can be toggled on and off. Each icon would be a symbol that the artist can manually place where the locations on the map. Would I be able to apply a CSS visibility to a particular def symbol to turn them on and off at runtime?
     
  48. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    The SVG importer has (basic) CSS support to read the style from. It only understands embedded and inlined CSS at this time (no support for external CSS file).

    The CSS style information is baked in the resulting Vector Scene after parsing the SVG file, so you won't be able to modify the CSS style at runtime.

    That said, you can modify the resulting Vector Scene however you want! You could parse the SVG file once, keep the resulting Vector Scene aside and add/remove the nodes representing the icons from the scene before tessellation. There's no easy way yet to find specific nodes from the hierarchy (we're working on this), but if you group them under the same <g> tag it should be fairly straightforward.

    Here's some boilerplate code you can inspire yourself from. You can also have a look at the SVGRuntimeLoad.cs example:
    https://github.com/Unity-Technologi...b/master/Assets/RuntimeDemo/SVGRuntimeLoad.cs

    Code (CSharp):
    1. var svg = ...; // The full SVG stored in this string
    2. var sceneInfo = SVGParser.ImportSVG(new StringReader(svg));
    3.  
    4. // Find the node that contains the icons
    5. var iconsNode = sceneInfo.Scene.Root.Children[0];
    6.  
    7. // Keep the 2nd icon aside, them remove it
    8. var icon = iconsNode.Children[1];
    9. iconsNode.Children.RemoveAt(1);
    10.  
    11. // Tessellate the scene and make sprite
    12. var geometry = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions, sceneInfo.NodeOpacity);
    13. var sprite = VectorUtils.BuildSprite(geometry, 100.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
    14. GetComponent<SpriteRenderer>().sprite = sprite;
    This snippet assumes the icons are stored under the root node, but you'll have to find out where there are in the Vector Scene object. The Vector Scene hierarchy will follow the same hierarchy as the SVG file.

    Hope this helps!
     
  49. Th0re

    Th0re

    Joined:
    Sep 4, 2015
    Posts:
    32
    Hello! :)

    When I import the SVGs (from Affinity Designer), all using the same settings, the sizes in Unity vary greatly and in a way I don't quite understand. Here I made a few bars. Duplicated them exactly, and just grouped them differently each time (i.e. they are exactly the same). But once in Unity, they have different sizes. I've tried to switch around export settings which looked like they may have an effect, but to no avail.

    I want to export a set of SVG sprites, e.g. tiles, character parts etc. and want that they all have the same scale as setup in the graphics program. I.e. when the character is 2x the size of a box, I'd like that to also be the case once it's in Unity. Any ideas why this rescaling happens, or how to make the scale stay consistent?
     

    Attached Files:

    Last edited: Aug 18, 2018
  50. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    348
    This seems to be caused by the viewbox in the SVG files. The viewbox will create a transform that will rescale the elements to fit inside the viewport. By removing the viewbox attribute from the <svg> tag, you should get consistent results. We will look up more closely as there may be a bug in the way we handle the viewbox attribute. This is the kind of attribute that's hard to handle properly in Unity, as we don't have a real "window viewport" to use as a reference.

    There may be an option to prevent this in Affinity Designer, but I never used this tool so I won't be able to help in that regard. I know that Adobe Illustrator has a "responsive" checkbox that will make it export a viewBox that may cause issues in Unity.
     
    Th0re likes this.