Using SVG graphics

Micha Goldfine - Monday, November 18, 2013

I was never a big fan of SVG or any 'new' formats that where not widely supported both by the recipient (browsers) and authors (Illustrator etc.). 
Now that IE9+, Firefox, Chrome and Safari support the SVG format I started creating vector assets for both CSS and content and find SVG to be a very flexible (literally) format alongside PNG and icon fonts.

What is SVG

SVG stands for Scalable Vector Graphics. SVG elements render using anchor points which connect to each other to create a solid area or a path. The more anchor points the larger the file size. In most instances designers will use SVG for solid 2D elements such as icons and symbols where resizing while retaining small file size matters.

SVG has been around since 1999 but didn't receive much attention until recent years with the growth of mobile devices and HTML 5 and CSS 3.

SVG Benefits

While scalability is the most important property of SVG format from a viewer point-of-view, for developers the benefit for using SVG are far greater then just scalability.

Since SVG is a XML document (you can open an SVG file in a text editor and see the syntax) you can embed the XML (after converting to Base64) code into your CSS or HTML files which reduces the HTTP requests from the server.

SVG Code

To convert the XML code into a Base64 code you can go to site's such as mobilefish. Copy the XML code such as above sample and paste it into the site's form.  Once you convert the XML code paste it into your CSS or THML image properties as such:

.yourStyleName {
  background: url(data:image/svg+xml;base64,[PASTE-BASE-64-HERE]); }

Or into a <img> tag

<img src="data:image/svg+xml;base64,[PASTE-BASE-64-HERE]>

To best demonstrate the use of SVG I have embedded this short video from Kyle Foster.

Recent Posts