Vector graphics on websites

By Jarek Pełczyński, 18 May 2015

SVG is a free and open format for vector graphics. It is based on XML and it is a language developed to represent any data, in a format that is possible to understand by human and by a computer. SVG uses the structure known from (X)HTML to represent data. Tags, elements and attributes, which can be used and understood by programs for editing vector graphics, are specified in the SVG specification.

The format delivers such elements as lines or shapes (circles, triangles and other complicated shapes), which altogether go into the making of our graphics. It also supports gradients, transformation of elements (e.g.: rotation), effects and animations, and interactions with JavaScript.

Features

SVG is perfect for logos, charts or uncomplicated graphics, which can be modified or animated on a website.

The main features of SVG:

  • Scalability – changing the size of a graphic does not influence its quality - thanks to that, we do not have worry about the phenomenon called ‘pixelation’. It works perfectly while creating responsive websites (RWD) and on mobile devices with high resolution (density) screens.
  • Easy to modify – we can easily change the shapes of elements by changing coordinates, give them stroke colors and fillings, and animate them.
  • Lower file size – in many cases, vector images take a lot less space then the raster equivalents while maintaining the same quality.

Implementing the SVG on a website

A graphic that was made in a vector graphic design software (e.g.: Adobe Illustrator) can be easily written into the SVG format and implemented on a website.

SVG can be placed in the website code in several ways. One of them is to use the HTML IMG tag (just like any other image) or using CSS styles as a background.

1
2
<img src="vector_image.svg" />
1
2
3
4
#myvectoimage {
  background-image: url(vector_image.svg);
}

Another way (known from Flash) is to implement it as an object using OBJECT or EMBED tags.

1
2
3
4
5
6
<object type="image/svg+xml" data="vector_image.svg">SVG not supported</object>

<!-- or -->

<embed type="image/svg+xml" src="vector_image.svg" />

Another way is to add SVG content directly into the HTML code.

1
2
3
4
5
6
7
<body>
<!-- Your SVG code -->
<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px">
...
</svg>
</body>

Which one of these is the best? It depends on the needs. The method of using IMG tags has restrictions. Because of the security policy, browsers do not allow to execute the JavaScript code of choosing styles for elements inside the SVG, which was implemented using this method. And the EMBED tag was never a part of HTML and XHTML specification, despite the fact that basically every browser supports it - that is why it is recommended to avoid this way of implementation. It seems that the best way to do this is to use the OBJECT tag because then we fully control the SVG (we are able to implement styles, animate, execute JavaScript scripts on elements) and there is a separate representing part regarding a structure.

Browsers support

The SVG technology is available for over 10 years. At first, it was supported by Internet Explorer 9. Currently, a vast majority of browsers fully support SVG, also on mobile devices.

About the author

Jarek Pełczyński — Front-End Maestro

We are proud to introduce our leading multidisciplinary specialist in: front-end development, UX design, detecting the tastiest foods in the neighbourhood and joking. He loves running up the hills and biking. Or both at the same time. Great in all of these things!

comments powered by Disqus