Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Join us on Dec 8, 2022, between 7 am & 7 pm EST, in the DOTS Dev Blitz Day 2022 - Q&A forum, Discord, and Unity3D Subreddit to learn more about DOTS directly from the Unity Developers.
    Dismiss Notice
  3. Have a look at our Games Focus blog post series which will show what Unity is doing for all game developers – now, next year, and in the future.
    Dismiss Notice

Official Vector Graphics Preview Package

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

  1. rhys_vdw

    rhys_vdw

    Joined:
    Mar 9, 2012
    Posts:
    77
    Ahhh... I see. Sorry I disregarded the warnings because I thought they were from TMP. I accept guilt on this one, but as a usability request perhaps you could check this in the `SvgImage` inspector and draw one of those warning info boxes?

    Thanks as always for my favourite unity plugin.
     
  2. ynuteminnof

    ynuteminnof

    Joined:
    Apr 1, 2018
    Posts:
    7
    Hello, I am having trouble installing it this way. I paste the string into the "Add package from git URL dialog, click add button, the dialog disappears and nothing happens (no error is shown, no progressbar, nothing). I still cannot see the package anywhere :(.
     
  3. Carpet_Head

    Carpet_Head

    Joined:
    Nov 27, 2014
    Posts:
    242
    one issue we have was introduced in preview.15,

    In preview. 14 if you drag and drop an SVG assets into the inspector hierarchy, it would have the correct width and height

    In preview.15,16,17 the size of that default asset is always 100, 100 - which breaks all of our UI that references those "built-in" prefabs
     
  4. atomikm

    atomikm

    Joined:
    Feb 8, 2020
    Posts:
    12
    @mcote3d Hi, I'm currently downloading an SVG from a URL and importing it at runtime using SVGParser.ImportSVG(). For some reason, some SVGs work correctly and others throw errors like the one below. It seems certain attributes are missing from the SVG? Can I just ignore the attributes that are missing instead of throwing an error?

    Here's a link to the SVG I'm downloading: https://e3izy-jiaaa-aaaah-qacbq-cai.raw.ic0.app/?tokenid=yjrbs-jakor-uwiaa-aaaaa-b4aaq-maqca-aabso-a

    And the error:

    Code (CSharp):
    1. SVGFormatException: SVG Error (line 1, character 2684): Input string was not in a correct format.
    2. Unity.VectorGraphics.SVGAttribParser.ParseFill (Unity.VectorGraphics.XmlReaderIterator+Node node, Unity.VectorGraphics.SVGDictionary dict, Unity.VectorGraphics.SVGPostponedFills postponedFills, Unity.VectorGraphics.SVGStyleResolver styles, Unity.VectorGraphics.Inheritance inheritance, System.Boolean& isDefaultFill) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:2634)
    3. Unity.VectorGraphics.SVGAttribParser.ParseFill (Unity.VectorGraphics.XmlReaderIterator+Node node, Unity.VectorGraphics.SVGDictionary dict, Unity.VectorGraphics.SVGPostponedFills postponedFills, Unity.VectorGraphics.SVGStyleResolver styles, Unity.VectorGraphics.Inheritance inheritance) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:2608)
    4. Unity.VectorGraphics.SVGDocument.path () (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:647)
    5. Unity.VectorGraphics.SVGDocument.ParseChildren (Unity.VectorGraphics.XmlReaderIterator+Node node, System.String nodeName) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:319)
    6. Unity.VectorGraphics.SVGDocument.clipPath () (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:916)
    7. Unity.VectorGraphics.SVGDocument.ParseChildren (Unity.VectorGraphics.XmlReaderIterator+Node node, System.String nodeName) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:319)
    8. Unity.VectorGraphics.SVGDocument.defs () (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:374)
    9. Unity.VectorGraphics.SVGDocument.ParseChildren (Unity.VectorGraphics.XmlReaderIterator+Node node, System.String nodeName) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:319)
    10. Unity.VectorGraphics.SVGDocument.svg () (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:1195)
    11. Unity.VectorGraphics.SVGDocument.Import () (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:264)
    12. Unity.VectorGraphics.SVGParser.ImportSVG (System.IO.TextReader textReader, Unity.VectorGraphics.ViewportOptions viewportOptions, System.Single dpi, System.Single pixelsPerUnit, System.Int32 windowWidth, System.Int32 windowHeight) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:110)
    13. Unity.VectorGraphics.SVGParser.ImportSVG (System.IO.TextReader textReader, System.Single dpi, System.Single pixelsPerUnit, System.Int32 windowWidth, System.Int32 windowHeight, System.Boolean clipViewport) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:68)
    14. LoadSVGFromURL.LoadSVGToTexture (System.String url, Resolution finalResolution) (at Assets/Scripts/LoadSVGFromURL.cs:73)
    15. LoadSVGFromURL+<DownloadSVGs>d__2.MoveNext () (at Assets/Scripts/LoadSVGFromURL.cs:42)
    16. UnityEngine.SetupCoroutine.InvokeMoveNext (System.Collections.IEnumerator enumerator, System.IntPtr returnValueAddress) (at /Users/bokken/buildslave/unity/build/Runtime/Export/Scripting/Coroutines.cs:17)
     
  5. rhys_vdw

    rhys_vdw

    Joined:
    Mar 9, 2012
    Posts:
    77
    I've also had trouble importing a whole class of SVG. Basically anything that Figma outputs that has a nested "Frame" object in it causes a null reference exception during import (preventing mesh generation). This could be the same issue. Does it import okay if you drop the SVG straight into your project?
     
  6. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,729
    Hi there,

    Apologies if this is mentioned elsewhere, this is SVG and as you can see edges are terrible, they are even terrible on mobile.
    What settings should i change to make them smooth for mobile without hurting battery performance?

    Please advise

    upload_2021-10-7_1-39-59.png
     
  7. rhys_vdw

    rhys_vdw

    Joined:
    Mar 9, 2012
    Posts:
    77
    You'll need to enable some sort of anti-aliasing for your Sprites, you can do this in the project quality settings for your mobile platform. Here's an example of a game I made without anti-aliasing, and it looks similarly bad. This might affect your performance though.

    For overlay canvas I've found that the simplest way to fix the problem is to not use SVGImage and instead use raster images where possible. You can also use the camera anti-alias by setting the canvas to "screen space - camera" but this adds double anti-aliasing to TextMeshProGUI objects (and I believe is less performant than overlay, although not certain on that).
     
    mcoted3d and jGate99 like this.
  8. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,729
    Really appreciate detailed reply, yes im using canvas overlay and i dont want to hurt performance so i guess i use raster images based on your advice.
     
  9. rhys_vdw

    rhys_vdw

    Joined:
    Mar 9, 2012
    Posts:
    77
    Yeah, another reason why this is a good idea is that you can't 9-slice vector sprites (yet?).

    I am curious whether overlay anti-aliasing or 9-slicing is planned, @mcoted3d
     
    jGate99 likes this.
  10. rhys_vdw

    rhys_vdw

    Joined:
    Mar 9, 2012
    Posts:
    77
    I've been trying to figure this out by myself by reading shaders and doing some research, but haven't quite got my head around it. Why is it that the `_RendererColor` is not used when instancing is disabled? One of the projects I'm working on has many many sprites rendering at once. Disabling instancing decreases batches from 150 to 20, which seems desirable, but it removes the color property.

    I'm looking to get a good understanding of how it all works so I can work out how best to optimize rendering.

    Thanks.
     
    Last edited: Oct 11, 2021
  11. simeer

    simeer

    Joined:
    Oct 4, 2017
    Posts:
    1
    An interesting issue we've run into is that the rasterized versions of SVGs turn out completely butchered when built by the Unity Cloud Build.

    E.g. a rounded rectangle will turn out like this:
    upload_2021-10-11_18-11-0.png
    Code (CSharp):
    1.  
    2. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0.0017999999999977739 -0.0020000000000004754 23.998199999999997 24.00019999999999">
    3.   <path d="m 1.999 0 l 20.002 0 q 0.098 0 0.196 0.0096 q 0.098 0.0096 0.194 0.0288 q 0.096 0.0192 0.19 0.0477 q 0.094 0.0285 0.185 0.0661 q 0.091 0.0376 0.177 0.0839 q 0.087 0.0463 0.169 0.1009 q 0.081 0.0546 0.157 0.1169 q 0.076 0.0623 0.145 0.1317 q 0.07 0.0694 0.132 0.1454 q 0.063 0.0759 0.117 0.1576 q 0.055 0.0817 0.101 0.1683 q 0.046 0.0866 0.084 0.1773 q 0.037 0.0907 0.066 0.1847 q 0.028 0.094 0.048 0.1903 q 0.019 0.0963 0.028 0.1941 q 0.01 0.0977 0.01 0.1959 l 0 20 q 0 0.0982 -0.01 0.1959 q -0.009 0.0978 -0.028 0.1941 q -0.02 0.0963 -0.048 0.1903 q -0.029 0.0939 -0.066 0.1847 q -0.038 0.0907 -0.084 0.1773 q -0.046 0.0866 -0.101 0.1683 q -0.054 0.0816 -0.117 0.1576 q -0.062 0.0759 -0.132 0.1453 q -0.069 0.0694 -0.145 0.1317 q -0.076 0.0623 -0.157 0.1169 q -0.082 0.0546 -0.169 0.1009 q -0.086 0.0462 -0.177 0.0838 q -0.091 0.0376 -0.185 0.0661 q -0.094 0.0285 -0.19 0.0477 q -0.096 0.0191 -0.194 0.0288 q -0.098 0.0096 -0.196 0.0096 l -20 0 q -0.0982 0 -0.1959 -0.0096 q -0.0977 -0.0097 -0.1941 -0.0288 q -0.0963 -0.0192 -0.1903 -0.0477 q -0.094 -0.0285 -0.1847 -0.0661 q -0.0907 -0.0376 -0.1773 -0.0838 q -0.0866 -0.0463 -0.1683 -0.1009 q -0.0817 -0.0546 -0.1576 -0.1169 q -0.0759 -0.0623 -0.1454 -0.1317 q -0.0694 -0.0694 -0.1317 -0.1454 q -0.0623 -0.0759 -0.1169 -0.1575 q -0.0546 -0.0817 -0.1009 -0.1683 q -0.0463 -0.0866 -0.0839 -0.1773 q -0.0376 -0.0908 -0.0661 -0.1847 q -0.0285 -0.094 -0.0477 -0.1903 q -0.0192 -0.0963 -0.0288 -0.1941 q -0.0096 -0.0977 -0.0096 -0.1959 l 0 -20.002 q 0 -0.0982 0.0096 -0.1959 q 0.0096 -0.0977 0.0288 -0.1941 q 0.0192 -0.0963 0.0477 -0.1903 q 0.0285 -0.094 0.0661 -0.1847 q 0.0376 -0.0907 0.0839 -0.1773 q 0.0463 -0.0866 0.1009 -0.1683 q 0.0546 -0.0817 0.1169 -0.1576 q 0.0623 -0.0759 0.1317 -0.1454 q 0.0694 -0.0694 0.1454 -0.1317 q 0.0759 -0.0623 0.1576 -0.1169 q 0.0817 -0.0546 0.1683 -0.1009 q 0.0866 -0.0463 0.1773 -0.0839 q 0.0907 -0.0376 0.1847 -0.0661 q 0.094 -0.0285 0.1903 -0.0477 q 0.0963 -0.0192 0.1941 -0.0288 q 0.0977 -0.0096 0.1959 -0.0096 l 0 0 z" fill="#FFF"/>
    4. </svg>
    5.  
    You can also see that the circle is rendered in a strange way -- there's not supposed to be a fill effect. (The dark part is the shadow; they're essentially two circles stacked on top.)

    I suspect that there might be an issue with the graphics device used by the Cloud Build (i.e. the Apple Software Renderer).
    For the time being, I worked around it by saving the resulting textures / sprites alongside the SVGs (although the redundancy hurts my heart a little) -- would be nice if those could be made compatible in the future.
     
  12. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    If my memory serves me well, when instancing is disabled, the _RendererColor ends up in the color channel of the Vector Sprite vertices. Since this channel is used by the Vector Sprite to store the shapes colors, the _RendererColor won't work. Enabling instancing stores the color channel somewhere else, hence fixing this issue.

    There are probably things we can do on our side to fix this. I'll try to investigate.
     
  13. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    You're not the first one to report this kind of issue using Cloud Builds. We're still not sure what's going on, but we're keeping an eye on it.
     
  14. rhys_vdw

    rhys_vdw

    Joined:
    Mar 9, 2012
    Posts:
    77
    Thanks, that makes sense. I'll have to spend more time familiarising myself with the shader code.

    FYI the same thing happens when using Sprites/Default as using the vector shader that comes with this package.

    Would appreciate an upstream fix but I expect I'll end up writing my own shader once I understand it better.
     
  15. ibyte

    ibyte

    Joined:
    Aug 14, 2009
    Posts:
    1,034
    Two years down the road, will we ever see slicing in the Sprite editor for SVG graphics? I am concerned Unity seems to have abandoned all SVG progress?
     
  16. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    Slicing of vector sprites is very tricky and often involves moving a lot of vertices when resizing a sprite.

    Progress on SVG is slow at this time as we are consolidating the vector graphics work on multiple fronts at the same time (UI Toolkit, 2D Sprites, etc.).
     
  17. ibyte

    ibyte

    Joined:
    Aug 14, 2009
    Posts:
    1,034
    Thank you for the update @mcoted3d
     
  18. walaber_entertainment

    walaber_entertainment

    Joined:
    Jul 10, 2017
    Posts:
    30
    I looked through this entire thread, and I'm surprised no one else is having the problem I'm having. I'm just trying to import some SVGs to evaluate using vector instead of PNGs for some assets in a project. On the latest version of the vector package (Version 2.0.0-preview.17) and Unity 2021.2.23, I'm getting an error on every single SVG that our artists exported:

    Code (CSharp):
    1. KeyNotFoundException: The given key was not present in the dictionary.
    2. System.Collections.Generic.Dictionary`2[TKey,TValue].get_Item (TKey key) (at <695d1cc93cca45069c528c15c9fdd749>:0)
    3. Unity.VectorGraphics.SVGDocument.ResolveReferencedNode (Unity.VectorGraphics.SceneNode referencedNode, Unity.VectorGraphics.SVGDocument+NodeReferenceData refData, System.Boolean isDeferred) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.17/Runtime/SVGParser.cs:1326)
    The code in question is this:
    Code (CSharp):
    1. // Activate the styles of the referenced node
    2. var styleLayer = nodeStyleLayers[referencedNode];
    3. if (styleLayer != null)
    4.      styles.PushLayer(styleLayer);
    clearly the "referencedNode" doesn't exist in the nodeStyleLayers dictionary, and this code expects it to. anyone elase having trouble importing SVG files like this?
     
  19. walaber_entertainment

    walaber_entertainment

    Joined:
    Jul 10, 2017
    Posts:
    30
    update: this appears to be happening when the SVG is referencing an external image file (not an embedded one). for reference, this came from a file exported from Adobe Animate, which had some reference images as part of the file (but not needed for the exported SVG). copying the desired object into a new document and exporting from there fixed the issue.
     
  20. naruto93

    naruto93

    Joined:
    May 6, 2015
    Posts:
    15
    Hi guys, How to scale the shape?

    When I import SVG file, it still has some white dots.
    I guess it's float problem
     
  21. EmilieCollard191

    EmilieCollard191

    Joined:
    May 8, 2019
    Posts:
    77
    Hello, is there any info on when this package will be out of preview?
     
    GainfulSage likes this.
  22. Dangy

    Dangy

    Joined:
    Aug 26, 2013
    Posts:
    7
    Not sure if this is a known issue... Running Unity 2020.3.20f1 and Vector Graphics 2.0.0-preview.17. When I try to use the menu in the Hierachy -> UI -> SVG Image in prefab view. The SVG's does not appear and does not have a canvas renderer. Assigning a material does not have a preview of the material in the inspector as well.

    However, if I use UI -> Image then manually remove the Image component from the new gameObject then add a SVG Image component everything seems to setup properly?
     
    Last edited: Oct 28, 2021
  23. rhys_vdw

    rhys_vdw

    Joined:
    Mar 9, 2012
    Posts:
    77
    Hi @mcoted3d. Today I decided to experiment with the Animation 2D skinned sprite animation tool and have discovered that it's not possible to use it with files that do not use PSB import. Is there any plan to support SVG sprite meshes with this tool? It would be extremely useful.

    Edit:

    After further investigation it seems that you don't need PSB to do animated sprites, you can use sprite import mode "single" with any raster sprite and achieve something similar. However this is not supported with sprites generated by vectorgraphics. Although it wouldn't make sense to be able to modify the geometry of a sprite imported this way, I do wonder how much it would take to permit skinning and adding bones.

    Or, perhaps it would be possible to support importing a Mesh instead of a Sprite from vectorgraphics and instead using the 3D rigging tool to achieve the same? (I have not looked at these yet)
     
    Last edited: Oct 31, 2021
  24. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    We did some experimentation with 2D skinning in the past, but it is challenging with the vector graphics system since changing the tessellation property of the importer may generate a completely different mesh. Trying to keep the bone weights on these vertices would be an approximation at best.

    Given this, we basically put these experiment on the shelf. We may come back to it later.

    I would expect similar limitations with a mesh export.
     
  25. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    Known issue, we should fix soon.
     
  26. rhys_vdw

    rhys_vdw

    Joined:
    Mar 9, 2012
    Posts:
    77
     
  27. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    This is definitely something to consider. However, our long-term plan is to move away from tessellated vector graphics, and to provide real infinite resolution rendering with per-fragment vector evaluations. This approach doesn't blend well with vertex <-> bone mapping. Instead, it would probably make more sense to attach the bones to the underlying vector constructs (lines, beziers, etc.).

    This is still very much a work in progress, and one of the biggest reasons we are not ready to get out of the preview phase for the package.

    Hope this helps!
     
  28. rhys_vdw

    rhys_vdw

    Joined:
    Mar 9, 2012
    Posts:
    77
    Wowee! That sounds amazing, and would help with the extreme polygon count too.

    Is it possible to just toggle on the skin editor (at my own risk) by forking the current version of the vector and/or animation packages?
     
  29. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    This was a prototype running on a /much/ older version of Unity, I doubt this will even compile with the latest 2D changes that were made. Also, this wasn't pushed on a public facing repository.

    The 2D animation tools were very much designed with textured-sprites in mind. If that works for you, it would probably be preferable to import your SVG as textured sprites and go with that. (But you'll lose the "infinite" resolution of the SVG content, obviously)
     
  30. darashayda

    darashayda

    Joined:
    Jun 27, 2020
    Posts:
    230
    Wanted to thank you all at Vector Graphics team, a mere 1 year ago I could not get SVG sprites work properly, today I can get and display them from CCD buckets or Stream them ;)

    See attached silly demo :)

    What you see is 2D StreamPlot in Woflram Mathematica with fancy math typeset above and below, with complete formats in place.

    As you can see all is working in new version Unity vector graphics.

    We are using these for include large collection of educational modules for Unity games ...

    Hope to make friends with vector graphics folks.

    I am soooooooo relieved :)

    Dara
     

    Attached Files:

    mcoted3d likes this.
  31. macondos

    macondos

    Joined:
    Dec 25, 2018
    Posts:
    1
    Hello. When importing SVG from Inkscape, radial gradients are imported as linear.
    The point is that the radial gradient refers through the xlink: href field to the linear gradient, which stores the color values. And the original values are copied from the linear, which is absolutely correct. But the type of the gradient is also copied, and after that it is not reassigned to radial.

    You can fix this by adding just a couple of lines:
    Code (Boo):
    1. Index: Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.18/Runtime/SVGParser.cs
    2. IDEA additional info:
    3. Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
    4. <+>UTF-8
    5. ===================================================================
    6. --- Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.18/Runtime/SVGParser.cs    (date 1638911304802)
    7. +++ Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.18/Runtime/SVGParser.cs    (date 1638911304802)
    8. @@ -598,7 +598,8 @@
    9.              GradientFill fill = CloneGradientFill(refFill);
    10.              if (fill == null)
    11.                  fill = new GradientFill() { Addressing = addressing, Type = GradientFillType.Linear };
    12. -
    13. +            fill.Type = GradientFillType.Linear;
    14. +          
    15.              LinearGradientExData fillExData = new LinearGradientExData() { WorldRelative = relativeToWorld, FillTransform = gradientTransform };
    16.              gradientExInfo[fill] = fillExData;
    17. @@ -840,7 +841,8 @@
    18.              GradientFill fill = CloneGradientFill(refFill);
    19.              if (fill == null)
    20.                  fill = new GradientFill() { Addressing = addressing, Type = GradientFillType.Radial };
    21. -
    22. +            fill.Type = GradientFillType.Radial;
    23. +          
    24.              RadialGradientExData fillExData = new RadialGradientExData() { WorldRelative = relativeToWorld, FillTransform = gradientTransform };
    25.              gradientExInfo[fill] = fillExData;
    26.  
     
    jGate99 likes this.
  32. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    Thanks for sharing and providing the fix!
    I'll try to include it in the next release.
     
  33. darashayda

    darashayda

    Joined:
    Jun 27, 2020
    Posts:
    230
    My gratitude to @macondos as well.

    Dara
     
  34. Relo999

    Relo999

    Joined:
    Dec 22, 2015
    Posts:
    24
    Is it possible to access the vector points through code? I know right now it doesn't support importing animations right now, but I'm hoping it does support animating it through code.
     
  35. strikeric11

    strikeric11

    Joined:
    Sep 7, 2016
    Posts:
    10
    I cant find vector graphics in preview package manager.
     

    Attached Files:

  36. copypasteearth

    copypasteearth

    Joined:
    Jun 7, 2013
    Posts:
    14
    hi, i am trying to import this svg and it is showing up just a transparent sprite. and the console is saying this:
    Incomplete mesh data in Sprite. Please reimport or recreate the Sprite.
    UnityEngine.GUIUtility:processEvent (int,intptr,bool&)

    any idea what i should do, i tried to change every import setting.

    <svg id="mm-svg" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24"> <rect class='c11' x='7' y='0'/><rect class='c11' x='8' y='0'/><rect class='c11' x='9' y='0'/><rect class='c11' x='10' y='0'/><rect class='c11' x='11' y='0'/><rect class='c11' x='12' y='0'/><rect class='c11' x='13' y='0'/><rect class='c11' x='14' y='0'/><rect class='c11' x='15' y='0'/><rect class='c11' x='16' y='0'/><rect class='c11' x='17' y='0'/><rect class='c11' x='7' y='1'/><rect class='c12' x='8' y='1'/><rect class='c12' x='9' y='1'/><rect class='c12' x='10' y='1'/><rect class='c12' x='11' y='1'/><rect class='c12' x='12' y='1'/><rect class='c12' x='13' y='1'/><rect class='c12' x='14' y='1'/><rect class='c12' x='15' y='1'/><rect class='c12' x='16' y='1'/><rect class='c11' x='17' y='1'/><rect class='c11' x='6' y='2'/><rect class='c11' x='7' y='2'/><rect class='c12' x='8' y='2'/><rect class='c12' x='9' y='2'/><rect class='c12' x='10' y='2'/><rect class='c12' x='11' y='2'/><rect class='c12' x='12' y='2'/><rect class='c12' x='13' y='2'/><rect class='c12' x='14' y='2'/><rect class='c12' x='15' y='2'/><rect class='c12' x='16' y='2'/><rect class='c11' x='17' y='2'/><rect class='c11' x='18' y='2'/><rect class='c11' x='6' y='3'/><rect class='c11' x='7' y='3'/><rect class='c12' x='8' y='3'/><rect class='c12' x='9' y='3'/><rect class='c12' x='10' y='3'/><rect class='c12' x='11' y='3'/><rect class='c12' x='12' y='3'/><rect class='c12' x='13' y='3'/><rect class='c12' x='14' y='3'/><rect class='c12' x='15' y='3'/><rect class='c12' x='16' y='3'/><rect class='c11' x='17' y='3'/><rect class='c11' x='18' y='3'/><rect class='c11' x='6' y='4'/><rect class='c11' x='7' y='4'/><rect class='c12' x='8' y='4'/><rect class='c12' x='9' y='4'/><rect class='c12' x='10' y='4'/><rect class='c11' x='11' y='4'/><rect class='c12' x='12' y='4'/><rect class='c12' x='13' y='4'/><rect class='c12' x='14' y='4'/><rect class='c12' x='15' y='4'/><rect class='c12' x='16' y='4'/><rect class='c11' x='17' y='4'/><rect class='c11' x='18' y='4'/><rect class='c11' x='7' y='5'/><rect class='c12' x='8' y='5'/><rect class='c12' x='9' y='5'/><rect class='c12' x='10' y='5'/><rect class='c11' x='11' y='5'/><rect class='c11' x='12' y='5'/><rect class='c12' x='13' y='5'/><rect class='c12' x='14' y='5'/><rect class='c12' x='15' y='5'/><rect class='c12' x='16' y='5'/><rect class='c11' x='17' y='5'/><rect class='c11' x='7' y='6'/><rect class='c12' x='8' y='6'/><rect class='c12' x='9' y='6'/><rect class='c12' x='10' y='6'/><rect class='c12' x='11' y='6'/><rect class='c12' x='12' y='6'/><rect class='c12' x='13' y='6'/><rect class='c12' x='14' y='6'/><rect class='c12' x='15' y='6'/><rect class='c12' x='16' y='6'/><rect class='c11' x='17' y='6'/><rect class='c11' x='7' y='7'/><rect class='c12' x='8' y='7'/><rect class='c12' x='9' y='7'/><rect class='c12' x='10' y='7'/><rect class='c12' x='11' y='7'/><rect class='c12' x='12' y='7'/><rect class='c12' x='13' y='7'/><rect class='c12' x='14' y='7'/><rect class='c12' x='15' y='7'/><rect class='c12' x='16' y='7'/><rect class='c11' x='17' y='7'/><rect class='c11' x='7' y='8'/><rect class='c12' x='8' y='8'/><rect class='c12' x='9' y='8'/><rect class='c12' x='10' y='8'/><rect class='c12' x='11' y='8'/><rect class='c12' x='12' y='8'/><rect class='c12' x='13' y='8'/><rect class='c12' x='14' y='8'/><rect class='c12' x='15' y='8'/><rect class='c12' x='16' y='8'/><rect class='c11' x='17' y='8'/><rect class='c11' x='8' y='9'/><rect class='c12' x='9' y='9'/><rect class='c12' x='10' y='9'/><rect class='c12' x='11' y='9'/><rect class='c12' x='12' y='9'/><rect class='c12' x='13' y='9'/><rect class='c12' x='14' y='9'/><rect class='c12' x='15' y='9'/><rect class='c11' x='16' y='9'/><rect class='c11' x='9' y='10'/><rect class='c12' x='10' y='10'/><rect class='c12' x='11' y='10'/><rect class='c12' x='12' y='10'/><rect class='c12' x='13' y='10'/><rect class='c12' x='14' y='10'/><rect class='c11' x='15' y='10'/><rect class='c11' x='1' y='11'/><rect class='c11' x='2' y='11'/><rect class='c11' x='3' y='11'/><rect class='c11' x='4' y='11'/><rect class='c11' x='5' y='11'/><rect class='c11' x='6' y='11'/><rect class='c11' x='7' y='11'/><rect class='c11' x='8' y='11'/><rect class='c12' x='9' y='11'/><rect class='c12' x='10' y='11'/><rect class='c12' x='11' y='11'/><rect class='c12' x='12' y='11'/><rect class='c12' x='13' y='11'/><rect class='c12' x='14' y='11'/><rect class='c12' x='15' y='11'/><rect class='c11' x='16' y='11'/><rect class='c11' x='17' y='11'/><rect class='c11' x='18' y='11'/><rect class='c11' x='19' y='11'/><rect class='c11' x='20' y='11'/><rect class='c11' x='21' y='11'/><rect class='c11' x='22' y='11'/><rect class='c11' x='23' y='11'/><rect class='c11' x='1' y='12'/><rect class='c12' x='2' y='12'/><rect class='c12' x='3' y='12'/><rect class='c12' x='4' y='12'/><rect class='c12' x='5' y='12'/><rect class='c12' x='6' y='12'/><rect class='c12' x='7' y='12'/><rect class='c12' x='8' y='12'/><rect class='c12' x='9' y='12'/><rect class='c12' x='10' y='12'/><rect class='c12' x='11' y='12'/><rect class='c12' x='12' y='12'/><rect class='c12' x='13' y='12'/><rect class='c12' x='14' y='12'/><rect class='c12' x='15' y='12'/><rect class='c12' x='16' y='12'/><rect class='c12' x='17' y='12'/><rect class='c12' x='18' y='12'/><rect class='c12' x='19' y='12'/><rect class='c12' x='20' y='12'/><rect class='c12' x='21' y='12'/><rect class='c12' x='22' y='12'/><rect class='c11' x='23' y='12'/><rect class='c11' x='0' y='13'/><rect class='c12' x='1' y='13'/><rect class='c12' x='2' y='13'/><rect class='c12' x='3' y='13'/><rect class='c12' x='4' y='13'/><rect class='c11' x='5' y='13'/><rect class='c12' x='6' y='13'/><rect class='c12' x='7' y='13'/><rect class='c12' x='8' y='13'/><rect class='c12' x='9' y='13'/><rect class='c12' x='10' y='13'/><rect class='c12' x='11' y='13'/><rect class='c12' x='12' y='13'/><rect class='c12' x='13' y='13'/><rect class='c12' x='14' y='13'/><rect class='c12' x='15' y='13'/><rect class='c12' x='16' y='13'/><rect class='c12' x='17' y='13'/><rect class='c12' x='18' y='13'/><rect class='c11' x='19' y='13'/><rect class='c12' x='20' y='13'/><rect class='c12' x='21' y='13'/><rect class='c12' x='22' y='13'/><rect class='c12' x='23' y='13'/><rect class='c12' x='0' y='14'/><rect class='c12' x='1' y='14'/><rect class='c12' x='2' y='14'/><rect class='c12' x='3' y='14'/><rect class='c12' x='4' y='14'/><rect class='c11' x='5' y='14'/><rect class='c12' x='6' y='14'/><rect class='c12' x='7' y='14'/><rect class='c13' x='8' y='14'/><rect class='c12' x='9' y='14'/><rect class='c12' x='10' y='14'/><rect class='c11' x='11' y='14'/><rect class='c12' x='12' y='14'/><rect class='c11' x='13' y='14'/><rect class='c12' x='14' y='14'/><rect class='c12' x='15' y='14'/><rect class='c13' x='16' y='14'/><rect class='c12' x='17' y='14'/><rect class='c12' x='18' y='14'/><rect class='c11' x='19' y='14'/><rect class='c12' x='20' y='14'/><rect class='c12' x='21' y='14'/><rect class='c12' x='22' y='14'/><rect class='c12' x='23' y='14'/><rect class='c12' x='0' y='15'/><rect class='c12' x='1' y='15'/><rect class='c12' x='2' y='15'/><rect class='c12' x='3' y='15'/><rect class='c12' x='4' y='15'/><rect class='c11' x='5' y='15'/><rect class='c11' x='6' y='15'/><rect class='c11' x='7' y='15'/><rect class='c11' x='8' y='15'/><rect class='c11' x='9' y='15'/><rect class='c11' x='10' y='15'/><rect class='c11' x='11' y='15'/><rect class='c12' x='12' y='15'/><rect class='c11' x='13' y='15'/><rect class='c11' x='14' y='15'/><rect class='c11' x='15' y='15'/><rect class='c11' x='16' y='15'/><rect class='c11' x='17' y='15'/><rect class='c11' x='18' y='15'/><rect class='c11' x='19' y='15'/><rect class='c12' x='20' y='15'/><rect class='c12' x='21' y='15'/><rect class='c12' x='22' y='15'/><rect class='c12' x='23' y='15'/><rect class='c12' x='0' y='16'/><rect class='c12' x='1' y='16'/><rect class='c12' x='2' y='16'/><rect class='c12' x='3' y='16'/><rect class='c12' x='4' y='16'/><rect class='c12' x='5' y='16'/><rect class='c12' x='6' y='16'/><rect class='c12' x='7' y='16'/><rect class='c12' x='8' y='16'/><rect class='c12' x='9' y='16'/><rect class='c12' x='10' y='16'/><rect class='c12' x='11' y='16'/><rect class='c12' x='12' y='16'/><rect class='c12' x='13' y='16'/><rect class='c12' x='14' y='16'/><rect class='c12' x='15' y='16'/><rect class='c12' x='16' y='16'/><rect class='c12' x='17' y='16'/><rect class='c12' x='18' y='16'/><rect class='c12' x='19' y='16'/><rect class='c12' x='20' y='16'/><rect class='c12' x='21' y='16'/><rect class='c12' x='22' y='16'/><rect class='c12' x='23' y='16'/><rect class='c12' x='0' y='17'/><rect class='c12' x='1' y='17'/><rect class='c12' x='2' y='17'/><rect class='c12' x='3' y='17'/><rect class='c11' x='4' y='17'/><rect class='c12' x='5' y='17'/><rect class='c11' x='6' y='17'/><rect class='c11' x='7' y='17'/><rect class='c11' x='8' y='17'/><rect class='c11' x='9' y='17'/><rect class='c11' x='10' y='17'/><rect class='c11' x='11' y='17'/><rect class='c12' x='12' y='17'/><rect class='c11' x='13' y='17'/><rect class='c11' x='14' y='17'/><rect class='c11' x='15' y='17'/><rect class='c11' x='16' y='17'/><rect class='c11' x='17' y='17'/><rect class='c11' x='18' y='17'/><rect class='c12' x='19' y='17'/><rect class='c11' x='20' y='17'/><rect class='c12' x='21' y='17'/><rect class='c12' x='22' y='17'/><rect class='c12' x='23' y='17'/><rect class='c12' x='0' y='18'/><rect class='c12' x='1' y='18'/><rect class='c11' x='2' y='18'/><rect class='c11' x='3' y='18'/><rect class='c11' x='4' y='18'/><rect class='c12' x='5' y='18'/><rect class='c11' x='6' y='18'/><rect class='c12' x='7' y='18'/><rect class='c12' x='8' y='18'/><rect class='c12' x='9' y='18'/><rect class='c12' x='10' y='18'/><rect class='c12' x='11' y='18'/><rect class='c12' x='12' y='18'/><rect class='c12' x='13' y='18'/><rect class='c12' x='14' y='18'/><rect class='c12' x='15' y='18'/><rect class='c12' x='16' y='18'/><rect class='c12' x='17' y='18'/><rect class='c11' x='18' y='18'/><rect class='c12' x='19' y='18'/><rect class='c11' x='20' y='18'/><rect class='c11' x='21' y='18'/><rect class='c11' x='22' y='18'/><rect class='c12' x='23' y='18'/><rect class='c12' x='0' y='19'/><rect class='c12' x='1' y='19'/><rect class='c11' x='2' y='19'/><rect class='c11' x='4' y='19'/><rect class='c12' x='5' y='19'/><rect class='c11' x='6' y='19'/><rect class='c11' x='7' y='19'/><rect class='c11' x='8' y='19'/><rect class='c11' x='9' y='19'/><rect class='c11' x='10' y='19'/><rect class='c11' x='11' y='19'/><rect class='c12' x='12' y='19'/><rect class='c11' x='13' y='19'/><rect class='c11' x='14' y='19'/><rect class='c11' x='15' y='19'/><rect class='c11' x='16' y='19'/><rect class='c11' x='17' y='19'/><rect class='c11' x='18' y='19'/><rect class='c12' x='19' y='19'/><rect class='c11' x='20' y='19'/><rect class='c11' x='22' y='19'/><rect class='c12' x='23' y='19'/><rect class='c12' x='0' y='20'/><rect class='c11' x='1' y='20'/><rect class='c11' x='4' y='20'/><rect class='c12' x='5' y='20'/><rect class='c12' x='6' y='20'/><rect class='c11' x='7' y='20'/><rect class='c12' x='8' y='20'/><rect class='c12' x='9' y='20'/><rect class='c12' x='10' y='20'/><rect class='c12' x='11' y='20'/><rect class='c12' x='12' y='20'/><rect class='c12' x='13' y='20'/><rect class='c12' x='14' y='20'/><rect class='c12' x='15' y='20'/><rect class='c12' x='16' y='20'/><rect class='c11' x='17' y='20'/><rect class='c12' x='18' y='20'/><rect class='c12' x='19' y='20'/><rect class='c11' x='20' y='20'/><rect class='c11' x='23' y='20'/><rect class='c11' x='0' y='21'/><rect class='c11' x='5' y='21'/><rect class='c12' x='6' y='21'/><rect class='c11' x='7' y='21'/><rect class='c11' x='8' y='21'/><rect class='c11' x='9' y='21'/><rect class='c11' x='10' y='21'/><rect class='c11' x='11' y='21'/><rect class='c12' x='12' y='21'/><rect class='c11' x='13' y='21'/><rect class='c11' x='14' y='21'/><rect class='c11' x='15' y='21'/><rect class='c11' x='16' y='21'/><rect class='c11' x='17' y='21'/><rect class='c12' x='18' y='21'/><rect class='c11' x='19' y='21'/><rect class='c11' x='5' y='22'/><rect class='c12' x='6' y='22'/><rect class='c12' x='7' y='22'/><rect class='c11' x='8' y='22'/><rect class='c12' x='9' y='22'/><rect class='c12' x='10' y='22'/><rect class='c12' x='11' y='22'/><rect class='c12' x='12' y='22'/><rect class='c12' x='13' y='22'/><rect class='c12' x='14' y='22'/><rect class='c12' x='15' y='22'/><rect class='c11' x='16' y='22'/><rect class='c12' x='17' y='22'/><rect class='c12' x='18' y='22'/><rect class='c11' x='19' y='22'/><rect class='c11' x='6' y='23'/><rect class='c12' x='7' y='23'/><rect class='c11' x='8' y='23'/><rect class='c11' x='9' y='23'/><rect class='c11' x='10' y='23'/><rect class='c11' x='11' y='23'/><rect class='c12' x='12' y='23'/><rect class='c11' x='13' y='23'/><rect class='c11' x='14' y='23'/><rect class='c11' x='15' y='23'/><rect class='c11' x='16' y='23'/><rect class='c12' x='17' y='23'/><rect class='c11' x='18' y='23'/><rect class='c39' x='9' y='2'/><rect class='c39' x='10' y='2'/><rect class='c39' x='11' y='2'/><rect class='c39' x='13' y='2'/><rect class='c39' x='14' y='2'/><rect class='c39' x='15' y='2'/><rect class='c00' x='9' y='3'/><rect class='c40' x='10' y='3'/><rect class='c00' x='13' y='3'/><rect class='c40' x='14' y='3'/><rect class='c39' x='14' y='7'/><rect class='c39' x='10' y='8'/><rect class='c39' x='11' y='8'/><rect class='c39' x='12' y='8'/><rect class='c39' x='13' y='8'/><rect class='c39' x='14' y='8'/><rect class='c00' x='0' y='14'/><rect class='c00' x='0' y='15'/><rect class='c00' x='1' y='15'/><rect class='c00' x='1' y='16'/><rect class='c00' x='2' y='16'/><rect class='c00' x='2' y='17'/><rect class='c00' x='3' y='17'/><rect class='c00' x='3' y='18'/><rect class='c20' x='5' y='4'/><rect class='c20' x='5' y='5'/><rect class='c20' x='6' y='5'/><rect class='c20' x='19' y='4'/><rect class='c20' x='19' y='5'/><rect class='c20' x='18' y='5'/><rect class='c20' x='10' y='11'/><rect class='c20' x='14' y='11'/><rect class='c20' x='11' y='12'/><rect class='c20' x='13' y='12'/><rect class='c21' x='12' y='13'/><rect class='c21' x='11' y='14'/><rect class='c21' x='12' y='14'/><rect class='c21' x='13' y='14'/><rect class='c21' x='12' y='15'/><rect class='c21' x='12' y='16'/><rect class='c42' x='9' y='10'/><rect class='c42' x='8' y='10'/><rect class='c42' x='9' y='11'/><rect class='c42' x='15' y='10'/><rect class='c42' x='16' y='10'/><rect class='c42' x='15' y='11'/><rect class='c75' x='3' y='11'/><rect class='c43' x='4' y='11'/><rect class='c43' x='5' y='11'/><rect class='c43' x='6' y='11'/><rect class='c43' x='7' y='11'/><rect class='c43' x='8' y='11'/><rect class='c43' x='16' y='11'/><rect class='c43' x='17' y='11'/><rect class='c43' x='18' y='11'/><rect class='c43' x='19' y='11'/><rect class='c43' x='20' y='11'/><rect class='c75' x='21' y='11'/><rect class='c75' x='3' y='12'/><rect class='c43' x='4' y='12'/><rect class='c43' x='5' y='12'/><rect class='c43' x='6' y='12'/><rect class='c43' x='7' y='12'/><rect class='c43' x='8' y='12'/><rect class='c75' x='9' y='12'/><rect class='c75' x='15' y='12'/><rect class='c43' x='16' y='12'/><rect class='c43' x='17' y='12'/><rect class='c43' x='18' y='12'/><rect class='c43' x='19' y='12'/><rect class='c43' x='20' y='12'/><rect class='c75' x='21' y='12'/><rect class='c75' x='3' y='13'/><rect class='c43' x='4' y='13'/><rect class='c43' x='5' y='13'/><rect class='c43' x='6' y='13'/><rect class='c43' x='7' y='13'/><rect class='c43' x='8' y='13'/><rect class='c75' x='9' y='13'/><rect class='c75' x='15' y='13'/><rect class='c43' x='16' y='13'/><rect class='c38' x='17' y='13'/><rect class='c38' x='18' y='13'/><rect class='c38' x='19' y='13'/><rect class='c43' x='20' y='13'/><rect class='c75' x='21' y='13'/><rect class='c75' x='3' y='14'/><rect class='c43' x='4' y='14'/><rect class='c43' x='5' y='14'/><rect class='c43' x='6' y='14'/><rect class='c43' x='7' y='14'/><rect class='c43' x='8' y='14'/><rect class='c01' x='9' y='14'/><rect class='c75' x='15' y='14'/><rect class='c43' x='16' y='14'/><rect class='c75' x='17' y='14'/><rect class='c75' x='18' y='14'/><rect class='c75' x='19' y='14'/><rect class='c43' x='20' y='14'/><rect class='c75' x='21' y='14'/><rect class='c75' x='3' y='15'/><rect class='c43' x='4' y='15'/><rect class='c43' x='5' y='15'/><rect class='c43' x='6' y='15'/><rect class='c43' x='7' y='15'/><rect class='c43' x='8' y='15'/><rect class='c75' x='9' y='15'/><rect class='c75' x='15' y='15'/><rect class='c43' x='16' y='15'/><rect class='c75' x='17' y='15'/><rect class='c75' x='18' y='15'/><rect class='c75' x='19' y='15'/><rect class='c43' x='20' y='15'/><rect class='c75' x='21' y='15'/><rect class='c75' x='3' y='16'/><rect class='c43' x='4' y='16'/><rect class='c43' x='5' y='16'/><rect class='c43' x='6' y='16'/><rect class='c43' x='7' y='16'/><rect class='c43' x='8' y='16'/><rect class='c75' x='9' y='16'/><rect class='c75' x='15' y='16'/><rect class='c43' x='16' y='16'/><rect class='c43' x='17' y='16'/><rect class='c43' x='18' y='16'/><rect class='c43' x='19' y='16'/><rect class='c43' x='20' y='16'/><rect class='c75' x='21' y='16'/><rect class='c75' x='3' y='17'/><rect class='c43' x='4' y='17'/><rect class='c43' x='5' y='17'/><rect class='c43' x='6' y='17'/><rect class='c43' x='7' y='17'/><rect class='c43' x='8' y='17'/><rect class='c01' x='9' y='17'/><rect class='c75' x='15' y='17'/><rect class='c43' x='16' y='17'/><rect class='c43' x='17' y='17'/><rect class='c43' x='18' y='17'/><rect class='c43' x='19' y='17'/><rect class='c43' x='20' y='17'/><rect class='c75' x='21' y='17'/><rect class='c75' x='3' y='18'/><rect class='c43' x='4' y='18'/><rect class='c43' x='5' y='18'/><rect class='c43' x='6' y='18'/><rect class='c43' x='7' y='18'/><rect class='c43' x='8' y='18'/><rect class='c75' x='9' y='18'/><rect class='c75' x='15' y='18'/><rect class='c43' x='16' y='18'/><rect class='c43' x='17' y='18'/><rect class='c43' x='18' y='18'/><rect class='c43' x='19' y='18'/><rect class='c43' x='20' y='18'/><rect class='c75' x='21' y='18'/><rect class='c43' x='4' y='19'/><rect class='c43' x='5' y='19'/><rect class='c43' x='6' y='19'/><rect class='c43' x='7' y='19'/><rect class='c43' x='8' y='19'/><rect class='c75' x='9' y='19'/><rect class='c75' x='15' y='19'/><rect class='c43' x='16' y='19'/><rect class='c43' x='17' y='19'/><rect class='c43' x='18' y='19'/><rect class='c43' x='19' y='19'/><rect class='c43' x='20' y='19'/><rect class='c43' x='4' y='20'/><rect class='c43' x='5' y='20'/><rect class='c43' x='6' y='20'/><rect class='c43' x='7' y='20'/><rect class='c43' x='8' y='20'/><rect class='c01' x='9' y='20'/><rect class='c75' x='15' y='20'/><rect class='c43' x='16' y='20'/><rect class='c43' x='17' y='20'/><rect class='c43' x='18' y='20'/><rect class='c43' x='19' y='20'/><rect class='c43' x='20' y='20'/><rect class='c43' x='5' y='21'/><rect class='c43' x='6' y='21'/><rect class='c43' x='7' y='21'/><rect class='c43' x='8' y='21'/><rect class='c75' x='9' y='21'/><rect class='c75' x='15' y='21'/><rect class='c43' x='16' y='21'/><rect class='c43' x='17' y='21'/><rect class='c43' x='18' y='21'/><rect class='c43' x='19' y='21'/><rect class='c43' x='5' y='22'/><rect class='c43' x='6' y='22'/><rect class='c43' x='7' y='22'/><rect class='c43' x='8' y='22'/><rect class='c75' x='9' y='22'/><rect class='c75' x='15' y='22'/><rect class='c43' x='16' y='22'/><rect class='c43' x='17' y='22'/><rect class='c43' x='18' y='22'/><rect class='c43' x='19' y='22'/><rect class='c43' x='5' y='23'/><rect class='c43' x='6' y='23'/><rect class='c43' x='7' y='23'/><rect class='c43' x='8' y='23'/><rect class='c01' x='9' y='23'/><rect class='c75' x='15' y='23'/><rect class='c43' x='16' y='23'/><rect class='c43' x='17' y='23'/><rect class='c43' x='18' y='23'/><rect class='c43' x='19' y='23'/><style>rect{width:1px;height:1px}#mm-svg{shape-rendering:crispedges}.c01{fill:#000}.c01{fill:#474747}.c02{fill:#d6d6d6}.c03{fill:#b2b2b2}.c04{fill:#582a07}.c05{fill:#301501}.c06{fill:#9b643a}.c07{fill:#70401b}.c08{fill:#130800}.c09{fill:#d79968}.c10{fill:#b77f53}.c11{fill:#e5b893}.c12{fill:#f5cfb1}.c13{fill:#eab0b0}.c14{fill:#818eef}.c15{fill:#5d6acb}.c16{fill:#0a23e2}.c17{fill:#e981ef}.c18{fill:#b542bc}.c19{fill:#e20ada}.c20{fill:#fce311}.c21{fill:#f1f1f1}.c22{fill:red}.c23{fill:#ff6868}.c24{fill:#1be947}.c25{fill:#d34917}.c26{fill:#fff}.c27{fill:#b0e8ef}.c28{fill:#c5e3e7}.c29{fill:#f88fff}.c30{fill:eek:range}.c31{fill:#ff0}.c32{fill:green}.c33{fill:#00f}.c34{fill:indigo}.c35{fill:violet}.c36{fill:#e6ebb0}.c37{fill:#2c2100}.c38{fill:#364b6d}.c39{fill:#1c1c1c}.c40{fill:#fa7c73}.c41{fill:#f10}.c42{fill:#8fd1ff}.c43{fill:#d4edff}.c44{fill:#81deef}.c45{fill:#6fccdd}.c46{fill:#ff6400}.c47{fill:#ff9b00}.c48{fill:#ff6500}.c49{fill:#fff400}.c50{fill:#ffe000}.c51{fill:#b9ff00}.c52{fill:#cbff00}.c53{fill:#3cff00}.c54{fill:#4bff00}.c55{fill:#00ff15}.c56{fill:#00ff0d}.c57{fill:#00ff8a}.c58{fill:#00ff7f}.c59{fill:#00fff7}.c60{fill:#00fff2}.c61{fill:#00acff}.c62{fill:#00b4ff}.c63{fill:#002eff}.c64{fill:#0034ff}.c63{fill:#2400ff}.c64{fill:#1e00ff}.c65{fill:#a000ff}.c66{fill:#9a00ff}.c67{fill:#ff00f0}.c68{fill:#ff00f4}.c69{fill:#ff006d}.c70{fill:#ff0074}.c71{fill:#9700f0}.c72{fill:#dca1ff}.c73{fill:#cbb4f1}.c74{fill:#7d00c7}.c75{fill:#56768e}</style></svg>
     
  37. copypasteearth

    copypasteearth

    Joined:
    Jun 7, 2013
    Posts:
    14
    and im getting this

    Asset import failed, "Assets/Prefabs/6305b72dbe29fd83826d40f8a5d4529e.svg" > SVGFormatException: SVG Error (line 1, character 425): The given key was not present in the dictionary.
    Unity.VectorGraphics.SVGAttribParser.ParseFill (Unity.VectorGraphics.XmlReaderIterator+Node node, Unity.VectorGraphics.SVGDictionary dict, Unity.VectorGraphics.SVGPostponedFills postponedFills, Unity.VectorGraphics.SVGStyleResolver styles, Unity.VectorGraphics.Inheritance inheritance, System.Boolean& isDefaultFill) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.18/Runtime/SVGParser.cs:2634)
    Unity.VectorGraphics.SVGAttribParser.ParseFill (Unity.VectorGraphics.XmlReaderIterator+Node node, Unity.VectorGraphics.SVGDictionary dict, Unity.VectorGraphics.SVGPostponedFills postponedFills, Unity.VectorGraphics.SVGStyleResolver styles, Unity.VectorGraphics.Inheritance inheritance) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.18/Runtime/SVGParser.cs:2608)
    Unity.VectorGraphics.SVGDocument.rect () (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.18/Runtime/SVGParser.cs:1066)
    Unity.VectorGraphics.SVGDocument.ParseChildren (Unity.VectorGraphics.XmlReaderIterator+Node node, System.String nodeName) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.18/Runtime/SVGParser.cs:319)
    Unity.VectorGraphics.SVGDocument.svg () (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.18/Runtime/SVGParser.cs:1195)
    Unity.VectorGraphics.SVGDocument.Import () (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.18/Runtime/SVGParser.cs:264)
    Unity.VectorGraphics.SVGParser.ImportSVG (System.IO.TextReader textReader, Unity.VectorGraphics.ViewportOptions viewportOptions, System.Single dpi, System.Single pixelsPerUnit, System.Int32 windowWidth, System.Int32 windowHeight) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.18/Runtime/SVGParser.cs:110)
    Unity.VectorGraphics.Editor.SVGImporter.OnImportAsset (UnityEditor.AssetImporters.AssetImportContext ctx) (at Library/PackageCache/com.unity.vectorgraphics@2.0.0-preview.18/Editor/SVGImporter.cs:293)
    UnityEditor.AssetImporters.ScriptedImporter.GenerateAssetData (UnityEditor.AssetImporters.AssetImportContext ctx) (at <7ac35247888b44f4a7e290f1f6bb33f3>:0)
    UnityEditorInternal.InternalEditorUtility:projectWindowDrag(HierarchyProperty, Boolean)
    UnityEngine.GUIUtility:processEvent(Int32, IntPtr, Boolean&)

    UnityEngine.GUIUtility:processEvent (int,intptr,bool&)


    for this svg

    <svg version="1.1" shape-rendering="optimizeSpeed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" width="300" height="300" xml:space="preserve"><style type="text/css">rect{width: 1px; height: 1px;}.l{width: 2px; height: 1px;}.c1{fill:hsl(73,100%,50%)}.c2{fill:hsl(259,100%,50%)}.c3{fill:hsl(73,100%,50%)}.c4{fill:hsl(13,100%,50%)}.c5{fill:#ffffff;}</style><rect x="0" y="0" class="c4 s"/><rect x="1" y="0" class="c1 s"/><rect x="2" y="0" class="c4 s"/><rect x="3" y="0" class="c4 s"/><rect x="4" y="0" class="c4 s"/><rect x="5" y="0" class="c4 s"/><rect x="6" y="0" class="c4 s"/><rect x="7" y="0" class="c4 s"/><rect x="8" y="0" class="c1 s"/><rect x="9" y="0" class="c4 s"/><rect x="0" y="1" class="c4 s"/><rect x="1" y="1" class="c1 s"/><rect x="2" y="1" class="c1 s"/><rect x="3" y="1" class="c4 s"/><rect x="4" y="1" class="c4 s"/><rect x="5" y="1" class="c4 s"/><rect x="6" y="1" class="c4 s"/><rect x="7" y="1" class="c1 s"/><rect x="8" y="1" class="c1 s"/><rect x="9" y="1" class="c4 s"/><rect x="0" y="2" class="c4 s"/><rect x="1" y="2" class="c1 s"/><rect x="2" y="2" class="c1 s"/><rect x="3" y="2" class="c1 s"/><rect x="4" y="2" class="c1 s"/><rect x="5" y="2" class="c1 s"/><rect x="6" y="2" class="c1 s"/><rect x="7" y="2" class="c1 s"/><rect x="8" y="2" class="c1 s"/><rect x="9" y="2" class="c4 s"/><rect x="0" y="3" class="c4 s"/><rect x="1" y="3" class="c1 s"/><rect x="2" y="3" class="c1 s"/><rect x="3" y="3" class="c1 s"/><rect x="4" y="3" class="c1 s"/><rect x="5" y="3" class="c1 s"/><rect x="6" y="3" class="c1 s"/><rect x="7" y="3" class="c1 s"/><rect x="8" y="3" class="c1 s"/><rect x="9" y="3" class="c4 s"/><rect x="0" y="4" class="c4 s"/><rect x="1" y="4" class="c1 s"/><rect x="2" y="4" class="c5 s"/><rect x="3" y="4" class="c5 s"/><rect x="4" y="4" class="c1 s"/><rect x="5" y="4" class="c1 s"/><rect x="6" y="4" class="c1 s"/><rect x="7" y="4" class="c5 s"/><rect x="8" y="4" class="c5 s"/><rect x="9" y="4" class="c4 s"/><rect x="0" y="5" class="c1 s"/><rect x="1" y="5" class="c1 s"/><rect x="2" y="5" class="c5 s"/><rect x="3" y="5" class="c5 s"/><rect x="4" y="5" class="c1 s"/><rect x="5" y="5" class="c1 s"/><rect x="6" y="5" class="c1 s"/><rect x="7" y="5" class="c5 s"/><rect x="8" y="5" class="c5 s"/><rect x="9" y="5" class="c1 s"/><rect x="0" y="6" class="c4 s"/><rect x="1" y="6" class="c1 s"/><rect x="2" y="6" class="c1 s"/><rect x="3" y="6" class="c1 s"/><rect x="4" y="6" class="c2 s"/><rect x="5" y="6" class="c2 s"/><rect x="6" y="6" class="c2 s"/><rect x="7" y="6" class="c1 s"/><rect x="8" y="6" class="c1 s"/><rect x="9" y="6" class="c4 s"/><rect x="0" y="7" class="c1 s"/><rect x="1" y="7" class="c1 s"/><rect x="2" y="7" class="c1 s"/><rect x="3" y="7" class="c1 s"/><rect x="4" y="7" class="c1 s"/><rect x="5" y="7" class="c2 s"/><rect x="6" y="7" class="c1 s"/><rect x="7" y="7" class="c1 s"/><rect x="8" y="7" class="c1 s"/><rect x="9" y="7" class="c1 s"/><rect x="0" y="8" class="c4 s"/><rect x="1" y="8" class="c1 s"/><rect x="2" y="8" class="c1 s"/><rect x="3" y="8" class="c2 s"/><rect x="4" y="8" class="c2 s"/><rect x="5" y="8" class="c1 s"/><rect x="6" y="8" class="c2 s"/><rect x="7" y="8" class="c2 s"/><rect x="8" y="8" class="c1 s"/><rect x="9" y="8" class="c4 s"/><rect x="0" y="9" class="c4 s"/><rect x="1" y="9" class="c4 s"/><rect x="2" y="9" class="c1 s"/><rect x="3" y="9" class="c1 s"/><rect x="4" y="9" class="c1 s"/><rect x="5" y="9" class="c1 s"/><rect x="6" y="9" class="c1 s"/><rect x="7" y="9" class="c1 s"/><rect x="8" y="9" class="c4 s"/><rect x="9" y="9" class="c4 s"/><g id="eye-location" transform="translate(2,4)"><g id="aloof"><rect x="0" y="1" class="c3"><animate attributeName="x" values="0;0;1;1;0;0" keyTimes="0;.5;.56;.96;.98;1" dur="12s" repeatCount="indefinite"/><animate attributeName="y" values="1;1;0;0;1;1" keyTimes="0;.5;.56;.96;.98;1" dur="16s" repeatCount="indefinite"/></rect><rect x="5" y="1" class="c3"><animate attributeName="x" values="5;5;6;6;5;5" keyTimes="0;.5;.56;.96;.98;1" dur="12s" repeatCount="indefinite"/><animate attributeName="y" values="1;1;0;0;1;1" keyTimes="0;.5;.56;.96;.98;1" dur="16s" repeatCount="indefinite"/></rect><rect x="0" y="0" class="c1 l" height="0"><animate attributeName="height" values="0;0;2;0;0" keyTimes="0;.55;.57;.59;1" dur="5s" repeatCount="indefinite"/></rect><rect x="5" y="0" class="c1 l" height="0"><animate attributeName="height" values="0;0;2;0;0" keyTimes="0;.55;.57;.59;1" dur="5s" repeatCount="indefinite"/></rect></g></g></svg>
     
  38. rhys_vdw

    rhys_vdw

    Joined:
    Mar 9, 2012
    Posts:
    77
    Lol why don't you just attach the SVG file...
     
  39. copypasteearth

    copypasteearth

    Joined:
    Jun 7, 2013
    Posts:
    14
    Haha, I tried and it wouldn't accept SVG files
     
  40. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    You can if you parse the SVG yourself using
    SVGParser.ImportSVG()
    . The resulting SceneInfo has a Scene property which is the vector data.
     
  41. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    The package manager won't show preview packages anymore. You'll have to add it by name (by clicking the "+" button) and typing "com.unity.vectorgraphics".
     
    Elmstrom likes this.
  42. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    I haven't tried the SVG but it seems the <style> tag is at the end of the file. I don't think we support that. Which software did you use to author this SVG? If you can find a way to bring the styles at the beginning of the file, that should fix your issues.

    I think this is caused by the <animate> tags. This isn't supported.
     
  43. ScionOfDesign

    ScionOfDesign

    Joined:
    Oct 6, 2016
    Posts:
    35
    I think there might be a bug in this package on Linux in Batch Mode. Whenever our CI/CD solution (which runs unity on linux in batch mode) builds a project with SVG set to the 'Textured Sprite' asset type, they always end up as tinted semi-transparent squares. If I open the Unity Editor on linux and re-import these assets, they appear fine. But rebuilding a fresh library in batch mode causes them to fail to rasterize properly.
     
  44. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    I've seen this in the past when the CI launches Unity with the -no-graphics command-line argument. This prevents some SVG assets to import properly, since a GPU is required in some situation (for example, when importing an SVG into a texture).
     
  45. Gridpop

    Gridpop

    Joined:
    May 29, 2014
    Posts:
    9
    Using svg files with the 'Textured Sprite' import setting works well in editor but creates these artifacts on iOS and Android. The sprites are supposed to be just solid coloured rectangles.

    Any idea why this is happening? Thanks

    upload_2022-1-31_13-53-38.png


    Edit: Forgot to mention this only happens when the game is built using Unity Cloud Build. Not if I build directly from the editor
     
    Last edited: Jan 31, 2022
    EvOne likes this.
  46. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    It would look like Unity Cloud Build isn't using the proper shader to bake the SVG into a texture. I think it's worth filing a bug report (Help > Report a Bug...)
     
  47. chesiq

    chesiq

    Joined:
    Apr 25, 2015
    Posts:
    5
    Gradient fill. I stumbled into weird 2 white square artifacts. Gradient fill is applied on top of already existing shapes. Expected behavior would be to have shapes have their color not affected by other shapes. What I did to get there was to mash up existing code examples. Try to add shapes to gradient fill examples, observe results. It seems it does not matter what shape goes on top or behind gradient fill too.

    For my current use case(art stuff) i'm converting a sprite(with lines from this package) to texture with a second camera(not perfect solution since I'd want to next compute some things on gpu and do other things with it so i need texture access). Seems why not add a flag method override with default notexture but have ability to generate texture if needed without gradient fill. It feels inconsistent for sprites to not have textures, sometimes.

    My next use case would be a lib of map gen using vector data to then render pixels onto texture. And here again, I've stumbled into same no texture problem.

    I did make some generative art(subjectively) with it by just using example line drawing functionality.
    https://i.imgur.com/q7KH5m9.png
     
    Last edited: Feb 2, 2022
  48. Neilsonnn

    Neilsonnn

    Joined:
    Mar 29, 2016
    Posts:
    7
    I am having some similar problems with .svg files that use HSL color, at the moment the ParseColor function is giving me a "KeyNotFoundException: The given key was not present in the dictionary." because it can't read the HSL colors, going to add it.

    edit - colors looks a little different but this can be cut-pasted to the ParseColor function in SVGParser to read HSL values


    else if(colorString.StartsWith("hsl(") && colorString.EndsWith(")")) {
    string numbersString = colorString.Substring(4, colorString.Length-5);
    string[] numbers = numbersString.Split(new char[] { ',', '%' }, StringSplitOptions.RemoveEmptyEntries);
    if (numbers.Length != 3)
    throw new Exception("Invalid hsl() color specification");
    Debug.Log("[" + float.Parse(numbers[0]) + "]" + " " + "[" + float.Parse(numbers[1]) + "]" + " " + "[" + float.Parse(numbers[2]) + "]");
    return Color.HSVToRGB(float.Parse(numbers[0]) / 360f, float.Parse(numbers[1]) / 100f, float.Parse(numbers[2]) / 100f);
    }
     
    Last edited: Feb 10, 2022
    mcoted3d likes this.
  49. OrderOfOut

    OrderOfOut

    Joined:
    Sep 21, 2018
    Posts:
    29
    Hey all,
    My environment does not recognize some classes that it should, even after importing Unity.VectorGraphics. Most commonly, Drawables and IDrawable are not found:
    Code (CSharp):
    1.  
    2. Error    CS1061    'SceneNode' does not contain a definition for 'Drawables' and no accessible extension method 'Drawables' accepting a first argument of type 'SceneNode' could be found (are you missing a using directive or an assembly reference?)    
    and:
    Code (CSharp):
    1.  
    2. Error    CS0246    The type or namespace name 'IDrawable' could not be found (are you missing a using directive or an assembly reference?)  
    3.  
    Did these get removed from the preview 18, 2.0.0 package or something?

    EDIT: even weirder, when I check the source of my SceneNode class, it looks like this:
    Code (CSharp):
    1.  
    2. #region Assembly Unity.VectorGraphics, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null
    3. // C:\Users\mjpg7\Unity Projects\VectorStuff\Library\ScriptAssemblies\Unity.VectorGraphics.dll
    4. #endregion
    5.  
    6. using System.Collections.Generic;
    7.  
    8. namespace Unity.VectorGraphics
    9. {
    10.     public class SceneNode
    11.     {
    12.         public SceneNode();
    13.  
    14.         public List<SceneNode> Children { get; set; }
    15.         public List<Shape> Shapes { get; set; }
    16.         public Matrix2D Transform { get; set; }
    17.         public SceneNode Clipper { get; set; }
    18.     }
    19. }
    20.  
    Does the package manager not give us the correct code?
     
    Last edited: Feb 12, 2022
  50. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    885
    Yes, they got removed in 2.0.0. The IDrawable interface we removed and we only deal with the Shape class instead.