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.

 

Compatibility

We are now at the point where you’d be hard pressed to find an Internet Browser that can’t do the SVG dance.

CanIUse.com 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).

.mybackgroundclass
{
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.

 

 

Editors

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.

Inkscape

Janvas

http://www.smashingmagazine.com/2008/12/05/20-vector-graphic-editors-reviewed/

http://en.wikipedia.org/wiki/Comparison_of_vector_graphics_editors

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

 

More Tips and Tricks with SVG

http://css-tricks.com/using-svg/

Jenkov.com 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

http://openclipart.org/may-clipart-be-used-comparison

http://openclipart.org/share

Batch

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

http://adamwhitcroft.com/batch/

 

Zurb Foundation Icons

Has no explicit licence, but indicates free.

http://zurb.com/playground/foundation-icon-fonts-3

http://zurb.com/about

 

Icon Monster

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

http://iconmonstr.com/

 

ICOMOON

http://icomoon.io/app/#/select/library

They also do commercial packs http://icomoon.io/#icons-icomoon

 

METRIZE Icons

A MIT style licence

http://www.alessioatzeni.com/metrize-icons/

 

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.

https://useiconic.com/open/

 

A list of other Icon Packs

http://www.webresourcesdepot.com/30-awesome-and-free-flat-icon-sets/

 

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.

http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL).

http://scripts.sil.org/cms/scripts/page.php?item_id=OFL-FAQ_web#e71fabc0

http://shoestrap.org/downloads/elusive-icons-webfont/

https://github.com/aristath/elusive-iconfont/blob/master/README.md

 

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s