1. SVG Tutorial
2. SVG Examples
3. A Simple SVG Example
4. Displaying SVG in Web Browsers
5. SVG Icons
6. SVG Coordinate System
7. SVG svg element
8. SVG g element
9. SVG rect element
10. SVG circle element
11. SVG ellipse element
12. SVG line element
13. SVG polyline element
14. SVG polygon element
15. SVG path element
16. SVG marker element
17. SVG text element
18. SVG tspan element
19. SVG tref element
20. SVG textpath element
21. SVG switch element
22. SVG image element
23. SVG a element
24. SVG defs Elements
25. SVG symbol Element
26. SVG use Element
27. SVG and CSS - Cascading Style Sheets
28. SVG Stroke
29. SVG Fill
30. SVG Viewport and View Box
31. SVG Animation
32. SVG Scripting
33. SVG Transformation
34. SVG Gradients
35. SVG Fill Patterns
36. SVG Clip Path
37. SVG Masks
38. SVG Filters

• SVG Icon Advantages
• Free SVG Icons
• Using SVG Icons in Web Apps
• Creating Your Own SVG Icons

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:

<img src="svg-icon.svg">

To scale the SVG icon up and down in size, simply use the CSS width or height style 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 width or 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 img element:

However, when you show this SVG icon using an img element, and scale the img element 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 img CSS 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 SVG 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: