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.

[RELEASED] Simply SVG - Vector Graphics and Unity Live happily ever after

Discussion in 'Assets and Asset Store' started by tkoknordic, Sep 28, 2015.

  1. AlexHell


    Oct 2, 2014
    We are finding a tool, which can read svg into inner svg-model in ram (not just convert to mesh and texture), also there is a need to manipulate svg at runtime, for example: change scale (from 1 to 10000), blending and etc, without artefacts and quality lost, like adobe flash. Does this tool do this?
    And how about performance on editing svg and rendering it at runtime (Does the 3d acceleration present? Will there be any lags?)
  2. stimul


    Nov 28, 2013
    Can i extrude svg lines (to make 3D objects from SVG)?
  3. inertiadesigns


    Oct 24, 2014
    ** bump ** Anyone out there that can answer this???
  4. inertiadesigns


    Oct 24, 2014
    I would like to know the same... is there a way to import them as a 3d mesh so they can be extruded? that would be extremely useful.
  5. tkoknordic


    Jan 31, 2013
    Hi everybody! For some reason I haven't got any alerts from this thread and thus wasn't aware of all these questions. I will try to resolve them now.

    Simply SVG supports svg files. It does not import any other types including pdfs.

    Simply svg doesn't support Text elements as text but if you convert them into outlined shape then Simply SVG can generate the mesh.
    To convert text to outlines goto Select > Select All. Then use Type > Create Outlines.

    2. + 3. Could you send me a private message with the actual 1MB svg file and I can test it out for you?

    Simply SVG comes with one very optimized and light shader. It doesn't support shadows. However, with other shaders you should get shadows working (more discussion about vertex colors and shadows in this topic

    Generating mesh is a heavy opration, so you should do it when your game is paused. Mesh will always be a rough estimation of your shape. Triangles (in mesh and gpu) can't present a smooth curve, unless you have one vertex for every pixel but when zooming in you would need unlimited vertices.

    Simply SVG generates 2d meshes. It would be quite easy to extrude one 2D mesh to 3D and you could use the mesh that Simply SVG generates as a starting point.

    I'm very sorry about the delay and thanks for the one who notified me via email.
  6. IIporpammep


    Aug 16, 2015
    Hello I'm interested in your extension, could you show me how my svg would look in unity?
    Code (CSharp):
    1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    2. <!-- Created with Inkscape ( -->
    4. <svg
    5.    xmlns:dc=""
    6.    xmlns:cc=""
    7.    xmlns:rdf=""
    8.    xmlns:svg=""
    9.    xmlns=""
    10.    xmlns:sodipodi=""
    11.    xmlns:inkscape=""
    12.    width="210mm"
    13.    height="297mm"
    14.    viewBox="0 0 744.09448819 1052.3622047"
    15.    id="svg2"
    16.    version="1.1"
    17.    inkscape:version="0.91 r13725"
    18.    sodipodi:docname="WeaponItemBulletsTriple.svg">
    19.   <defs
    20.      id="defs4" />
    21.   <sodipodi:namedview
    22.      id="base"
    23.      pagecolor="#000000"
    24.      bordercolor="#666666"
    25.      borderopacity="1.0"
    26.      inkscape:pageopacity="1"
    27.      inkscape:pageshadow="2"
    28.      inkscape:zoom="0.98994949"
    29.      inkscape:cx="232.34194"
    30.      inkscape:cy="543.51978"
    31.      inkscape:document-units="px"
    32.      inkscape:current-layer="layer1"
    33.      showgrid="false"
    34.      inkscape:window-width="1920"
    35.      inkscape:window-height="1003"
    36.      inkscape:window-x="-9"
    37.      inkscape:window-y="-9"
    38.      inkscape:window-maximized="1" />
    39.   <metadata
    40.      id="metadata7">
    41.     <rdf:RDF>
    42.       <cc:Work
    43.          rdf:about="">
    44.         <dc:format>image/svg+xml</dc:format>
    45.         <dc:type
    46.            rdf:resource="" />
    47.         <dc:title></dc:title>
    48.       </cc:Work>
    49.     </rdf:RDF>
    50.   </metadata>
    51.   <g
    52.      inkscape:label="Layer 1"
    53.      inkscape:groupmode="layer"
    54.      id="layer1">
    55.     <g
    56.        id="g4148">
    57.       <circle
    58.          r="224.28572"
    59.          cy="522.36218"
    60.          cx="342.85715"
    61.          id="path4684"
    62.          style="fill:none;fill-opacity:0;fill-rule:nonzero;stroke:#ffffff;stroke-width:10;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    63.       <path
    64.          inkscape:connector-curvature="0"
    65.          id="path4686"
    66.          d="M 202.85714,505.93363 230,578.79077 267.14286,535.93363 Z"
    67.          style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    68.       <path
    69.          inkscape:connector-curvature="0"
    70.          id="path4686-0"
    71.          d="m 327.14286,376.64792 27.14286,72.85714 37.14286,-42.85714 z"
    72.          style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    73.       <path
    74.          inkscape:connector-curvature="0"
    75.          id="path4686-6"
    76.          d="m 263.57143,435.93364 27.14286,72.85714 37.14286,-42.85714 z"
    77.          style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    78.       <path
    79.          d="m -218.5651,507.58069 a 12.586069,173.87549 0 0 1 -6.31618,150.76472 12.586069,173.87549 0 0 1 -12.60912,-0.55442 12.586069,173.87549 0 0 1 -6.24658,-151.31709 l 12.58581,1.10679 z"
    80.          sodipodi:end="3.1479581"
    81.          sodipodi:start="0"
    82.          sodipodi:ry="173.87549"
    83.          sodipodi:rx="12.586069"
    84.          sodipodi:cy="507.58069"
    85.          sodipodi:cx="-231.15117"
    86.          sodipodi:type="arc"
    87.          transform="matrix(0.55452582,-0.83216652,0.71636693,0.69772374,0,0)"
    88.          id="path4713"
    89.          style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:5.26485491;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    90.       <path
    91.          d="m -122.40954,528.37537 a 12.586069,173.87549 0 0 1 -6.31617,150.76471 12.586069,173.87549 0 0 1 -12.60913,-0.55441 12.586069,173.87549 0 0 1 -6.24658,-151.31709 l 12.58581,1.10679 z"
    92.          sodipodi:end="3.1479581"
    93.          sodipodi:start="0"
    94.          sodipodi:ry="173.87549"
    95.          sodipodi:rx="12.586069"
    96.          sodipodi:cy="528.37537"
    97.          sodipodi:cx="-134.99561"
    98.          sodipodi:type="arc"
    99.          transform="matrix(0.55452582,-0.83216652,0.71636693,0.69772374,0,0)"
    100.          id="path4713-4"
    101.          style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:5.26485491;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    102.       <path
    103.          d="m -33.099325,551.9718 a 12.586069,173.87549 0 0 1 -6.316176,150.76472 12.586069,173.87549 0 0 1 -12.609126,-0.55441 12.586069,173.87549 0 0 1 -6.246581,-151.3171 l 12.585814,1.10679 z"
    104.          sodipodi:end="3.1479581"
    105.          sodipodi:start="0"
    106.          sodipodi:ry="173.87549"
    107.          sodipodi:rx="12.586069"
    108.          sodipodi:cy="551.9718"
    109.          sodipodi:cx="-45.685394"
    110.          sodipodi:type="arc"
    111.          transform="matrix(0.55452582,-0.83216652,0.71636693,0.69772374,0,0)"
    112.          id="path4713-3"
    113.          style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:5.26485491;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    114.     </g>
    115.   </g>
    116. </svg>
  7. TahoeDaddio


    Jan 26, 2017

    I purchased this without noticing that it hasnt had any updates in over a year and didnt mention supporting the latest unity and inkscape. I am using unity 5.5 and inkscape 0.92 and am unable to get the plugin to work using a pretty simple SVG file. After exporting the svg using the settings in the pdf doc, unity throws an exception converting the coordinates to float. I was able to debug the script and determined that inkscape is exporting cooridnates in scientifc notation with an "e" and that the plugin does not support this. I verified that I am exporting with svg file with only 3 signific digits and searched for an inkscape solution but none exits.

    Are there any updates planned to support this?

    Can I get a refund if not?
  8. mitchmeyer1


    Sep 19, 2016

    Hows the performance using this bad boy vs PNGs? Does it affect frame rate or memory?

  9. Nonym


    Oct 18, 2014
    I'm interested in this asset.
    Is there a problem using Unity 5.6?
    Last edited: Apr 19, 2017
  10. DavidArts


    Jan 19, 2017
    Have you got a chance to try it recently? I really don't know if buy THIS or SVG importer... As I'm totally new in Unity I need to import vectors for my 2D platformer ....trees moutains rocks...
  11. TokyoDan


    Jun 16, 2012
    Just getting the SVGs into your game is one thing, the format they become after they are imported is another thing. I went though this a year and a half ago and bought at least 3 of the various SVG handling assets on the asset store. One SVG asset importer would do some things but not other things and work with Puppet2D/Anima2D in some ways but not in others. (Anima2D, which Unity acquired, is now Unity Anima2D and you can get for free now. I paid a lot of money for it. Damn!).

    The best way is to get the SVG assets converted to some format native to Unity as early as possible in your pipeline. It's been a while but I think I finally went with SVG to PNG:!/content/29298

    SVG to PNG is the most simple solution and it gave me the least trouble when working with Puppet2D/Anima2D (now Unity Anima2D). But it's been a year and a half. Many things have changed.
    Nonym likes this.
  12. DavidArts


    Jan 19, 2017
    mmm..tha's a good point.... In the meantime I decided to buy SVG importer and actually it really imported all my SVG vectors just fine. About what they become after they're imported I honestly don't knowl.. I'm very new to Unity and I just need to use vectors to create the background of my platformer without have to worries about the loss of quality during the stretching/scaling of images. Actually It seems to work very well... expecially if you do not use any gradient..
    I still have to test deeply on the device to check peformance in ios... hope it will not disappoint me...
    Nonym likes this.
  13. SrXoo


    Nov 8, 2016

    We have aquired this plugin recently and we have a critical problem with it.

    We are creating an app for both Android and iOS and on iPad and Tablets all assets are showing like they aren't vector graphics at all, instead simple images with low resolution.

    The next picture shows a demo asset on a 10'' tablet.

    We can't continue developing our App with this level of detail. So I am asking for your help.

    Thanks and sorry for my english level, it isn't my first language.
  14. BouncedPhysical


    Jul 16, 2016
    Wow that's really awesome!

    You gave more power to Unity 2D!
    tkoknordic likes this.
  15. mostlytigerproof


    Jan 8, 2014
    Are the generated polygon colliders strictly convex? ie. Would I be able to subtract a cave from a filled region in my SVG editor and then have collision for that in Unity?
  16. Behnamjef


    Jan 22, 2016
    I purchased your plugin and I have a problem.when I change the graphicMesh from the code it doesn't work unless I click on gameobject in the hierarchy, then it's rendered new mesh!!!what should I do to fix it?
  17. JoeSig


    Apr 13, 2015
    Hey guys. Tkoknordic updated this package about 2 weeks ago so it is not dead. There are a few strange things though. When you load the svg into a canvas the material property is hidden, you can reach it via script or debug inspector. I'm sure you could also expose the material as public, haven't tried it yet though.

    I am using the google material design icons in svg format and they import as solid black instead of solid white. When I load these svgs in a standalone editor they are white which is strange. This is not really an issue when you override the material with something like unlit/color.

    It would be nice if we could increase the quality past 100. It would also be nice if we could 9slice the svgs. The other major svg importer on the asset store has both of these features and slightly makes me regret my purchase. On the other hand this asset is very clean and simple, so I will hope for these improvements in a future update and possibly try to hack in the material and quality changes myself. I'm sure setting up 9slice would be pretty difficult though.
  18. tkoknordic


    Jan 31, 2013
    That should only be a problem with example scene where I have manually added material at some point. There is no material set when you create new scene, new canvas and add new clean Simply SVG Image there. Default material works nicely with Simply SVG Images and has color tinting.

    I downloaded couple of Material icons and the problem is that there the fill color is defined inside <svg>-element. Simply svg gets fill color from the current element and not from parent elements.
    Code (CSharp):
    1. White svg:
    2. <svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="">
    4. Black svg:
    5. <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="">
    For now, you can set Inspector to debug mode and change Min Subdivision Distance Delta value. Ever lower value results better quality and more triangles. The value should always be more than 0. For example 0.001 equals to Quality of 1000. You can also change the limit by editing ImportSettingsEditor.cs file's line 44 in EditorGUILayout.Slider function the third parameter is the upper limit. I will make some changes to this in next version.

    9-slice and gradient support are the most asked new features. Both are quite hard to do well and I'm not sure when we have time to implement them.
  19. mr_rayskinner


    Nov 16, 2013
    Has anyone else tested this on the newest version of Unity2017.3? The demo scene is riddled with errors and I cannot drag and drop any SVG into the scene..including those that came with the demo.
  20. mr_rayskinner


    Nov 16, 2013
  21. mr_rayskinner


    Nov 16, 2013
    Turns out I was just dragging in the generated file instead of the actual SVG file...I do have another issue though the SVG is coming in black instead of green as its supposed to be.
  22. chrisjfarr


    Feb 17, 2018
    Hi there, I'm interested in buying this asset. I do have a concern however, I work out of Expression Design instead of Illustrator. I checked, and it does export to version 1.1. If I sent a test file, would you mind showing me how it looks in Unity before I make the purchase? Thanks!
  23. TimNedvyga


    May 18, 2015
    Hi, guys. Could you tell me, Could I use custom shaders and material with vector UI image?
  24. FlamingTroll


    Jul 5, 2016

    When importing our SVGs the meshes contain a huge amount of polygons. The attached (ignoring the background) without the colours stacked creates a 3k mesh. This seems like a crazy amount of polys for what is a UI button.

    Is there anything we should be considering when importing our SVGs?

    Attached Files:

  25. NordicEdu


    May 25, 2018
    Hello! I am Lassi from NordicEdu and I'll be answering the questions here on out with my colleague Konsta. If you have anything to ask about Simply SVG, just let us know!

    Here are answers to the latest unanswered questions.

    Q: The SVG is coming in black instead of green as its supposed to be.
    A: Is the SVG colour gradient? If it is, unfortunately Simply SVG doesn't support gradient colours. If not, could we have a look at the SVG-file in question?

    Q: If I sent a test file, would you mind showing me how it looks in Unity before I make the purchase?
    A: Sure, send on over.

    Q: Could I use custom shaders and material with vector UI image?
    A: Simply SVG creates a mesh that works just as any other mesh.

    As for FlamingTroll's question, we answered that in more detail in another conversation and created a PDF file concerning it. We'll upload that here too, so if anyone else has the same question, they can consult that file.

    Attached Files:

    theANMATOR2b likes this.
  26. DropinScience


    Jun 28, 2017
    Question: Can you ungroup an svg file from within Unity?

    I want to import an svg of a bird like character and ungroup it to make the eye rotate(using a component script attached to the eye object) . I would rather not import 2 seperate images because unity doesn't have alignment features. (and for more complex images it will be time consuming to seperate each components before importing, then trying to realign them)
  27. NordicEdu


    May 25, 2018
    Hello DropinScience! We already discussed this via email, but I'll add our reply here in case someone else thinks of the same question.

    Simply SVG provides a "Split meshes by layers" function for importing SVG assets (see picture). You can then control the different layers as different game objects which, if I understood correctly, was your end goal.

    Attached Files:

  28. OlafsOsh


    Jul 10, 2018
    Is it still supported, as the last review is ages ago?