How to use SVG

Some days ago I'd the problem that the unity layout system does not provide any powerfull styling-stuff like css. So problems being easy solvable within css require an own image. And all I wanted at that point was a panel with following attributes:

  • Having a border
    • With color X
    • Border size Y
    • Border radius Z
  • Having a background
    • with color X
    • with opacity Y


I tried to find some lib in order to use css - but none of the ones I've found were working. Too keep an long story short: I gave up the idea of using css and went over to svg.


What is svg?

Svg is short for Scalable Vector Graphics. It already mentions some benefits (scalable). But another one is that you don't need a programm to create them. Simple images can be written on your own cause it is just xml. And so I can use my IDE (in my case Jetbrains Rider) to "draw" my images. Here's an example of how it can look like:


image



SVG and Unity3D

And this is the "tricky" part. Untiy3D doesn't provide support for svg out-of-the-box. But fortunately they provide an (experimental) package. In order to install it you've to do the following steps:


  1. Open the package manager (Window -> Package Manager)
  2. Click on Advanced and check Show preview packages
  3. If an dialog appears with a warning: accept it. It just tells you that those stuff might be unstable
  4. Search for Vector Graphics
  5. Install it

Now you can use your svgs within unity.


Example

And here is an example how I solved the problem from the intro:



The background of the panel is my svg-graphic. And this how my svg looks like:




In order to keep the borders always the same size my settings for the svg looks like that (this can be set in the inspector after you've clicked on the svg-file-asset):



In order to have my borders in a good looking scale I used the sprite editor to indicate them:



Famous Last Words

Well at least for me this will improve things a lot for me. Specially because I'm not a 2D-Artists and it is much easier for me to create graphics by code than by an graphic tool. And easy shapes can become created really fast.