Saturday, February 28, 2015

SVG To PNG Unity Plugin

Hi everyone!

Time for something a little different this time.
I've created a small editor script for Unity that has tremendously improved my 2D workflow!

As I use a lot of Inkscape to make graphics for my games, it tends to get a bit annoying when I have to export to PNG manually every time I want to test a change I've made.  
  
SVG files also can't be imported into Unity like raster formats like PNG and JPG.  
  
So I did some research and made an editor script that handles the import of SVG files by making a PNG copy automatically.
The plugin is super handy, especially if you're constantly switching between Inkscape and Unity like me.

Here's the basic workflow:




Download it here!

Also, if you have any questions, feel free to ask!

14 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Does this work with the later versions of Unity 5.x?

    ReplyDelete
    Replies
    1. Hi there Dan, this script works with all versions of unity starting at 3.5 and it works perfectly even with the newest versions as I use it daily. :)

      If you have any more questions, feel free to contact me here or with Twitter messages.

      Cheers!

      Delete
  3. Hi. I just bought SVG to PNG and on the 1st try I get these errors:

    SVG To PNG Importer: Failed to convert Assets/SVG Assets/Customer 1 Closed Mouth.svg
    UnityEngine.Debug:LogError(Object)
    SVGImport:OnPostprocessAllAssets(String[], String[], String[], String[]) (at Assets/Scripts/DragonLib/Editor/Import SVG/SVGImport.cs:50)
    UnityEditor.AssetPostprocessingInternal:PostprocessAllAssets(String[], String[], String[], String[], String[])
    UnityEditorInternal.InternalEditorUtility:ProjectWindowDrag(HierarchyProperty, Boolean)
    UnityEditor.DockArea:OnGUI()


    By the way...do you have a thread on Unity forums? I try to search for "SVG To PNG" but Unity forum says the search string is too short.

    ReplyDelete
  4. Ah. I figured it out. Seems that SVG To PNG conflicts with SVG Importer which I also use. I deleted SVG Importer and SVG To PNG Works fine.

    ReplyDelete
    Replies
    1. Hi Dan,

      I'm glad it worked out for you in the end!
      If there's anything else, feel free to ask!

      Delete
  5. Hello,

    I pretty much given up on SVG importers that generate meshes so I'll have to go with an SVG importer that generates an image so SVG to PNG is my last resort...and I have 2 questions:
    1. How is the resolution of the PNG that is created determined?
    2. How do I turn the PNG into a Sprite?

    Regards,
    Dan

    ReplyDelete
    Replies
    1. Hi Dan,

      I know the struggle, it's not feasible yet to use SVG as-is or as a mesh.
      As for the answer to your questions :
      1. The size of the final png depends on the svg document properties, in Inkscape you can change this in the Document Properties window (Shift + Ctrl + D)
      2. In unity, select the generated PNG (next to the SVG file) and change the import settings from Texture to Sprite. For more info about sprites, check out this video : https://unity3d.com/learn/tutorials/modules/beginner/2d/sprite-type

      If you have any more questions, feel free to ask!

      Delete
  6. Thanks a million for your quick reply.

    ReplyDelete
  7. I tried doubling the Custom Size in document properties and that only made the page size (outside border when selected in Unity) bigger but the ping stayed the same size. I'm trying to get a higher resolution as the generated PNG is a bit blurry.

    ReplyDelete
    Replies
    1. Try scaling your image to a larger size in Inkscape and in Unity, change the Format in the PNG import settings from Compressed to Truecolor.
      This should give the highest quality.

      Delete
  8. Thanks. That works. I have another question. I'd still like to work with SVGs mixed with PNGs (created by SVG to PNG). I found that your asset works well with Simply SVG. Upon import and at the same time Simply SVG creates its SVG asset (a mesh) and SVG to PNG creates it PNG assets. But I prefer SVG Importer which has more features than Simply SVG. But as you know from my previous post here that SVG Importer and SVG to PNG clash. You can see the errors it gives in my earlier post here. Is it possible that you could get your asset to not clash with SVG Importer?

    ReplyDelete
    Replies
    1. Hi Dan,

      I've never used SVG Importer before and I don't own it so it's hard for me to test what's wrong.
      As long as it keeps the SVG intact SVG to PNG should be able to make a PNG.

      As you said, SVG to PNG does work together with Simply SVG, so I think the problem lies with SVG Importer.

      It might be best to contact them about their plugin, you can freely share my script with them if that helps.

      Cheers!

      Delete