Why Are We Using SVG?
The web development sector 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.
Using SVGs is an easy choice once you consider the advantages they offer. For a client, you get superb quality on any device. For us as developers, there are even more reasons to use SVG.
Let's discuss some of the benefits of SVG now.
1. Text-based format
SVG elements contain text, which greatly improves the accessibility of a website. But the main advantage is that this text is indexed by search engines. And a user can find an SVG file via Google.
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 the same image and define the size of it directly in SVG code.
3. High performance
If you prioritize performance, you should use SVG. With 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 improves user experience.
4. Small file size
The size of simple SVG files is defined by the 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. You can also 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
7. W3C Document Object Model support
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 the use of the 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. But the higher level of detail 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.
Also note that SVG cannot be used for photographs. If you use a photograph on your website, SVG is not the best option. You definitely should go with a raster image format.
How to Optimize SVG Images
When rendering a 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 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:
- SMIL, which is the native SVG animation specification
- CSS animation
Let’s consider the last 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 the CSS approach to SVG animation:
- You do not need an external library.
- Preprocessors (like Sass or Less) allow you to create variables.
- 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:
- You cannot produce some complex physics effects, which would make the animation more realistic.
- A lot of recalculation needs to be done if you adjust timing.
- CSS and SVG graphics on mobile sometimes require strange hacks.
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 except Internet Explorer 8 and Android 2.3.
While learning to work with scalable vector graphics images may take you some time, it is an investment that will pay off considering the benefits of SVG.
Do you have an idea for a software project?
Also, I would like to say "thank you" to Maryna Yanul for coauthoring this article as well as the readers for making it to the end!