SVG, a better way to do images

Written by Ben Friedman, August 17th, 2016

If you've ever created a mobile app or a game before, you've probably experienced issues with assets. You've taken all the time in the world to create that wonderful character skin! Unfortunately you need to redo it 4 more times, at different ratios. You could always scale your png to fit, but the loss of quality is just something you don't want to deal with.

Hopefully before you ever do something similar to the aforementioned story you have read this article! Scalable Vector Graphics (SVG) is a format for vector based graphics in XML. A standard SVG file contains instructions for how to generate the image via vectors, rather than a pixel by pixel representation. The end result is that your image is drawn as it is read. This means an SVG is sizeless, it can be drawn at 10x10 or 1000x1000, it will simply use the given instructions to create an image at the appropriate size.

Not only is this great for images that you'd like to be displayed at varying sizes (like the web) but you can also use it generate images from. In particular such things as the character skin that was mentioned before. If you were to create it as an SVG instead of a PNG or JPG, you would have a scalable variant of your skin that you can use to generate your images via! Now you can truly write one and done, knowing that your own image can be exported into pngs, jpegs and more in the sizes you need them. Furthermore if you ever need to redo anything in the future, you need only edit your core SVG and regenerate your images.

It would be neat if we could bypass generating the images altogether, and in some cases you can! Most browsers are capable of interpreting SVG images and will render them just fine, allowing you to 'create' web assets of varying size while only really making one. As for mobile development support seems be a bit lacking as of writing this. However, since SVG is a royalty-free format that is openly available, you can generally find Android, iOS or Windows projects that will interpret SVG graphics into native pngs or jpegs for you. If you think you're familiar with the topic you can even get into making one yourself and end up puttting it on github.

Questions? Corrections? Concerns? Contact us at inquiries@axolsoft.com