Search Unity

SVG Importer | Vector Graphics | Unity UI Supported [RELEASED]

Discussion in 'Assets and Asset Store' started by Jaroslav-Stehlik, May 4, 2015.

  1. Shahab-Mirza

    Shahab-Mirza

    Joined:
    Aug 23, 2016
    Posts:
    8
    I am waiting the colouring book tutorial and If it is available then kindly share the link . It has been more than three days but did not get the idea how to colour SVG. Started feeling hopeless but now feeling hopeful after seeing your comment. Thanks !
     
  2. agursky

    agursky

    Joined:
    Oct 10, 2018
    Posts:
    2
    Hello everyone. Svg (code under spoiler) was created in Adobe Illustrator, exported from Affinity Designer. When importing into unity3d, irregular polygons are created (Mesh is drawn very far to the side). What could be the problem?

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="100%" height="100%" viewBox="0 0 42 76" 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-linejoin:round;stroke-miterlimit:1.41421;">
    <g transform="matrix(1,0,0,1,-23.002,-1.54)">
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M166.39,257.46L166.57,247.56L166.74,237.67L163.47,237.61C163.87,243.21 164.16,249.71 164.47,257.42L166.39,257.46Z" style="fill:rgb(229,163,31);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M178.75,237.88L172.75,237.78L172.4,257.56L178.4,257.67L178.58,247.78L178.58,247.77L178.75,237.88Z" style="fill:rgb(229,163,31);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M184.41,257.78L190.41,257.88L190.59,247.99L190.58,247.99L190.76,238.1L184.76,237.99L184.58,247.88L184.41,257.78Z" style="fill:rgb(229,163,31);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M167.1,217.88L161.1,217.77L161.1,219.06C162.378,225.172 163.181,231.374 163.5,237.61L166.77,237.61L167.1,217.88Z" style="fill:rgb(211,130,32);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M172.75,237.77L178.75,237.88L179.11,218.09L173.11,217.99L172.75,237.77Z" style="fill:rgb(211,130,32);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M172.75,237.77L172.93,227.88L166.92,227.77L166.75,237.66L166.75,237.67L166.57,247.56L172.57,247.66L172.75,237.77Z" style="fill:rgb(216,146,22);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M184.76,238L190.76,238.1L191.11,218.32L185.11,218.21L184.76,238Z" style="fill:rgb(211,130,32);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M184.93,228.09L178.93,227.99L178.75,237.88L178.76,237.88L178.58,247.77L184.58,247.88L184.76,237.99L184.93,228.09Z" style="fill:rgb(216,146,22);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M167.28,207.99L167.27,207.99L167.45,198.09L161.45,197.99L161.09,217.77L167.1,217.88L167.28,207.99Z" style="fill:rgb(216,146,22);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M173.1,217.99L179.11,218.09L179.28,208.2L179.46,198.31L173.46,198.2L173.28,208.09L173.1,217.99Z" style="fill:rgb(216,146,22);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M166.92,227.77L172.92,227.88L173.27,208.09L167.27,207.99L166.92,227.77Z" style="fill:rgb(229,163,31);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M191.47,198.52L185.46,198.42L185.29,208.31L185.11,218.2L191.12,218.31L191.29,208.41L191.47,198.52Z" style="fill:rgb(216,146,22);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M185.29,208.31L179.29,208.2L178.93,228L184.93,228.1L185.29,208.31Z" style="fill:rgb(229,163,31);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M167.28,207.99L173.28,208.09L173.45,198.2L173.63,188.31L167.63,188.2L167.45,198.09L167.28,207.99Z" style="fill:rgb(211,130,32);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M179.28,208.2L185.28,208.31L185.46,198.41L185.64,188.52L179.63,188.41L179.46,198.31L179.28,208.2Z" style="fill:rgb(211,130,32);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M155.32,204.74L155.44,197.88L150.11,197.78C152.052,199.939 153.796,202.268 155.32,204.74Z" style="fill:rgb(216,146,22);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M157,207.8C158.805,211.369 160.149,215.152 161,219.06L161.2,207.88L157,207.8Z" style="fill:rgb(229,163,31);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-126.983,-180.605)">
    <path d="M155.44,197.88L155.32,204.75C155.94,205.75 156.51,206.75 157.04,207.8L161.27,207.88L161.73,182.27L155.73,182.59L155.44,197.88Z" style="fill:rgb(211,130,32);fill-rule:nonzero;stroke:black;stroke-width:0.25px;"/>
    </g>
    </g>
    </svg>
     

    Attached Files:

  3. agursky

    agursky

    Joined:
    Oct 10, 2018
    Posts:
    2
    I'll fixed (add one line after line 500 in SVGLineUtils.cs):

    Code (CSharp):
    1.  
    2. points.RemoveAll(p => (float.IsNaN(p.x) || float.IsNaN(p.y)));
    3.  
     
  4. NovaDynamics

    NovaDynamics

    Joined:
    Sep 6, 2017
    Posts:
    17
    Hey guys, I'm having issues with displaying SVG images as UI on a orthographic camera. When the 'size' on the camera is set low, SVG UI elements look great. But when I zoom out a ways (setting the size high on the camera), the images become very blurry. Any thoughts?
    Note that though the line appears blurred in the game view, it is normal looking in the scene view.

    Line zoomed in.JPG Line zoomed out.JPG
     
  5. NovaDynamics

    NovaDynamics

    Joined:
    Sep 6, 2017
    Posts:
    17
    Line code, if anyone needs it:
    Code (CSharp):
    1. <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.94 15.12">
    2. <defs><style>.cls-1{fill:#fff;}</style></defs>
    3. <title>Simple Line</title>
    4.   <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
    5. </svg>
     
  6. AlexHell

    AlexHell

    Joined:
    Oct 2, 2014
    Posts:
    160
    This plugin have configurable VPM quality, for vertex count. It have not infinite resolution, but only in specific borders.
     
  7. NovaDynamics

    NovaDynamics

    Joined:
    Sep 6, 2017
    Posts:
    17
    The quality setting when importing the SVG? I have just tried setting that to 100000 instead of the default 1000, with absolutely no effect.
     
  8. NovaDynamics

    NovaDynamics

    Joined:
    Sep 6, 2017
    Posts:
    17
    Fixed! Setting the Canvas to "Screen Space - Camera" Fixes the burring
     
  9. bozmonster

    bozmonster

    Joined:
    Mar 15, 2015
    Posts:
    1
    Hi SVG Importer Team,


    I'm using your library (love it) to render the response from a API call to a NodeJS API that returns an SVG.

    My HTTP response arrives in Unity correctly, I know because it "sort of" renders it and the SVG string received is the same that's sent.

    My problem is that if I open the same SVG string in HTML, it renders the Style attribute, appended to the end of the SVG like so.

    Code (HTML):
    1.  
    2.  
    3.    ....
    4.     <text class="region" x="-230.1574963730429" y="-217.74453178368387" style="font-size: 40; text-anchor: middle;">Qlesqoqsav</text>
    5.     <text class="region" x="154.34205943497943" y="239.65855492881394" style="font-size: 40; text-anchor: middle;">Qreltlor</text>
    6.     <style>    path, line {        fill: none;        stroke: black;        stroke-linecap: round;    }    .field {        stroke: none;        fill-opacity: 1.0;    }    .slope {        stroke-width: 1;    }    .river {        stroke-width: 2;    }    .coast {        stroke-width: 4;    }    .border {        stroke-width: 5;        stroke-dasharray: 4,4;        stroke-linecap: butt;    }    text {        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;        color: black;        stroke: white;        stroke-width: 5;        stroke-linejoin: round;        paint-order: stroke;    }    text.region {        stroke-width:10;        font-variant: small-caps;    }    svg {        float: right;        background-color: white;    }</style>
    7. </svg>
    When it arrives into Unity, I load the SVG with this code, it renders the SVG, but without the styles applied.

    Code (CSharp):
    1.  
    2. void OnRequestFinished(HTTPRequest request, HTTPResponse response)
    3.     {
    4.         Debug.Log("Request Finished! Text received: ");// + response.DataAsText.ToString());
    5.         if (svgAsset != null)
    6.         {
    7.             Destroy(svgAsset);
    8.         }
    9.  
    10.  //checking the style element is present
    11.         String suffix = response.DataAsText.Substring(response.DataAsText.Length - 200);
    12.         Debug.Log(suffix);
    13.  
    14. //load svg
    15.         svgAsset = SVGAsset.Load(response.DataAsText);
    16.         preview.vectorGraphics = svgAsset;
    17.     }
    The second Debug prints some of the CSS style, so it's clearly retained in the HTTP response, but I can't understand why it doesn't render.

    In an earlier post here, I saw you using styles within a defs element, however it's recommended that style is nested within the root element, does it have to be nested in defs to be loaded by your library? Is it possible to apply the CSS on client side through your library?
     
  10. Kiupe

    Kiupe

    Joined:
    Feb 1, 2013
    Posts:
    524
    Hello,

    I'm trying to export my project to Windows store but the SVG Specular shader returns en error: svg_importer.PNG

    I really have no idea how to fix that so a little help would be welcome.

    Thanks
     
  11. jasonrbrock

    jasonrbrock

    Joined:
    May 22, 2019
    Posts:
    2
    Hi all. I too am experiencing issues with Unity 2018 and this plugin.
    Has anyone had any success placing imported SVG's onto UI Panels in "Screen Space - Overlay" mode?
     
  12. tosiabunio

    tosiabunio

    Joined:
    Jun 29, 2010
    Posts:
    107
    This plugin is pretty much dead. I've already given up any hopes and started moving hundreds of assets to the official Vector Graphics Package.
     
    shaneparsons likes this.
  13. firstuser

    firstuser

    Joined:
    May 5, 2016
    Posts:
    11
    100% dead plugin, waste of money
     
  14. MD_Reptile

    MD_Reptile

    Joined:
    Jan 19, 2012
    Posts:
    2,585
    Is there an open source collection somewhere? I wouldn't consider an asset "dead" unless its been left closed source and abandoned. Is that the case here?

    If so - money making opportunity is what this is :p

    EDIT:
    I contacted the author through the website. If they will allow me to use the code I'll try and rewrite it for the latest unity, and release it free here. No telling if I will ever hear back!
     
    Last edited: May 31, 2019
  15. firstuser

    firstuser

    Joined:
    May 5, 2016
    Posts:
    11
    It's not open source as far as licensing goes but it is not a closed source asset. It's dead because it's not being actively maintained anymore (abandoned) and yet ... unfortunately is still for sale :\

    I think he was trying to sell the asset to someone else all-together but it seems that never happened. Maybe at this point he'd be willing to give it away for free or for a nominal price. Who knows if it's even worth the effort long term if Unity can bring solid official SVG support.
     
  16. royvaneijndhoven

    royvaneijndhoven

    Joined:
    Jun 1, 2017
    Posts:
    59
    We just noticed that the Asset Store page is removed and says that the plugin has been deprecated. Not sure how long this has been but it is something we all knew was coming, sadly.

    It seems that the Unity Vector Graphics package has grown quite a bit and we'll probably start looking into that one hoping that Unity will support the package long enough.
     
    tosiabunio likes this.
  17. freejsf

    freejsf

    Joined:
    Aug 24, 2015
    Posts:
    4
    Hey everyone,
    we have been working with the SVG Importer for more than a year and created a lot of assets that are now used in the game. Getting closer to release now, we realized the growing incompatibilities between Unity and the SVG-Importer and that we probably can not ship this way.
    So here is my question:
    Are there more people out there who ran into similar problems and did anyone worked out a good process or maybe even a tool to move to the Unity-SVG-package?
     
  18. AlexHell

    AlexHell

    Joined:
    Oct 2, 2014
    Posts:
    160
    You (and other peoples) can ask unity-devs to write converter tool, as I understand this tool must rename old assets to new assets (extension) and may be change inner structure of asset, anyway the asset is the triangulated mesh on disk (from SVG) and can be rendered on scene with appropriate MeshRenderer and shader, also tool must change shader from old to new - when asset is used on the scene
     
    freejsf and jocyf like this.
  19. freejsf

    freejsf

    Joined:
    Aug 24, 2015
    Posts:
    4
    Thanks Alex! I looked into it and it looks like "changing the inner structure of the asset" means it would need to be re-imported, which would be a desaster for us, because all referencess would break and tons of work would need to be re-done.
    So I am wondering if the other way - actually getting last version of SVG Importer to run with Unity 2018.x wouldn't be the way to go instead.
    Did anyone here using the SVG Importer and compile (and hopefully ship) for consoles?
     
  20. AlexHell

    AlexHell

    Joined:
    Oct 2, 2014
    Posts:
    160
    @freejsf, I write "can ask unity-devs to write converter tool", but not to manually replace references in the scenes or manually change file structures
    I can't write it myself now, but I 100% sure it can be done with auto converter
     
  21. tinyrob

    tinyrob

    Joined:
    Nov 29, 2016
    Posts:
    3
    We've been using it to build for iOS without too many issues, using Unity 2019.2.x versions. The only issue we've had so far was with SVGImage trying to set canvas.additionalShaderChannels and resulting it weird positioning. We just commented out the 2 places that tried to set it and so far so good.
     
    jocyf likes this.
  22. jocyf

    jocyf

    Joined:
    Jan 30, 2007
    Posts:
    247
    Can share with us what script you modified (I suppose SVGImage.cs) and the precise lines to be commented?