My SVG Notes

SVG (Scalable Vector Graphics) is pretty awesome, especially so for 2d flat-look icons in your applications, or as clipart in your presentations.

I’ve recently been doing just that, using SVG for flat icons in a mobile app; and compiled some personal notes and links you might find useful.



We are now at the point where you’d be hard pressed to find an Internet Browser that can’t do the SVG dance. shows us what’s compatible or not.

Basic Usage

Craig Butler wrote a nice short overview of the different ways you can embed Scalable Vector Graphics into your web page. I’ve provided some more links later in my blog which expand on those methods.


My notes on SVG-CSS backgrounds

If you find that you have to use SVG in a background you may be faced with a bit of a shocker – you can’t easily change the colour or rotation of the SVG element!

Luckily you can specify the background size (CanIUse, W3C).

background-image: url('xxxx.svg');
background-size: 24px 24px;
background-position: center;

However, the colour is taken directly from the SVG file. So if you need a different colour you either use an SVG editor (see later) or edit the SVG as a text file and fill in properties like stroke=”red” fill=”red” as attributes in the required element. See this tutorial for more details.

Rotation can also be a pain when using background SVG images. If the SVG image isn’t already rotated how you want it, you’d have to either

  • edit the SVG with an editor to rotate it and re-save,
  • rotate the HTML element that is used for the background SVG,
  • in the SVG file, add an attribute to the drawing element you require: transform=”rotate(-45 100 100)“, where the parameters are (degrees, x rotation point, y rotation point). See this example.




I’ve tried google’s on-line svg-edit, and for quick jobs it’s really handy, but a little buggy (had to press cancel while loading to get the SVG to load!)

I’ve not tried the following editors, but they looked very promising.



Unless the editor already supports it, you may want to optimize your SVG afterwards.


More Tips and Tricks with SVG SVG tutorials

W3CSchools SVG reference


SVG Icon/Image Resources

Here are a selection of Icon packs with commercially permissive licences. Don’t forget to read licences carefully before using, and attribute the original sources in the manner they state.


Open Clipart


Custom MIT style licence, prevents re-hosting or selling the ‘set’ of icons.


Zurb Foundation Icons

Has no explicit licence, but indicates free.


Icon Monster

This has a custom licence which is very permissive, but you can only use 50 icons.



They also do commercial packs



A MIT style licence


Open Iconic

MIT licence (svg and PNG)

Be careful, earlier versions of the Iconic packs were Creative Commons Share-a-Like which I believe the licences are ambiguous enough to not be suitable for commercial apps. There’s also a commercial version of this library. I found some scaling issues with these icons, and some required editing before they could be used.


A list of other Icon Packs


Elusive-Icons Web Font

This is under the SIL OpenFont licence. I haven’t checked this licence thoroughly, but the intent is set right. However, I need to spend more time reading the specific EULA to ensure this is compatible with commercial software.




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s