Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

[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

    AlexHell

    Joined:
    Oct 2, 2014
    Posts:
    167
    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

    stimul

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

    inertiadesigns

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

    inertiadesigns

    Joined:
    Oct 24, 2014
    Posts:
    14
    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

    tkoknordic

    Joined:
    Jan 31, 2013
    Posts:
    93
    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.

    1.
    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 https://forum.unity3d.com/threads/vertex-color-shadows.191389/)

    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

    IIporpammep

    Joined:
    Aug 16, 2015
    Posts:
    39
    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 (http://www.inkscape.org/) -->
    3.  
    4. <svg
    5.    xmlns:dc="http://purl.org/dc/elements/1.1/"
    6.    xmlns:cc="http://creativecommons.org/ns#"
    7.    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    8.    xmlns:svg="http://www.w3.org/2000/svg"
    9.    xmlns="http://www.w3.org/2000/svg"
    10.    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    11.    xmlns:inkscape="http://www.inkscape.org/namespaces/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="http://purl.org/dc/dcmitype/StillImage" />
    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>
    117.  
     
  7. TahoeDaddio

    TahoeDaddio

    Joined:
    Jan 26, 2017
    Posts:
    1
    Hi,

    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

    mitchmeyer1

    Joined:
    Sep 19, 2016
    Posts:
    32
    Hello,

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

    -Mitch
     
  9. Nonym

    Nonym

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

    DavidArts

    Joined:
    Jan 19, 2017
    Posts:
    8
    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

    TokyoDan

    Joined:
    Jun 16, 2012
    Posts:
    1,080
    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: https://www.assetstore.unity3d.com/en/#!/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

    DavidArts

    Joined:
    Jan 19, 2017
    Posts:
    8
    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

    SrXoo

    Joined:
    Nov 8, 2016
    Posts:
    4
    Hello!

    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

    BouncedPhysical

    Joined:
    Jul 16, 2016
    Posts:
    58
    Wow that's really awesome!

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

    mostlytigerproof

    Joined:
    Jan 8, 2014
    Posts:
    6
    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

    Behnamjef

    Joined:
    Jan 22, 2016
    Posts:
    2
    hi,
    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

    JoeSig

    Joined:
    Apr 13, 2015
    Posts:
    4
    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

    tkoknordic

    Joined:
    Jan 31, 2013
    Posts:
    93
    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="http://www.w3.org/2000/svg">
    3.  
    4. Black svg:
    5. <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    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

    mr_rayskinner

    Joined:
    Nov 16, 2013
    Posts:
    37
    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

    mr_rayskinner

    Joined:
    Nov 16, 2013
    Posts:
    37
  21. mr_rayskinner

    mr_rayskinner

    Joined:
    Nov 16, 2013
    Posts:
    37
    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

    chrisjfarr

    Joined:
    Feb 17, 2018
    Posts:
    4
    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

    TimNedvyga

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

    FlamingTroll

    Joined:
    Jul 5, 2016
    Posts:
    13
    Hello,

    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

    NordicEdu

    Joined:
    May 25, 2018
    Posts:
    3
    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

    DropinScience

    Joined:
    Jun 28, 2017
    Posts:
    1
    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

    NordicEdu

    Joined:
    May 25, 2018
    Posts:
    3
    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

    OlafsOsh

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