Search Unity

Official Vector Graphics Preview Package

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

  1. jeffsarge

    jeffsarge

    Joined:
    Jan 3, 2014
    Posts:
    32
    I'm using SVG in an HD pipeline. Is there a way to get the SVG's to respect fog?
    Thanks,
    Jeff
     
  2. jeffsarge

    jeffsarge

    Joined:
    Jan 3, 2014
    Posts:
    32
    ...also is dynamic lighting possible?
     
  3. foolmoron

    foolmoron

    Joined:
    Jun 22, 2013
    Posts:
    41
    Is there a package that works with 2018.3.0b2?
     
  4. foolmoron

    foolmoron

    Joined:
    Jun 22, 2013
    Posts:
    41
    Does anyone else have an issue in 2018.2.3f1 where when you save the scene, any prefab instances that contain vector sprites are reset to the saved prefab properties?

    This doesn't happen with the prefab that was originally imported from the SVG, only with prefabs that were created and contain vector sprite objects (at the root or as children, doesn't matter). Actually, even if you create a fresh prefab and add a SpriteRenderer with the Unlit_Vector material and a sprite reference manually, it still happens. If you delete the sprite reference from the SpriteRenderer, then the prefab instance doesn't reset on save.

    I'm also using the 2D Animation and 2D SpriteShape previews, not sure if those have anything do with it.
     
  5. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    For those following this thread, we just released version 1.0.0-preview.19 of the Vector Graphics package! You can update your version using the Package Manager window.

    NEW FEATURES
    - Import to texture (either a raw Texture2D asset or a textured sprite)
    - Option to auto-generate a physics shape
    - Option to preserve the SVG viewport
    - The SceneInfo returned from SVGParser.ImportSVG() keeps track of the XML IDs.
    - New SVGImage Canvas UI component (see here for details: https://forum.unity.com/threads/unity-ui-svg-support-script.551254/)

    Many fixes were introduced as well, here's a brief summary:
    - Enabled GPU instancing, _RendererColor works out-of-the-box
    - Made the auto-computed tessellation options less aggressive
    - Moved external libraries to their own namespaces
    - Moved the sprite stats over the preview for better consistency
    - Fixed relative positioning with viewBox
    - Multiple object editing improvements
    - Fixed elliptical-arc-to error with large sweep angles
    - Fixed polygon winding after transform
    - Fixed <use> always overriding fill/stroke even when not set
    - Fixed "ProhibitDtd" obsolete warning on .NET 4.x backend
    - Added SVGImage for Canvas UI
    - Setting Closed=true closes the path connecting the last segment to the first instead of a straight line
    - Fixed issues with symbols and patterns usage
    - Improved SVGOrigin and pivot support
    - Added support for flipYAxis in FillMesh method
    - Fixed support for empty 'd' elements
    - Fixed issue when symbols are defined after <use>
    - Fixed invalid SVG Origin when Y-axis is fipped
    - Fixed missing Apply() after atlas generation

    IMPORTANT
    The Vector Graphics APIs has been updated in this version.
    - The IDrawable interface is now obsolete, everything is now a Shape instead. In the process, the Rectangle class has been obsoleted as well. To construct a rectangle shape easily, use the VectorUtils.MakeRectangleShape() method.
    - The BezierContour's Closed property will now honor the P1 and P2 control points of the last segment.

    If you have any questions or encounter any issues, let us know and we will try to resolve them promptly!
     
  6. Nodrap

    Nodrap

    Joined:
    Nov 4, 2011
    Posts:
    83
    Just gave it a try and it looks very promissing. What would be great is for it to allow it to import each object as a separate sprite/mesh so I can have a single .svg file that holds all my games assets - like a sprite sheet! Would be an awesome workflow speedup rather than having to split them into separate files.

    But a great feature and will be really useful when its fully integrated into the Unity workflow.

    [Edited after seeing update]
     
    lvkae and mcoted3d like this.
  7. unity_JY1TYMUNVZm1fQ

    unity_JY1TYMUNVZm1fQ

    Joined:
    Sep 25, 2018
    Posts:
    1
    (Figuring this might be relevant to the subject, if not I'll go to the suggestion topic)
    Do you plan to make the OpenType-SVG format compatible?
    This font format, compatible with Colorfonts, is created with Fontself, a Photoshop (and Illustrator) extension. It allows creators to create a font from ilustrations (making a textured and colored font for instance).
    I have felt this may be a tool designers -like myself- will be glad to work with in games!
    But I do miss this option currently.
     
  8. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    We do have plans to add support for SVG text and maybe even SVG fonts (https://www.w3.org/TR/SVG11/text.html). However, OpenType-SVG seems technically quite different, so I'm not sure if we will support this one eventually. I will add it to our feature request list!
     
  9. ecurtz

    ecurtz

    Joined:
    May 13, 2009
    Posts:
    640
    I still can't use a SVG image as an Editor GUI texture even with the new import option, as it won't allow me to set the texture type. I don't know how hard it would be for it to have the "normal" texture import options as if it was a jpeg or png at that point, but it would be nice.
     
  10. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    I'm not sure I understand the issue, can you elaborate?

    You basically have two ways to use the SVGImporter with Canvas UI:
    1) Use the new "SVG Image" component and plug an SVG sprite in it. See here for more details: https://forum.unity.com/threads/unity-ui-svg-support-script.551254/
    2) In the SVG file inspector, set the "Generate Asset Type" to "Textured Sprite", and set the mesh type to "Full Rect". These sprites can be used with the normal "Image" UI component (no need for "SVG Image" in this case, these are regular textured sprites).

    If any of these options don't work, let me know and we'll investigate.
     
  11. ecurtz

    ecurtz

    Joined:
    May 13, 2009
    Posts:
    640
    I'd like to make GUIContent out of SVG data so I can use it in the UI of my little editor tool. I freely admit that it's a very weird use case, but it requires a way to get from SVG data -> Texture data without going through a sprite, since they only work at runtime (for some reason I don't understand). Maybe there's a way to get the Texture data with this new import option and build the GUI content from that, which I'll try next.

    EDIT: Looks like it works to use EditorGUIUtility.Load() and new GUIContent() so that's "good enough" for my weird case. I still think making a texture procedurally without requiring a sprite is useful.
     
    Last edited: Sep 25, 2018
  12. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    You can try using "Texture2D" as the "Generated Asset Type", this will save a texture without any sprite. To load the texture from editor code, you can try to use AssetDatabase.LoadAssetAtPath():

    Code (CSharp):
    1. var tex = AssetDatabase.LoadAssetAtPath<Texture2D>("Assets/YourFile.svg");
    Hope this helps!
     
  13. foolmoron

    foolmoron

    Joined:
    Jun 22, 2013
    Posts:
    41
    @mcoted3d do you have any ideas about this save scene issue in #254?
     
  14. Deleted User

    Deleted User

    Guest

    mcoted3d likes this.
  15. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    I wasn't able to reproduce this issue. I don't think there's nothing special about our assets that would make the prefab system to reset their values.

    If you played with the nested prefab system from the latest beta, maybe this somehow broke the prefabs in your project. It's hard to tell what is wrong.

    I would say your best bet would be to file a bug report using the Help > Report a Bug menu.
     
  16. MythrilMan51

    MythrilMan51

    Joined:
    Apr 24, 2017
    Posts:
    146
    Now if I could run that through Unity's Shader Graph...
     
  17. foolmoron

    foolmoron

    Joined:
    Jun 22, 2013
    Posts:
    41
    Yeah something about the project was messed up. It was upgraded all the way up from a 4.3 project so I guess that's not surprising... I created a fresh project and imported the assets and it's fine now.
     
    mcoted3d likes this.
  18. michaeleconomy

    michaeleconomy

    Joined:
    Aug 28, 2018
    Posts:
    58
    Hey Martin,

    Thanks for all of the updates! I've found another issue:

    When i create a tile (to go into a tile map) with a vector based sprite, Unity has serious slowdown.

    Let me know if you need more details.

    Best,
    -Michael
     
  19. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    Can you share the SVG asset, or a sample project that reproduces the issue (a private message is fine if you can't share publicly)? I'd be very interested to have more details.

    Thank you!
     
  20. pyol1985

    pyol1985

    Joined:
    Nov 16, 2017
    Posts:
    2
    Hi, I was testing SVG import feature in my pretty simple project on my desktop and everything was normal. But when I downloaded that project on my Laptop I met two warnings with yellow triangle in console:

    "Library\PackageCache\com.unity.vectorgraphics@1.0.0-preview.20\Runtime\SVGParser.cs(402,28): warning CS0618: 'WWW' is obsolete: 'Use UnityWebRequest, a fully featured replacement which is more efficient and has additional features'"
    and the second is almost the same, but instead of "402,28" that has "402,42";
    After these warnings appear, my Unity seriously slows down: periodical 20-30 second total freezes within Unity, only can move mouse(meanwhile other applications in Windows work normally).
    I tried to create new project. And only I download Vector Package in my empty project ,via package manager, those two appear again. What should I do about it?
     
  21. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    You can ignore these warnings for now until we update the package to fix them.

    As for the partial editor freeze that occurs afterward, it's hard to tell what is going on, but it's likely unrelated to the vector graphics package. If you have a Unity project that consistently reproduces the issue, I could have a look.
     
  22. pyol1985

    pyol1985

    Joined:
    Nov 16, 2017
    Posts:
    2
    . Yes you are right, I was mistaken. Freezes are not related to vector package, I noticed that later.
     
  23. michaeleconomy

    michaeleconomy

    Joined:
    Aug 28, 2018
    Posts:
    58
    Digging in a little deeper: it looks like it's just a problem with the asset preview. clicking the asset from the project window then clicking something else shows noticable lag and no asset preview is ever loaded.


    attaching my svg to see if that helps




    That behavior might be livable, but where it really drives me nuts is with a RuleTile (https://github.com/Unity-Technologies/2d-extras) - the inspector window is completely unusable for rule tiles, constantly lagging out.




    Is there an easy way to upload a sample project? i made a zip file of an empty project and it's over the file size limit for the forum.
     

    Attached Files:

    Last edited: Oct 2, 2018
  24. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    20
    When I apply color to the sprite renderer on an imported SVG it works as expected in the editor. When I build to a device (iPad) it displays as white again. Should applying color in this manner be possible?
     
  25. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    20
    I was trying to see if I could get an SVG to work with a particle system. I believe I would first have to choose to generate a textured sprite as the import setting. When I choose to generate a sprite from an SVG import, the edges don't anti alias to transparency. They seem to use a black matte. Is there a way to treat alpha as transparency for generated sprites?
     
  26. michaeleconomy

    michaeleconomy

    Joined:
    Aug 28, 2018
    Posts:
    58

    OK, i did some more testing. the problem is that my svg contains dropshadows. If i have svgs w/o drop shadows, they work fine.
     
    mcoted3d likes this.
  27. michaeleconomy

    michaeleconomy

    Joined:
    Aug 28, 2018
    Posts:
    58
    Ok i've found another issue. Preserve viewport is only working some of the time. Some of the time when it is enabled, my image disappears. I've attached two simular svgs, one that works with preserve viewport and one that doesn't.


    I'm using Gravit to produce these SVGs. But getting different behavior for two that were produced the exact same way.
     

    Attached Files:

  28. JJCUBER

    JJCUBER

    Joined:
    Jun 7, 2018
    Posts:
    2
    I am having an issue with this. I tried to edit my SVG file's import settings, to have different T B L and R settings, however when I click apply, it reverts it ALL!! All I am trying to do is make a rounded UI-looking-item that works on all things larger than 100px by 100px (I do this by having a circle that is 100x100, and setting T B L and R to 50). I can do this fine with a normal sprite, but am unable to make this work for ANY SVG file. If there is a way to fix this, or a better way of doing this, PLEASE let me know!
    1.PNG 2.PNG
     
    Last edited: Oct 7, 2018
  29. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    I would expect it to work, but the sprite tinting relies on GPU instancing to work, which older devices may not support.

    There's no workaround at this time, but we'll investigate to try to find ways to tint without GPU instancing.
     
  30. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    You are correct, the SVG sprites are rendered in a "transparent black" render texture which may cause some dark outlines to occur. This will be fixed a bit later.
     
  31. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    Borders are simply ignored at this time because it didn't make sense to have them with SVG sprites (9-slices aren't supported for tessellated sprites).

    However, we should add borders support for SVGs that are imported as "textured sprites". We'll try to fix that for the next release.
     
  32. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    20
    Thanks.
    Thanks. I'm not sure what happened. I'm no longer seeing this behavior. I did notice that I have to keep the material on Unlit_Vector in order to apply color.

    EDIT: Oops. I see now that one of my test iPads doesn't support this while others do. Is there a minimum iOS level that guarantees hardware support for this? Maybe 10?
     
    Last edited: Oct 12, 2018
  33. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    20
    What is the difference between dragging the icon for the vector item into your scene versus the sprite that is revealed with the collapse arrow for that same item. Hopefully that makes sense (I'm sure that isn't the proper UI jargon).

    When I drag the vector icon, it is treated like a prefab. When I drag the sprite, the name is appended with sprite and it isn't a prefab. One starts with the Unlit-Vector material while the other uses Sprites-Default.

    I noticed I can apply color to the Unlit-Vector, but not the sprite material. But I can manual apply the Unlit-Vector material to the sprite and then apply color.

    I just want to be sure I understand what is going on so I don't get too far down a bad path. Do both still have the same vector advantages?
     
  34. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    When importing an SVG file, we build a prefab only to set a different material than the "Sprites-Default" one.

    The Unlit_Vector material is almost the same as the Sprites-Default material, but does the proper sRGB color conversion if your project is in linear colorspace. If you don't care about sRGB (for example, if your project is in gamma colorspace), the Sprites-Default material gives the same results.

    If the SVG has gradients and/or textures, the Unlit_VectorGradient material is used. This one cannot be replaced by the Sprites-Default material since it does the evaluation of the gradients as well as the texture lookup in the generated atlas. In such case, if you drag the sprite sub-asset in your SceneView you will see wrong results.

    If you don't want to use the generated prefabs, you can, of course, use the sprite sub-asset directly and change the material on it. This would have the same effect.

    Hope this helps!
     
  35. MeteOzguz

    MeteOzguz

    Joined:
    Nov 17, 2017
    Posts:
    2
    Is it working with Sprite Mask?

    It seems it works while in Scene Editor but when I'm on Play mode, the effect disappears.
    I'm trying to make a child app, only using svg files. I don't have any big problem for now.

    And an additional question: I want to make dark when my animals are unavailable. How can I achieve it? What is the proper way? I was considering to set black the color property of Sprite Renderer but it doesn't work for svg. For now, only solution to me seems make dark versions of svg files which I want to ignore :) I hope you got better solution than mine!

    EDIT1: It turned out I got better idea :) stay tuned for EDIT2

    You can check some wip video here:
     
    Last edited: Oct 14, 2018
  36. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    20
    I'm starting to see a constant flow of this error:
    "Incomplete mesh data in Sprite. Please reimport or recreate the Sprite."

    I don't see any obvious visual anomalies. Is that something to be concerned about? I'll try to track down which specific item might be causing this in my scene.

    EDIT: I found the problem. I had imported an sequence of SVGs to create an animation. The first frame was an empty/blank SVG. I removed it from the project.

    I'm not sure that counts as a bug, but I just wanted to report it to be sure.
     
    Last edited: Oct 14, 2018
    mcoted3d likes this.
  37. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    20
    I have been using the color property on SVGs successfully. You need to set the material to Unlit_Vector (included in the package). Unfortunately, it doesn't seem to work on older iPads because it currently uses GPU instancing to achieve the results.

    I use this all the time, so I'm hoping they can find a way to increase compatibility.
     
    MeteOzguz likes this.
  38. ChaosResolution

    ChaosResolution

    Joined:
    Jan 22, 2013
    Posts:
    80
    Hi,

    Just testing out using vector drawings for backgrounds in a top-down 2D game. Having an issue with the visibility of some lines though, which seems to vary depending on camera zoom level. I'm not sure how to solve it though! Any tips?

    For reference:

    Source



    In-Game

     
  39. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    As far as I can tell, Sprite Masks will only work with textured sprites at this time, so it should work if you import the SVG as a "Textured Sprite" asset, but you'll lose the "infinite" resolution of the sprites. I'll see if we can make it work with vector sprites.

    It should work with the latest version of the package. As @Little10Robot mentioned, vector sprite tinting uses GPU instancing to work, so that may or may not be an issue with your project.

    Sweet! :)
     
    Lars-Steenhoff and MeteOzguz like this.
  40. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    The plank cracks seem very thin, so I would expect that enabling anti-aliasing would help with that. You can turn it on in Edit > Project Settings > Quality. Look for the "Anti Aliasing" option.

    Make sure that your camera has "Allow MSAA" turned on. Also, the antialiasing effect is sometimes only visible in the GameView, so it may still look wrong in the SceneView.

    Hope this helps!
     
    ZealousProgramming likes this.
  41. ChaosResolution

    ChaosResolution

    Joined:
    Jan 22, 2013
    Posts:
    80
    You're totally right - anti-aliasing sorted that out. Cheers!
     
  42. MeteOzguz

    MeteOzguz

    Joined:
    Nov 17, 2017
    Posts:
    2
    After updating package version, it worked almost completely, I also needed to fix the material for some sprites... thanks!

    The better idea I mentioned early was adding unlock animation in front of unavailable animals. Today I completed the animation and I will use both.

     
    ZealousProgramming and mcoted3d like this.
  43. vikingoAR

    vikingoAR

    Joined:
    Jul 27, 2018
    Posts:
    2
    Hi. I am new with svg in Unity.
    I ask you about a question about the size of the files. I have a png sprite of 118 x 37 px and a size of 4 kb (See it below)
    I pass it to vector with Inkscape and import it into Unity as svg sprite. The size of the sprite itself is now 147 kb.
    Is this normal or am I doing something wrong?
    Thanks in advance.

    PlayerClosed.png Inspector.jpg
     
  44. AlexeyB2016

    AlexeyB2016

    Joined:
    Dec 7, 2016
    Posts:
    8
    Hi! Do you have any news about svg animation? Any updates or plans?
     
  45. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    It's hard to tell without having access to the SVG file. The asset could be over-tessellated, which would make for a larger asset. So it would be worth trying a lower target resolution see if that helps.

    The png file you have has small dimensions, so it could be expected that a vector version of that asset will be heavier, but in exchange, you gain "infinite resolution" for that sprite. If you don't need that extra resolution, keeping the raster image may be preferable in your case.
     
    vikingoAR likes this.
  46. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    Little progress has been made regarding animations, unfortunately. We are still discussing the next features that will be added, so it's too early to share at this point.

    We will make sure to share our progress and/or to ask for feedback for possible avenues once we get there!
     
  47. vikingoAR

    vikingoAR

    Joined:
    Jul 27, 2018
    Posts:
    2
    Thank you very much, mcoted3d. I'll keep trying, then.
     
  48. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    20
    I'm getting mixed results with the preserve viewport option. It was working previously as expected. I thought this was meant to maintain the relative document size so that I could get similar registration from multiple SVGs that were prepared with the same document size. In many cases, when I check this box, my art gets clipped off. I'm generating my art with Adobe Illustrator. Does this sound like a problem with the SVGs?

    My goal is to have a dependable relative scale for all my SVGs.
     
  49. michaeleconomy

    michaeleconomy

    Joined:
    Aug 28, 2018
    Posts:
    58

    I had the same issue above. I'm using gravit designer instead of illustrator. I've found that preserve viewport works on 40% of my svgs, the rest of the time it just give me an empty sprite. My SVG is linked above.
     
  50. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    20
    I've been doing some troubleshooting on this. I noticed that SVGs generated from Animator (Flash) worked great with preserve viewport, but those generated with Illustrator files were not working. I compared the SVG code and determined that Unity requires the width and height to be defined specifically. It would be interesting to know if this fixes things for you as well. I think that Unity should take these measurements from the viewBox data if width and height are not supplied.

    This clips off in Unity (generated by Illustrator):
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 881 36" enable-background="new 0 0 881 36" xml:space="preserve">

    And this work properly (generated by Adobe Animator):
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="881px" height="36px" viewBox="0 0 881 36">

    To get my Illustrator SVG to work, I have to manually add width and height like this:
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 881 36" enable-background="new 0 0 881 36" width="881" height="36" xml:space="preserve">

    Perhaps this could be supported automatically in the future? It seems like every graphics app arranges the SVG code with slight differences.
     
    Last edited: Oct 20, 2018
    Lars-Steenhoff likes this.