28 Jul 2015
・ Updated on
12 Nov 2018
・ 1 min read
Convert SVG’s from Image to Code (jQuery)
With the rise of retina screens and responsive design & development - SVG’s have quickly become the best file type of choice for logos, icons and anything vector. They keep the crisp smooth edges of vector shapes without having to serve different versions depending on if someone is on a hi-res screen or not.
Browser support is also fantastic - every browser supports SVG (and have for a while!) so they should be used where possible! Because of this, we’ve been using SVG’s in most of our client work and projects for quite a while. There are two main ways of adding SVG’s to your website:
The most interesting of the two ways is the SVG code option. Developers can interact with every part of the SVG, break it up, change the colours, animate it etc. Something you can’t do if you add it as an <img>. But there are a few downsides:
Adding lots of SVG code into your HTML can start to feel messy, especially if the image is quite complex and includes many paths, circles, groups etc.
Hard to Update & Maintain
If you have added the SVG code to your HTML and wish to then update the image, you need to export the SVG code again and insert it in to your HTML again. This can be time consuming on large projects.
Clients don't like code
Most clients don’t know what SVG’s are, and certainly don’t want to be adding SVG code to Content Management Systems (Or even seeing any code!)
We recognised these problems and produced a jQuery plugin to overcome all of the downsides of managing SVGs! WahoOoOoOoOoooo!