That is the question (sorry Mr Shakespeare)
With the recent additions to Scalable Vector Graphics (SVG) icons to out Flat stock icon set, I thought this would be a good opportunity create a basic introduction to them. Find out if the format is right for you.
Here are the key points you need to know about SVG icons:
Scalable Vector Graphics are “scalable”
Obviously, it would be a bit of a misnomer if they weren’t. The difference between SVG and bitmapped images like png is that they retain all image detail as they are resized. For example:
Scalable Vector Graphics are defined by “vectors”
(See where this is going?) That’s why they can easily be scaled. Here’s my “Code Error” icon and the SVG code that defines the icon. At the most basic level the icons are defined by lines, curves, and shapes. Not a grid of pixel dots like png. Here we simply define a red circle and two white lines (or “paths”).
Tell you code the size of the icon you need, and it simply renders the SVG code to fill the box.
<svg version="1.1" id="CodeError" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#cc492c" cx="16" cy="16" r="15"/>
<path fill="none" stroke="#ffffff" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M9.2,9.2l13.6,13.6"/>
<path fill="none" stroke="#ffffff" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M22.8,9.2L9.2,22.8"/>
</g>
</svg>This also means that you developers can alter the code to change the icons appearance (for example the colour of the red circle), even at runtime. It’s a method of working that they are familiar with.
Scalable Vector Graphics are “graphics”
SVG is a widely used and mature, yet evolving graphics format. The have the huge advantage because they maintain editing capabilities. Look at the “Save” icon into a vector design package like Adobe Illustrator, and this is what you see.
In the “Layers” palette, you can see the three shapes that combine to make the icon. All of these are completely editable. Change the color of the disk to orange, or add a new layer to put text on the disk’s label.
And Finally, SVG icons are small
Just to add one more thing, SVG file sizes are much smaller than comparable .png icons. (Google likes small file sizes, so do developers.) To take our example “Save” icon, the 64×64 pixel .png image comes in at 3,319 bytes. The SVG icon is just 787 bytes – a quarter of the size! Scale that icon up to a thousand pixels, and the file size stays the same.
Sounds interesting? Find out more about my stock icon set.
So, that’s a very basic introduction to get started. I’ve many more articles and tutorials on getting the best from SVG to come. As always, the best way to be the first to hear about them is to sign up to the GlyphLab newsletter. No spam, just things I think you might find interesting or useful.
Bye for now,
Dave
