A Fresh Perspective at Why, When, and How to Use SVG

Thank you to Oleg Romanyuk for coauthoring this article.

Why Are We Using SVG?

The web development segment is growing at a rapid pace, and SVG (scalable vector graphics) images are becoming more popular. As vector images, SVGs are composed of mathematical equations that define the positioning and color of lines and curves, which make up graphic shapes and text in XML format. SVGs are used for icons, logos, graphic designs, and fonts.

“Why use SVG” is not in question once you consider the advantages it offers. For a client, superb quality on any device is the  main reason to choose this particular format over others. For us as for developers, there are even more reasons to use SVG. SVG benefits include:

1. Text-based format 

SVG elements contain text, which greatly improves the accessibility of a website. Yet, the main advantage is in the fact that this text is indexed by search engines. Respectively, a user can find an SVG file via Google. 

2. Scalability

The quality of SVG images does not depend on the resolution. Unlike images of other formats or icon fonts, SVGs look perfectly sharp on any device with any screen size. Scalability also means that if you use the same image throughout the website but in different sizes, you use a single SVG. You do not have to create multiple copies of it as in the case of PNG. Instead, you embed one and the same image and define the size of it directly in SVG code.

3. High performance

If you prioritize performance, it is one of those cases when to use svg. With the usage of SVG, there is no need for an HTTP request to load in an image file. The page loads faster as it has no files to download. Faster loading time translates into better webpage performance and higher search engine ranking. In turn, it is improving the user experience.

4. Small file size

The size of simple SVG files is defined by colors, layers, gradients, effects, and masks that it contains. The size of a PNG or any other raster graphics file is defined by the number of pixels that it consists of. The larger a PNG image is, the heavier it gets in size. This is not the case for SVG icons though. Also, SVGs can be optimized, and I will tell how later in this article.

5. Numerous editing and animating opportunities

Unlike raster images, vector images can be edited both in special vector drawing programs and directly in a text editor. Moreover, you can edit colors or sizes of SVG icons directly via CSS. As for animating SVGs, it can be done with the help of SMIL, Web Animations API, ​WebGL, or CSS animation. Scroll down to learn more about CSS animation of SVG images.

6. Integration with HTML, XHTML, and CSS

SVG was designed “to integrate with and extend other prominent open Web platform technologies, such as X/HTML, CSS, and Javascript”, according to W3C. Thus, unlike different image formats, this format can be easily integrated with other documents and technologies. 

7. W3C Document Object Model support

Among the benefits of this format, there is growing community support for SVG. The World Wide Web Consortium (W3C) has always claimed that the Internet cannot do without vector images. This organization basically created the SVG format, and they actively support it nowadays.

What Are the Inconveniences of SVG?

The large number of small parts makes use of SVG format irrational. The more parts an image consists of, the heavier it grows in size. 

For example, here are two SVG maps of the United States. The second one is slightly more detailed than the first one. Yet, this detalization cost almost a fivefold increase in file size – 33 KB compared to 147 KB. If this map was not monochromatic, the increase would be much greater.

If the picture is linear and contains a few colors – SVG is a solution. However, if the details matter and there are a lot of them, PNG or JPEG may be more suitable. 

Respectively, SVG cannot be used for photographs. If you use a photograph on your website, it is a case when to use SVG is not the best option. You definitely should go with a raster image format.

How to Optimize SVG Images?

When rendering vector format, we have to write some extra SVG code. The end result should be optimized using different services. Most often, for optimizing SVG, I use a Node.js development tool SVGO. It is quite easy to use, and there is no need to upload the images to other websites.

How to Animate SVG?

SVG graphics on the web can be animated in a number of ways:

1. SMIL, which is the native SVG animation specification
2. Web Animations API, which is a native JavaScript API allowing you to create more complex sequential animations without loading any external scripts
3. ​WebGL
4. CSS animation

Let’s consider the latest one.

CSS animation is used in order to avoid overloading your service with big libraries for animating icons and loaders.

To see the example of SVG check the animated yolk, the graphic design of which was initially drawn in Sketch.

As you can see here, I use Keyframe Animation Syntax for animation. It is implemented by setting the initial position of an element by id (0%), transition (50%) and final position (100%). To achieve smooth animation, Initial and final values are equal.

Here are some benefits of using SVG animation CSS approach:

1. You do not need an external library.
2. Preprocessors (like Sass or Less) allow you to create variables.
3. You can use onAnimationEnd and some other animation hooks with native JavaScript.
4. This approach is easy to use for responsive web design development because you can modify your animation with media queries.

The downsides of using CSS animation are the following:

1. You cannot produce some complex physics effects, which would make the animation more realistic.
2. A lot of recalculation needs to be done if you adjust timing.
3. CSS and SVG graphics on mobile sometimes require strange hacks.

For Example

Still, we can make some interesting projects with the help of simple and trivial CSS animation. For example, I have made a simple game-video using HTML, CSS, and a little bit of JavaScript. All the SVGs were drawn in Sketch. The objective of this game is to save the princess. In any situation, just click. You can find the project at my GitHub.

To Wrap Up

SVGs are a great image format to go with. They are scalable, lightweight, text-based, and efficient. They are easy to edit, animate, and integrate. Importantly, they are supported by almost any browser but for Internet Explorer 8 and Android 2.3.

While learning to work with scalable vector graphics images may take you some time, it is an effort investment that will pay off considering the benefits of SVG.

Do you have an idea?

Let’s discuss your business idea! Drop us a line or schedule a call – whatever works best for you.

Daria Hlavcheva

Head of Partner Engagement

CONTACT US