SVG Icons

SVG stands for Scalable Vector Graphics and is an XML based, vector image format for the Web and other environments. The SVG format stores images as vectors. A vector is a type of graphic made up of points, lines, curves and shapes based on mathematical formulas.

The SVG file is resolution independent. The traditional image types like JPEG, PNG and GIF, also known as raster formats, consist of pixels, the SVG images, on the contrary, consist of shapes. This means that the SVG image can be scaled to different sizes without losing quality.

SVG files can be opened and viewed in almost all modern browsers, like Chrome, Firefox, Opera, Edge and Safari. These browsers provide the rendering support, meaning that you can easily open online any SVG file without downloading it.

Vector images are limited in how much detail they can represent, so they are best used for typography, logos, icons, or illustrations.

What Are the Benefits of Using SVG Images?

Scalable Vector Graphics play a vital role in website design. There are several benefits to using SVG over other formats like JPEG and PNG. The SVG format will never replace these raster formats, but it is ideal when it comes to displaying vector graphics on the Web. Below see some of the most important advantages of using SVG.

Scalable

SVG images are vector and they do not lose quality when resized or zoomed in the browser. This makes them accessible for many devices and browsers. Raster formats will start to pixelate if stretched beyond the original size, which leads to the quality loss.

Small File Size

SVG images are scalable, that is why you can use very small file sizes regardless of how large those images may need to be displayed. The raster images, on the contrary, are saved at a large size, because you can keep the quality when you make the image smaller, but not when you make it larger.

By using small SVG images you can optimize the site’s download speed and performance.

Indexable

SVG images are indexed by search engines. They are defined in the XML text files, which allows search engines to read their contents easily. Thus, SVG images are good for Search Engine Optimization purposes.

Easy to Edit

If you need to edit the SVG file, all you need is a text editor or a vector graphic editing tool. You can easily and quickly change color, outline, fill, size, etc. of the SVG image.

Where Can I Get the SVG Icons?

Many icons are used in the design of the Sana webstore.

Graphical user interface, website Description automatically generated

You can change the default icons used in the Sana webstore user interface in the webstore theme.

The most suitable file format for icons is SVG. That is why it is recommended to use SVG icons, if you want to replace any default icon used in the Sana webstore.

There are a lot of free services which you can use to download the SVG icons, for example:

How to Create an SVG Image?

SVG files are written in XML, a markup language designed to store and transfer data. The XML code in the SVG file specifies all the shapes, colors, and text of the image. In case you need to open the SVG image without editing it, you can do it directly in your web browser.

To modify the SVG file, you can use the plain text editor, but take into consideration that it allows to do only some basic editing, like changing colors or size of the SVG image. If you need to do the advanced editing, you can use one of the vector graphic editing tools.

Basically, there are two ways to create the SVG image from scratch: you can manually encode the SVG image in the text editor or draw it in the vector graphic editing tool. Choose the way which is the most suitable for you.

You can also use any free services to download existing SVG icons, as mentioned earlier.

SVG Icon Width and Height

When you create the SVG icon, you need to define the appropriate width and height for the SVG icon to be perfectly rendered in the browser. You can do it by opening the SVG image in any text editor, such as Notepad.

Example:

Copy 
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>

Even if you use some existing SVG icon, make sure it has height and width. We recommend to create icons of the same size as the size of the default icons not to break the design. Don't upload large icons.

Also, you should pay attention to the viewBox attribute. It defines the position and dimension, in user space, of an SVG viewport.

Copy 
viewBox = <min-x> <min-y> <width> <height>

The <min-x> and <min-y> values define the position of the viewBox, and the width and height define the dimensions of the viewBox.

So, the SVG image is scaled based on the width and height values set for the SVG image and the viewBox. See two examples below:

Example 1

  • viewBox height and width is 100

  • SVG image height and width is 50

Result: the viewBox zooms out

Example 2

  • viewBox height and width is 25

  • SVG image height and width is 50

Result: the viewBox zooms in

We recommend to set the same width and height for the SVG image and the viewBox. In this way, the SVG image size and the viewBox size will be equal. The scaling of the SVG image will be still possible.

See the example below:

Copy 
<svg width="24" height="24" viewbox="0 0 24 24">
</svg>