Search Unity

  1. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice
  2. Enter the 2020.2 Beta Sweepstakes for a chance to win an Oculus Quest 2.
    Dismiss Notice

Unity Vector Graphics Preview Package

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

  1. steego

    steego

    Joined:
    Jul 15, 2010
    Posts:
    931
    Could you fix this also for images? I'm using 2.0.0-preview12, and SVG files exported from Affinity Designer work fine with gradients, but not images. If I manually edit the file and put the defs on top, the images work fine as well.

    Code (csharp):
    1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    3. <svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    4.     <g transform="matrix(0.975989,0,0,0.975989,3.07335,3.07335)">
    5.         <path d="M256,64C256,28.677 227.323,0 192,0L64,0C28.677,0 0,28.677 0,64L0,192C0,227.323 28.677,256 64,256L192,256C227.323,256 256,227.323 256,192L256,64Z" style="fill:url(#_Linear1);stroke:black;stroke-width:6.15px;"/>
    6.     </g>
    7.     <g id="palette--5-" serif:id="palette (5)" transform="matrix(0.135645,0,0,-0.135645,19.4839,209.387)">
    8.         <use xlink:href="#_Image2" x="0" y="0" width="1600px" height="1200px" transform="matrix(7.37327,0,0,7.36196,0,0)"/>
    9.     </g>
    10.     <defs>
    11.         <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(256,0,0,256,0,128)"><stop offset="0" style="stop-color:rgb(216,255,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,0,244);stop-opacity:1"/></linearGradient>
    12.         <image id="_Image2" width="217px" height="163px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANkAAACjCAYAAAAHB7vRAAAACXBIWXMAAA7EAAAOxAGVKw4bAAALIElEQVR4nO3ceXDU9RnH8ffuBgyQLMkmmAQloEjVElREQAUkHtUBbxhlZGxt1XrgrQNaiLTWamsVR0cBFc8KRUQF7wNvVFDbihAEkZDEQAhHrk3IJiS72z9WR6c1kT++z/x+yuc14zhMZp482cl7f0d2NzDr+cVJfiLWvbWS2spqr9fYY/MvW+j1CnusV2mr1yvssdGRBm45pMzrNfZY0OsFRH7uFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRiRhTZCLGFJmIMUUmYkyRyV5v5Ucf0dzUxJx77+WWkhLad+92Ot9pZMlkkjcWPcOnb73LovvmUrd9u8vxe72aOvhoLWyr93qTH3fGwCBnHhTk7uI0ji4IeL1Ol5qbmnj7zTc5c+JE0kIh2tranM53Glm0vp7mhkaqyso494pL+XrDRpfjnYtEspkw4XTOPOtUCgryvV6nS80xuG42fLAGrrk/9W+/CgXhxpEhJgwKMm91nNMO9PcJ09GjRpGXl0d2JMKk888nIzPT6XynP32AAGWlaykr/YI5JX+CpMvp7p1x5niWL19BRkYGN8+8kWDQv78MtVEoPgImnwjFh0Nd1OuNOhdPQGVjkkAA5pyURk2L1xt1LdbSwoOzZ9OzZ0+WLl5MMun2FzfN5bBwJJup990NwNbKr9kVbXI53rlotImpU69hY9km6urrSSQSXq/Uqf55MPJQmL8Mxo2EwjyvN+pcKADLNyd4aVOS6O4kjW7PvpwrXb2aRxcsACAYClG7cye5ffo4m+80srZYjPmz7gWgNRbjkpnTXY537rVXl/HmsncpKjqUfzyx0Ot1upRMwvR5kJ0J730Or/wNAj691AkG4LSBIVrjcT7fAf/Z5u9TmsFDhvC7yZMZPGQIsViMnNxcp/Odnh8FgyEK+hcS7+igrSXm97NFzppwOsNHHElz8y5m3DzV16eLG7fARafCghK4aDyUVXu9UeeSQGNbkhMLg1x5RIiLh/j3cQXIzs7m3rlzGTxkCJdMmULA8bOX05++2z7dGf/ryVw440ZOPu8caiqrXI53LhgIMHzEMKqrtxJriTk/F3dp0P6wrhKuvg/WV8FB+3m9Uec6EvDsVwme2ZAgujvJpgb/Pq4AH7z/Pu3t7TRFo9x/zz20tLi9iHR6utjS1MxzDz1CRjgMwNAxo1yOd+7dd5azY8dO0tPTuf22u7xep0trNqXiumgcjD3c6226lhaEacNDvFuV4Im1Cc7/ZYi3qzq8XqtToVCI115+mbEnnMDGDRucH8mcRtYzM4M+BfmcMnmSy7FmxhaPYcWKTxgwoJC333rP63W61B5PBbZhMzzwIjx0PfTO8HqrziWSUJQb5NphAepa/X0kG1NczPZt28jLz+eq66+nR48eTuc7P1kuOKA/VWWbeHDmreyK+vg+M5CVncW1113BOedO4LbbZhIKhbxeqVO5YciPwCWnwfzp0GMfrzfqXEcCihe1c+6L7TxeGqfkg7jXK3WpsqKCx+bNA2DGtGnO7zI7PZJF6+rZsGo1ad268Ztp17Ph89UcPuoYl9/CqYceeIRgMEROboTanbXE4/79ZcjPgZGXQ799IdYGS26F7t283uqHhQLw9qRuVDYmeXhNnJtGhLj5Q/8+tpUVFUydnroTnpefT2NDA9mRiLP5TiNLJBKs//dnBIJBqssrOOqE412Od+7Ciy8gFAySTCapqdnO80tf8u3fytZWwN1TYFUZDD0IvtoMQwd5vdUPS5A6mmV0hwsGhyjz+Y2PYUcdxcybbqIpGuW44493Ghg4jqx3ToRL/zyTNStWkpOfT9HI4S7HO/fkE//k5FNO5MADD2DJcy94vU6XsjPgyTdSr6ao2g5XT/B6o84lk3Dy0+0UFwYpyIBF6/35xPWtHj17MmzECKq3bGHosGHO5zu9Jot3dLB03qP0GzSIHdXVbK382uV451paYixd8hJPL3rW61V+VHp3uGYiDMiDfbNSrwDxq0AAlpyVRlFugAPCAa4c6t9rXYB1a9eSk5PDpMmTmTd3Lm2trU7nOz2SNTdGycjKIis3h6zcY6n6aiP7DzzQ5bdw6uprLmfAgELi8Tix1lZu+ePtxOP+fNatroV1FanYDi5M3WU8uJ/XW/2wIJC1T4B3quL0SIPxB/j7j9E1W7fSr7CQutpaMsNhotEofdLTnc13Gtk+PdLplZnJiteWEe/o4MjiMS7HO7d0yUtkZfWmtPQL316LfSuSCU+8DicPh2X/gnFTvN6oc/EkjF7YzlXDQtTFkr6/u1h02GGs++ILAoEAx4weTbh3b6fznUbWo1cvtlZUsv+ggXz+4QrGnD7e5XjnBhcdQtnGCh59fC6vv/4mCxcs9nqlTrW1wx2XQrQFbjjMv69b/Nbsk0IMzAoQSQ+SSMKCdf59EovFYsy55x4yw2GSySRjxo51Ot/pcby5sZE++/Vly8ZNzJg3m21Vm12Ody4SiVDQN4+LL5zCYUMGEwr597RmV2sqsA/W+D+wUBCO7Rti3LMdjH6qnREF/n1cASrLy1m4ZAkTJ03imFGjaKh3+65Ypz99r3CYgv6FHDv+FJ574GH6/8Kn95i/sXp1KZFINuFwb1588VXfXo8B5ITh1Y+hvglKHoEtO73eqHPxBFz7Tjt3FYf4y6gQsz/z9+libp8+PPLgg1SUl9O2ezfpDq/HAAKznl/s7z9ifM+6t1ZSW+njl5//j/mX+fvtM9/Xq9TtHTVLoyMN3HJImddr7DF/H8dFfgYUmYgxRSZiTJGJGFNkIsYUmYgxRSZiLJD086fHiPwM6EgmYkyRiRhTZLLXKt8Ju7/5pLodzVC367uvbdqZ+oSwjkTq/5B6J0T5914zuqMZ2jpge1Pqv844fauLyE/F2XNg/bZUZH8YB9OXpD6b5IHJsODj1Nda2+GGX0FDC1w4CsbcCd3ToKgvnD0Url0E542ABZ9Ar+5QMh5+/wNvoVRksldavhG23gkvrIKSF2BVCZTXwrRnU0exLX+H3z4GL6yGogJ46lMYVwR3ToS+N8KqKvjyVviyBj4sg30zoLCTz99RZLJXGrQvFM+CDdvgsuPgmDugPQEzxsOTK1NHrfU1sHwqjPgrnDMMXlkDn30Ng/vClnoIp8NHZdDUClsbYWU5nDL4/7+XbuHLXimZhNLqVGzp3WBzQ+rjxfPD333t4LzU6WF7HLZFIdILNu2Aov2gphHyv/mUgqp6IAn9OjmSKTIRY7q7KGJMkYkY+y8SMChGYvrHmQAAAABJRU5ErkJggg=="/>
    13.     </defs>
    14. </svg>
    15.  
     
    mcoted3d likes this.
  2. sebmihali07

    sebmihali07

    Joined:
    Sep 12, 2019
    Posts:
    4
    Hi, is there a way to import svg file that have more than 65535 vertices without splitting the svg in different files?
     
  3. dimonwin92

    dimonwin92

    Joined:
    Feb 4, 2020
    Posts:
    1
    Hi, we have svg graphic problems at the devices Samsung Galaxy A3 - 2017, Cubot note s - 2016, Samsung J1. Svg graphics are shown as a black texture. Could you please give us some information about processor types which don't support svg graphics? Thank you in advance for answer.
     

    Attached Files:

  4. skar_games

    skar_games

    Joined:
    Jul 8, 2020
    Posts:
    1
    Hello, I was testing this out and I noticed that when I import an svg with linearGradients that have position values (x1,x2,y1,y2) it works, but if I use that same SVG in the 'runtimeload' the gradients do not work.

    also the “runtimeGradient” doesn’t seem to have a way to pass in or define the position values either, maybe I’m missing it?
     
    Last edited: Jul 9, 2020
  5. SakshiChhabra92

    SakshiChhabra92

    Joined:
    Jul 3, 2020
    Posts:
    2
    Hello, i am using vector graphics to change the colour of T-shirt sleeves, collar etc., so i have successfully filled the colours on sprite with this code.

    var tessOptions = new VectorUtils.TessellationOptions()
    {
    StepDistance = 100.0f,
    MaxCordDeviation = 0.5f,
    MaxTanAngleDeviation = 0.1f,
    SamplingStepSize = 0.01f
    };

    var sceneInfo = SVGParser.ImportSVG(new StringReader(svgFile));

    var shape1 = sceneInfo.NodeIDs["C1"].Shapes[0];
    shape1.Fill = new SolidFill() { Color = Color.red };
    // Tessellate
    var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions);
    // Build a sprite
    var sprite = VectorUtils.BuildSprite(geoms, 1000.0f, VectorUtils.Alignment.TopLeft, Vector2.zero, 128, true);

    GetComponent<SpriteRenderer>().sprite = sprite;

    and after getting all different colours on sprite i wanted to convert this sprite to texture like this:

    Texture2D coloredTexture = VectorUtils.RenderSpriteToTexture2D(sprite, 5000, 5000, svgMat, 1, true);
    tshirt.GetComponent<MeshRenderer>().material.SetTexture("_MainTex",coloredTexture);
    and here i am using svg mat with shader unlit/Vector..
    But my tshirt mesh front part is looking like a transparent mesh. or all materials are messed up when this texture is applied at runtime with shader unlit/Vector.
    So is there any other alternative or i am wrong at converting sprite to texture?
    please give me suggestions.
    Thanks
     
  6. yury_shumovsky

    yury_shumovsky

    Joined:
    Sep 25, 2019
    Posts:
    3
    Hi,

    I have faced with some trouble while rendering SVG (65k + mesh renderer)
    I use mesh renderer to handle 65k vertices limit (my svg has more, I use 32 bit settings for mesh).
    Code (CSharp):
    1. mesh.indexFormat = IndexFormat.UInt32;
    But for picture with more 65k vertices there is some artefact, please look at screenshot at attachment.
    (For picture with less 65k everything is ok).

    Do you have some idea how to fix it? Or maybe it is known issue and you have some information about ETA?
     

    Attached Files:

    Last edited: Jul 16, 2020
  7. Carrotpie

    Carrotpie

    Joined:
    Sep 25, 2014
    Posts:
    22
    What is the node to input Vector Sprite into the new Shader Graph? We want to use our vector files as filters for our web game. This would save us 30x memory, since instead of using regular pngs we could use vectors.
     
  8. EddieC

    EddieC

    Joined:
    Mar 11, 2014
    Posts:
    6
    I'm using Vectornator to make SVGs, and was getting a "Missing number at X in path specification" error when importing into Unity.
    After digging, it turns out that Vectornator uses '+' characters to separate the numbers in the path string. Unity only understands whitespace or commas.
    I changed the `SkipWhitespace` function to also skip over + characters, and now everything imports fine, but I don't know enough about SVG to know whether this will cause other problems. Will it? And is there any chance of getting the official package to understand '+' separated numbers?
     
  9. MiroslavNaumovski

    MiroslavNaumovski

    Joined:
    Aug 1, 2018
    Posts:
    3
    Hi everyone,

    I am working on big project where we already use vector graphics plugin - SVGImporter. Because of the lack of the support, we are looking for a better solution, and I got assignment to try out Unity Vector Graphics. My test scenario is following:

    * I load 120 distinct SVG assets from our server. I used the "Runtime loading" example to create vector sprites of them, and assign them to SpriteRenderers on scene. On scene, I have 1200 gameobjects with Sprite renderers. So each SVG asset is used 10 times. I do have sprite caching, so once I create a sprite using tesselator, I am reusing it next 9 times I need it.

    * I read your previous posts, and I saw that someone asked similar question. The question is - why is UnityVectorGraphics better? What has been improved etc. Answer was that it uses more GPU friendly meshes. It also enables creating vector graphics from runtime, which is very cool.

    I was able to show SVGs very quickly, and code was very intuitive. I like that I have ability to set up the tesselation options exactly how I need them. What was confusing to me were the results of the test I mentioned above:

    * FPS with SVGImporter was 90, with UnityVectorGraphics 30
    * UnityVectorGraphics had dynamic batching, SVGImporter didn't
    * UnityVectorGRaphics had less triangles for similar quality

    My main confusion is: How is possible that FPS is 3 times lower with this plugin when the stats are showing better numbers with it? I tested also on lower end hardware, results were similar, so SVGImporter offered 3 times better FPS. Just to mention: MSAA was NOT active during these tests. Could you plese give me a hint if I am missing something? Thanks in advance!
     
  10. GlynWilliams

    GlynWilliams

    Joined:
    Jan 15, 2019
    Posts:
    5
    In Unity 2020.1.01f...
    The package manager (with preview packages visible) is not showing the VectorGraphics package. Should I be using a different Unity build?
    Screenshot 2020-07-30 at 10.01.16.png
     
  11. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    509
  12. GlynWilliams

    GlynWilliams

    Joined:
    Jan 15, 2019
    Posts:
    5
    Thanks for the steer. Missed this.

    G.

    Aside: Having tried out vector graphics for a whole day, decided against using them for new project.
     
  13. Aka_ToolBuddy

    Aka_ToolBuddy

    Joined:
    Feb 25, 2014
    Posts:
    226
    Can you please share with us what made you take this decision?
     
  14. GlynWilliams

    GlynWilliams

    Joined:
    Jan 15, 2019
    Posts:
    5
    Sure.

    The title I am starting uses playing cards for which we have inherited vector art assets. The cards have a 4:3 aspect, which meant directly exported textures would not be powers-of-two. Hence my interest in using vector assets.

    So I spent some time converting assets into SVG then importing to Unity.
    However, the translated/imported assets had a set of minor conversion problems, some rounded corners did not export right/ A gradient asset clipped strangely.
    And using SVG sprites inside a rect-transform caused some very strange rendering errors. I think the svg sprites have some z-axis vertex offsets?

    So, I pivoted to using a different solution: A set of texture layers, a base sliced texture, a sliced mask, and bitmap elements.

    This took a bit more work, but the outcome looked better and did not fight back.
    I can see for some games, the vector approach might have benefits, but this layered solution worked better for me.
     
    Aka_ToolBuddy likes this.
  15. DustyScreen

    DustyScreen

    Joined:
    Apr 5, 2013
    Posts:
    12
    Is it possible to change the default settings, when importing a new .svg-file?

    Specifically I'm interested in having "Viewport Options" set to "Preserve Viewport", when importing a new .svg - is that possible? :)
     
  16. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
  17. DustyScreen

    DustyScreen

    Joined:
    Apr 5, 2013
    Posts:
    12
    Thanks a lot! The following seems to work like a charm:
    Code (CSharp):
    1. #if UNITY_EDITOR
    2. using UnityEditor;
    3. using Unity.VectorGraphics;
    4. using Unity.VectorGraphics.Editor;
    5.  
    6. class SVGPostprocessor : AssetPostprocessor
    7. {
    8.     void OnPreprocessAsset()
    9.     {
    10.         if (assetImporter.importSettingsMissing)
    11.         {
    12.             var svgImporter = assetImporter as SVGImporter;
    13.             if (svgImporter != null)
    14.             {
    15.                 svgImporter.ViewportOptions = ViewportOptions.PreserveViewport;
    16.             }
    17.         }
    18.     }
    19. }
    20. #endif
     
  18. DustyScreen

    DustyScreen

    Joined:
    Apr 5, 2013
    Posts:
    12
    Another question - this might be more of a shader/material-thing!

    I want to fade in and -out SVGs. So far I'm doing so by lerping from 0f to 1f on the alpha-value on the Color-property on the SpriteRenderer.

    The problem is that during the fade, every part of the SVG's mesh become transparent - so you can see shapes behind other shapes. See "How Color Alpha Works" on the illustration below.

    I totally get why it works this way. However, for my use case, I'd prefer, that the alpha-value on the Color-property was applied to the SVG as a whole - so you can't see shapes behind other shapes during fade. See "What I Ideally Want (faked)" below.
    SVGTransparencyDemo.png
    I don't know much about shader coding, but I hope it's possible to create a shader, that does the following:

    1) Render the SVG-mesh without using the alpha-value on the Color-property.
    2) Before showing the rendered SVG-mesh on the screen, make it semi-transparent according to the alpha-value on the Color-property.

    I don't know if this is possible. Also, if there's another approach, that does the trick, I'm all ears!

    However I would like to avoid rasterizing the SVG, as I need to support 4k resolutions.

    Thanks so much in advance! :)
     
  19. rejemy

    rejemy

    Joined:
    Nov 1, 2013
    Posts:
    9
    So after reading the thread on new Package Manager visibility, I have to ask if Vector Graphics falls under the "not being developed any more" category? It's currently working for me and doing everything I need, and I plan on shipping with it, even if it remains a preview package, but it would be nice to hear from Unity if this package is abandoned.
     
    JanSelchow likes this.
  20. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    This is a limitation of how we render vector sprites. The problem is that we are basically rendering meshes, so that any transparency will be applied on each triangle blended together.

    Note that our way of applying transparency diverges from the SVG standard (which describes what you're looking for):
    https://www.w3.org/TR/SVG11/render.html#ClippingMaskingObjectOpacity

    To follow the above requirement, we would have to first render the group of elements in an intermediate buffer before doing the blend operation. There are technical and performance consequences in doing so, and we aren't equipped to handle this in an efficient manner at this point.

    I can't think of another alternative unfortunately.

    Best of luck!
     
    Last edited: Aug 13, 2020
  21. Cascho01

    Cascho01

    Joined:
    Mar 19, 2010
    Posts:
    1,199
    Non text compatibility:
    Did anyone already try to parse through the svg and instantiate tmpro-text at given matrices?
     
    Last edited: Aug 14, 2020
  22. benoitd_unity

    benoitd_unity

    Unity Technologies

    Joined:
    Jan 2, 2018
    Posts:
    226
    Hi rejemy,

    We have not abandoned the Vector Graphics, we just had to pause development in order to focus on other priorities. We should give it some attention soon, with the entent of making it production ready for 2021.
     
    Elmstrom and rejemy like this.
  23. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    First time I hear about this idea. I think it should work under the assumption that the text elements always appear above other shapes. Worth a try if this works for you!
     
  24. Cascho01

    Cascho01

    Joined:
    Mar 19, 2010
    Posts:
    1,199
    I will try if there´s no other solution available.
    What about UnityTech to implement this?
     
  25. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    Hard to tell what is going on. From my understanding, SVG should work on a Galaxy A3.The best is always to file a bug with a simple project that reproduces the issue (Help > Report a Bug...)
     
  26. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    Vector sprites with gradients require a texture to store the gradient data. I would guess that texture is missing in runtime.
     
  27. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    Your solution should work. If your original SVG has any gradients/textures applied to it, make sure to use the "Unlit/VectorGradient" instead of "Unlit/Vector". This may be the problem.
     
  28. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    It doesn't seem like the SVG standard allows the '+' sign as a valid space character, so it's going to be a hard sell for us to support it. Might be worth having a look at the Vectormator export options to see if you can avoid this situation altogether.
     
  29. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    The SVG package internally uses 16bit indices, so changing the mesh type will be of little help. This decision was made around the limits of sprite assets.

    We have plans to work around this issue in the future, such as importing in separate sprites/meshes.
     
  30. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    Hard to explain these differences. I know next to nothing about the SVGImporter, so I will be of little help. If the SVGImporter exports meshes instead of sprites, this could be a reason for performance differences. Otherwise, we would have to profile to know the exact reason behind this.
     
  31. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    This solution works for the specific use-case where you want TMP gameobject above every other SVG shapes. If we implement <text> support, we have to make it work in the general use-case where text may be partially hidden or covered by semi-transparent shapes. Also, we would ideally render text as part of the same materials to avoid batch breaks.

    So, in the short term, the available solutions are limited.
     
  32. DustyScreen

    DustyScreen

    Joined:
    Apr 5, 2013
    Posts:
    12
    I'm trying to create a tool, that takes an SVG and disassembles it into one SVG for each group in it. I have this working quite well.

    The problem is to position the "child SVGs" correctly in the scene.

    If I use the ViewportOptions.PreserveViewport setting for both parent and child GameObjects, they are positioned correctly. But it comes with downsides:
    - The "bounding box" of the sprite is too big - making it hard to work with.
    - The pivot is off. If I want to change the pivot of the sprite, I'll have to manually position the child afterward - and then the PreserveViewport-advantage is lost.

    So I'd prefer to used the ViewportOptions.DontPreserve setting over ViewportOptions.PreserveViewport.

    To achieve this I add a button to the SpriteRenderer, that should position the child GameObject correctly (relative to its parent).

    My idea is to:
    - Import the SVG with ViewportOptions.PreserveViewport
    - Sample the first vertex
    - Import the SVG with ViewportOptions.DontPreserve
    - Sample the first vertex
    - Calculate the difference in position from the two samples and move the GameObject on that basis (also taking SpriteRenderer's pivot and the transforms rotation and scale into account)

    So first thing: Is this a decent approach or is there a better way to do it?

    If thats the case, I've hit a roadblock, when trying to import the SVG twice in one method call. I have the following code, but the second import don't seem to trigger:

    Code (CSharp):
    1.  
    2. #if UNITY_EDITOR
    3. using UnityEngine;
    4. using UnityEditor;
    5.  
    6. [CustomEditor (typeof (SpriteRenderer) ) ]
    7. public class SpriteRendererInspector : Editor
    8. {
    9.     public override void OnInspectorGUI()
    10.     {
    11.         DrawDefaultInspector();
    12.  
    13.         if (GUILayout.Button ("Position SVG like 'PreserveViewport'") )
    14.         {
    15.             var spriteRenderer = (SpriteRenderer) target;
    16.             var sprite = spriteRenderer.sprite;
    17.             string path = AssetDatabase.GetAssetPath (sprite);
    18.             var svgImporter = (Unity.VectorGraphics.Editor.SVGImporter) AssetImporter.GetAtPath (path);
    19.  
    20.             svgImporter.ViewportOptions = Unity.VectorGraphics.ViewportOptions.PreserveViewport;
    21.             EditorUtility.SetDirty (svgImporter);
    22.             svgImporter.SaveAndReimport();
    23.             Debug.Log ("First vertex position with 'PreserveViewport': " + sprite.vertices[ 0 ]);
    24.  
    25.             svgImporter.ViewportOptions = Unity.VectorGraphics.ViewportOptions.DontPreserve; //This doesn't work
    26.             EditorUtility.SetDirty (svgImporter); //This doesn't work
    27.             svgImporter.SaveAndReimport(); //This doesn't work
    28.             Debug.Log ("First vertex position with 'DontPreserve': " + sprite.vertices[ 0 ]);
    29.         }
    30.     }
    31. }
    32. #endif
    33.  
    I probably have to call something in between...? - any help would be most valued! :)
     
  33. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    I think this could work, but this may not be very robust. I don't think there's a guarantee that the same geometry will be generated when changing the viewport option, so you may end up comparing unrelated vertices. That said, I don't know why changing the importer setting + doing a reimport isn't working for you.

    An alternative way of solving your problem would be to look at the transform of the child shapes. If you can get your hand on the scene node of the group, you should be able to get the actual transform that was used and apply this to the game object.
     
  34. DustyScreen

    DustyScreen

    Joined:
    Apr 5, 2013
    Posts:
    12
    I would really like to try this approach - but have no idea how to do it. It would be so helpful and valued if you maybe could post a few lines of code on how to do it... just to get me started...
     
  35. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    If you can assign an id and transform to the groups that you want to extract, you can fetch the scene nodes directly from those IDs. Here's a simple example:

    Code (CSharp):
    1.         string svg =
    2.             @"<svg xmlns=""http://www.w3.org/2000/svg"" width=""200"" height=""100"">
    3.                <g id=""group0"" transform=""translate(10 10)"">
    4.                    <rect x=""5"" y=""10"" width=""100"" height=""20"" />
    5.                </g>
    6.            </svg>";
    7.  
    8.         var sceneInfo = SVGParser.ImportSVG(new StringReader(svg));
    9.         var group = sceneInfo.NodeIDs["group0"];
    10.         Debug.Log(group.Transform); // Will output a translation by (10,10) matrix
    11.  
    If your groups don't have any id, you'll have to crawl the node hierarchy "manually" using the sceneInfo.scene.Root.Children, etc.

    EDIT: I realize that this won't work if your hierarchy isn't using transform attributes. If the location of the shapes is driven by the coordinates themselves, the transform property will always return the identity matrix.

    An alternative would be to call VectorUtils.SceneNodeBounds(node) instead, this should give you the right location regardless of the transform.
     
    Last edited: Aug 19, 2020
  36. Grahammmm

    Grahammmm

    Joined:
    Jun 4, 2013
    Posts:
    11
    Hello, I would like to find a way to sample the color of an image very precisely. It seems that there should be a way to find the topmost element and it's color for some point in the svg image without resorting to rasterizing it. I am at a loss on how this could be done. Any help would be appreciated.

    Thanks.
     
  37. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    If you parse the SVG content, you'll get a Scene object back. The scene contains all the shape hierarchy that will be stored in a back-to-front order. Testing for the color of a point over that scene might be challenging.

    However, you can tessellate the scene (VectorUtils.TessellateScene) which will give you a big list of triangles. You could do a point-in-triangle test on these triangles to get the top-most shape.
     
  38. DustyScreen

    DustyScreen

    Joined:
    Apr 5, 2013
    Posts:
    12
    Thanks a lot for the answer! I'd like to try this alternative, but I'm not sure how to do it. Hints are most welcome :)

    On another note, I figured out how to work around this one:

    If I do the following between the first and second setting block, it works:

    Code (CSharp):
    1.             svgImporter = (Unity.VectorGraphics.Editor.SVGImporter) AssetImporter.GetAtPath (path);
    2.  
    Dunno why - it might loose the ref on svgImporter.SaveAndReimport() or something.

    However I've reached a new problem. When I switch to ViewportOptions.PreserveViewport for big/complex svgs, I get the following error:

    Vertex array is too large. A sprite mesh may not have more than 65535 vertices.


    I don't understand this - why does the vertex count increase, when having the ViewportOptions.PreserveViewport option on?
     
  39. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    Preserving the viewport causes the importer to clip the SVG content inside the viewport rect. The clipping operation may generate more vertices if the content goes outside of the viewport rect.
     
  40. DustyScreen

    DustyScreen

    Joined:
    Apr 5, 2013
    Posts:
    12
    Thanks for the very swift answer! So there's no way I can get the positioning for vertices from PreserveViewport-mode without the clipping...?
     
  41. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    The clipping should only occur if the SVG content spills outside the viewport. If you can adjust the viewport to contain every shapes, you should be good to go.

    Another thing to consider, the automatic tessellation settings are using the viewport size to compute the tessellation quality, so that may also explain why the number of vertices was different when using that option. If you can use fixed tessellation settings, that should help as well.
     
  42. SakshiChhabra92

    SakshiChhabra92

    Joined:
    Jul 3, 2020
    Posts:
    2
    When i am trying to build for WebGL or MacOS, this code is not working with any of the platform build..
    i have tried to build this code with WebGl and MacOS. But this code is not working with these platform. this is only working in unity Editor.
    So can you please help me to resolve this issue?
     
  43. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    Please file a bug with a example project (Help > Report a Bug...), we should be able to help.
     
  44. yumeng1022

    yumeng1022

    Joined:
    Dec 4, 2019
    Posts:
    14
    Hi mcoted3d,
    Does Vector Graphics support Projection/Decal onto a 3D Model ?
    if not , any plan to support it ?
     
  45. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    Not at this time.

    Doing projected SVG assets is basically the same as projecting a flast mesh onto the scene. Don't forget that SVG sprites are tessellated triangles, not a texture.

    Of course, if you import your SVG asset as a texture or textured sprite, you should be able to project it (but it won't have an infinite resolution).
     
  46. JamesArndt

    JamesArndt

    Joined:
    Dec 1, 2009
    Posts:
    2,846
    I am attempting to change the color of the sprite renderer for my SVG illustration, but it's doing nothing. Is the color property just exposed for another reason, or can it be used to change the color in some other way? I need to "mask" off parts of my SVG so that I can overlay a color on those spots (allow for color palette changing).
     
  47. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    It should work for as long as the material used has "Enable GPU Instancing" checked. Without instancing, the renderer's color will try to use the vertices' color channel, which is reserved for the shape colors by the SVG importer.
     
    JamesArndt likes this.
  48. JamesArndt

    JamesArndt

    Joined:
    Dec 1, 2009
    Posts:
    2,846
    Ah ha it does work when I create a unique/new material for the sprite and set the shader to Vector Gradient. Oh boy, but now I realize I cannot simply plug in a texture map to "mask" off areas for coloring. The svg is not using a texture map for the diffuse, but rather a gradient atlas. I have no idea how to go about masking pieces of the svg off.
     
  49. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    546
    Yes, it's not a texture-based sprite. You may have some luck with sprite masks, which are using the stencil buffer for masking.
     
    JamesArndt likes this.
unityunity