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:

Very Messy

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!

The plugin allows you to add a <img> to your HTML, referencing a .svg file. Simply adding a class to this image and initialising the plugin in your Javascript and the plugin converts the image direct to code. It also cleans up the SVG code, making it neater.

Demo

See the Pen SVG Image to SVG Code Convert by Shape (@madebyshape) on CodePen.

Browser Support

Internet Explorer 9+
Mozilla Firefox
Safari
Google Chrome