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.
- Inline SVG in HTML5
- SVG (basic support)
- SVG effects for HTML
- SVG filters
- SVG fonts
- SVG fragment identifiers
- SVG in CSS backgrounds
- SVG in HTML img element
- SVG SMIL animation
- All SVG features
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.
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/
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
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
Icon Monster
This has a custom licence which is very permissive, but you can only use 50 icons.
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.
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
Access violation 