Skip to content
Halloween Vector Graphic

An illustrated vector graphic. Look how crisp and clean it is!

Alongside SASS and responsive web design, SVGs (or Scalable Vector Graphics as the boffins would say) are one of my favourite front-end development tools of recent years.

As the name suggests, SVGs can be scaled to as big or small as required and will remain crisp and clear whatever resolution screen they are being viewed page on.

Combined with a relatively small file size compared to an equivalent PNG file and the ability to enhance the graphic using code by modifying it in a text editor, SVGs are a solid addition to a modern front-end developer arsenal.

As well as adding an SVG to a page using a standard <img> tag or as a CSS background image SVGs can also be embedded directly into a page, either by copying and pasting the SVG code into an HTML document or if using PHP there is the slightly more tidy file_get_contents() function.

<?php echo file_get_contents("my-awesome-vector-graphic.svg"); ?>

Embedding an SVG directly into a page allows me to control it’s content with CSS which opens up a whole new chest of scalable vector goodness.

Recently, I’ve been working on a project where using inline SVGs really came into it’s own. I had one particular graphic which was being used on multiple pages, each time inheriting a different colour scheme based on the page it was on.

Rather than save out and maintain 4 separate images, I created a single SVG and used CSS to target the branded elements based on the class of the parent element, like this…

See the Pen SVG Demo by Paul Jardine (@dinodesigns87) on CodePen.

This was easy to do by opening the file in a text editor and adding a class to identify the elements I wanted to target with CSS.

In the above example, the .section-colour elements (the main balloon background) get their colours based on the styles of the container they are in (the stroke colour is also set this way), whilst the transparent shadow and shine shapes layered over the top remain the same. Note I’ve also been able to set the opacity of the shadow and shine shapes with css as well.

It’s possible to go a step further an add hover states if a design requires something slightly more complex than an icon font (such as a multicoloured icon for example).

For anyone feeling particularly ambitious it’s even possible to start animating the graphic using CSS transitions or keyframes, such as in this fine example.

It’s also worth noting that when inspecting an embedded SVG using a web browsers developer tools, each individual element within the graphic can be targeted and tinkered with.

Optimising SVGs

As with any graphic file it’s important to keep your SVGs optimised to reduced your file size and speed up your page load. A couple of my favourite tools for optimising SVGs are Kraken.io and Jake Archibold’s SVGOMG tool.

SVG Cross Browser Notes

Typically, when working with responsive graphics the first step is to apply the following CSS…

img, svg{
display:block;
max-width:100%;
}

This works pretty great for SVGs in Chrome and Firefox. Unsurprisingly, Internet Explorer and Safari can sometimes be a little quirky, usually where the elements inside the graphic don’t match up with the actual edge of the SVG.

Based on my somewhat unscientific research I’ve found that these can usually be fixed by double checking the following attributes in the main <svg> tag (exporting from Illustrator doesn’t always add them all by default).

  • ViewBox – sets the width and height of the canvas and where it is positioned over the graphic
  • Width and Height –  (better browsers just work from the viewbox attribute but IE and Safari also seem to need these)
  • preserveAspectRatio – both IE and Safari needed the follwing attribute to maintain their shape when wider than the their parent container:  preserveAspectRatio=”xMinYMin meet”.

Check out Understanding SVG co-ordinate systems by Sara Soueidan for a detailed explanation for how all these work!

Also note that using optimisation tools can sometimes strip out these attributes too so be wary!

Legacy Browser Fallback

Note that if you’re still supporting ye olde browsers such as IE8 and below (shudder), SVGs won’t work so you’ll need to get a PNG fallback on the go like this…

<?php echo file_get_contents("my-awesome-vector-graphic.svg"); ?>
<!--[if lt IE 9]> <img src="ie8-fallback.png"/> <![endif]-->

In IE8, the embedded inline SVG will be ignored completely and the fallback image in the the IE8 conditional tags will show instead.

Drawbacks to SVGs

Be aware that embedding directly can make page markup a little messy when compared to a standard image tag, particularly with more complex graphics (so remember to optimise them!). Also if there are several particularly complicated SVGs on a single page, it will start increasing the size of your page due to the extra markup and *may* slow down rendering time.

Another thing to note is that any user can quite easily save the file and open it in Illustrator and do what they like with it. So if you are precious about keeping your illustration techniques a secret, you may be better sticking to watermarkered JPGs.

SVGs can’t be cropped which means if you’re using one as a main image on a page they aren’t going to get picked up if you share them on other platforms such as Facebook and Twitter.

Further reading on SVG

Some of the most comprehensive write-ups on using SVG I’ve come across are…

Thanks for reading! Give me a shout on Twitter if you found this article useful! 🙂

Related Blogs

An Easter egg hunt with a difference: 5 of my favourite finds

18th April 2019

Bring your basket and join me on a hunt as we look at my five favourite website Easter eggs.

Read more

Get the Most From Your Website in 2019

8th January 2019

My mission for 2019 is to help you get the most from your online presence, both in terms of building high quality, professional websites and teaching you how best to use them after the live launch.

Read more
View all blogs