SVG Icon

SVG icons are SVG images used as icons or image buttons within web applications or mobile applications. SVG icons can also be used for logos. This SVG icon tutorial explains how to create your own SVG icons and where to download high-quality pre-made SVG icons.

Advantages of SVG icons

The advantage of using SVG for icons is that they can be easily scaled up or down proportionally, depending on the position they are to be displayed in the application and the screen size of the application being displayed. SVG icons have advantages over bitmap graphics, as they still look good when scaled proportionally or resized. Bitmap graphics tend to pixelate when scaled up and lose quality (pixels) when scaled down.

using SVG icons in Web Apps

As described in displaying SVG in web browsers, there are several methods that canin web browsersdisplayed as part of an HTML page. However, when displaying SVG icons, using the HTML img element to display the icon is the easiest, as the HTML img element can easily scale up or down the size of the SVG icon.

This is an example element that displays the SVG icon using the img element:

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

To scale or resize the SVG icon, simply use the CSS width or height style properties. Below is an example of an img element with the CSS Height Style attribute added:

<img src="svg-icon.svg" style="height:32px">

To maintain the aspect ratio of the SVG icon when scaling or resizing, set only one of the width or height - and cannot set both values at the same time. When only one of the width properties is set, the browser will scale the SVG icon along the other axis to keep the aspect ratio of the SVG icon.

Create your own SVG icons

Sometimes you may need to create your own SVG icons. An SVG icon is just an SVG image contained within its own SVG file. Here is a very simple circular icon composed of SVG circle elements:

<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>

Below is the appearance of this SVG icon displayed with the img element:

However, when you use the img element to display this SVG icon and resize the img element, the SVG icon will not scale up or down. Instead, it will show more or less of the SVG canvas. Below is an example of setting the img CSS Height attribute to32For example:

Please note that how to only display a part of the circle instead of proportionally scaling the entire circle.

The cause of this problem is that the SVG image file is missing some information. You must set a value for the SVG viewBox attribute. The SVG viewBox attribute specifies how much of the SVG canvas should be displayed (in both the X and Y directions).

In our example, we only want to display the part of the SVG canvas that contains the circle icon. This area extends from point 0,0 to point128,128（The radius of the circle is64, with64,64As the center). Using the SVG Viewbox attribute, we can specify only this area of the SVG canvas to be rendered. Here is the appearance of the SVG circle icon with the Viewbox value 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>

This is the displayed SVG icon, with heights of32、48and64Pixels: