Reading time: 4 minutes
PUBLISH DATE: Nov 21 2019
UPD: May 23 2023
Reading time: 4 minutes
Design

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

Seven powerful benefits of SVG images and a fast and practical way to animate them

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.

Example of SVG optimization using SVGO

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.

Rate this article!
5/5
Reviews: 1
You have already done it before!
Start growing your business with us

Get ready to meet your next proactive tech partner. Tell us about your project, and we'll contact you within one business day, providing an action plan

Only for communication
By submitting, I agree to Keenethics’ Privacy Policy.
Daria Hlavcheva
Daria Hlavcheva
Head of Partner Engagement
Book a call
What to expect after submitting the form?
  • Our Engagement Manager will reply within 1 business day.
  • You'll receive an optional NDA to sign.
  • We'll schedule a call to discuss the action plan.

Our Projects

We've helped to develop multiple high-quality projects. Learn more about them in our case study section

BankerAdvisor - Investment Banking Tool
  • Business
  • Finance & Banking

Find the best investment banking option.

Case studies
Attendance
  • Business administration

Tracking schedules and salaries of the Keenethics team

Case studies
Brainable
  • Business
  • E-commerce
  • Education
  • Entertainment

A brain-training website helping you discover what your mind can do.

Case studies
StoryTerrace Bookmaker
  • Business
  • E-commerce
  • Education
  • Entertainment

Book publishing platform helping you create your own book online with a competent in-house editorial team.

Case studies
Check out our case studies
Case Studies
GDPR banner icon
We use cookies to analyze traffic and make your experience on our website better. More about our Cookie Policy and GDPR Privacy Policy