SVG icons are SVG images which are used as icons or image buttons inside a web app or mobile app. SVG icons can also be used for logos. This SVG icon tutorial explains how to create your own SVG icons, as well as where you can download high quality pre-made SVG icons.
SVG Icon Advantages
Using SVG for icons has the advantage that the icons can be easily scaled up and down in size, depending on where in the app you want to display them, and the size of the screen the app is being shown on. SVG icons has the advantage over bitmap graphics that they still look good when scaled up or down. Bitmap graphic tend to become pixelated when scaled up, and lose quality (pixels) when scaled down.
Free SVG Icons
Before you start making your own SVG icons, you should have a look at http://iconmonstr.com Iconmonstr.com has a growing collection of SVG icons which you can download and use for free! When I first discovered Iconmonstr.com the collection contained around 1.100 icons. At the time of writing this tutorial, Iconmonstr.com contains more than 2.800 icons.
Using SVG Icons in Web Apps
As explained in displaying SVG in web browsers there are several
ways to display SVG in a web browser, as part of an HTML page. When displaying SVG icons however, it is easiest
to use the
img HTML element to show the icons. The
img HTML element makes it easy to
scale the SVG icon up and down in size.
Here is an example
img element displaying an SVG icon:
To scale the SVG icon up and down in size, simply use the CSS
properties. Here is an example
img element with the CSS
height style property added:
<img src="svg-icon.svg" style="height:32px">
To keep the aspect ratio of the SVG icon when scaling it up or down, you should only set a value for either
height - not both. When setting only a width for one of the properties, the browser will scale the
SVG icon correspondingly along the other axis so that the SVG icon keeps its aspect ratio.
Creating Your Own SVG Icons
Sometimes you may need to create your own SVG icons. An SVG icon is just an SVG image contained in its own SVG file. Here is a very simple circle icon, made with an SVG circle element:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="64" cy="64" r="64" style="fill: #00ccff;"></circle> </svg>
Here is how this SVG icon looks when displayed with an
However, when you show this SVG icon using an
img element, and scale the
up and down in size, the SVG icon is not scaled up or down. Instead, more or less of the SVG canvas is displayed.
Here is an example of setting the
height property to 32:
Notice how only a part of the circle is shown, instead of the whole circle being scaled down in size.
The problem is caused because the SVG image file is missing some information. You have to set a value for the
SVG viewBox attribute. The SVG
viewBox attribute specifies
how much of the SVG canvas should be displayed (in X and Y directions).
In our example we just want to display the part of the SVG canvas which contains our circle icon. This area stretches
from the the point 0,0 to the point 128,128 (the circle has a radius of 64, and is centered in 64,64). Using the
viewBox attribute we can specify that only this area of the SVG canvas should be rendered. Here
is how the SVG circle icon looks with the
viewBox values set:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" > <circle cx="64" cy="64" r="64" style="fill: #00ccff;"></circle> </svg>
Here is the SVG icon displayed with heights of 32, 48 and 64 pixels: