Search Unity

  1. Unity 2019.1 beta is now available.
    Dismiss Notice
  2. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  3. We're looking for insight from anyone who has experience with game testing to help us better Unity. Take our survey here. If chosen to participate you'll be entered into a sweepstake to win an Amazon gift card.
    Dismiss Notice
  4. Want to provide direct feedback to the Unity team? Join the Unity Advisory Panel.
    Dismiss Notice
  5. Unity 2018.3 is now released.
    Dismiss Notice
  6. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice

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:
    7
    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:
    99
    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?