SVG and HTML

This post is based on Adding vector graphics to the Web on MDN.

SVG stands for Scalable Vector Graphics, it is an XML-based language for describing vector images, but what is vector images? Let’s compare it with normal images:

There are two types of images popular on the Web, one is the raster image, another is the vector image.

  • Raster images are defined using a grid of pixels, popular raster images formats include Bitmap(.bmp), PNG(.png), JPEG(.jpg) and GIF(.gif)
  • Vector images are defined using algorithms, a vector image file contains shape and path definitions that the computer can use to render that image on the screen. It don’t pixellate when zoomed in. The SVG formats allow us to create beautiful vector graphics.

SVG

As we talked above, SVG is an XML-based language for describing vector images, just like HTML, but SVG is for marking up graphics, not contents.

You can find many SVG icons on Iconfont, like this heart below:

You can also create simple SVG by handcoding, for example, to create a circle:

1
2
3
<svg viewBox="0 0 100 100" height="200" width="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>

The result looks like this:

But if you want to create complex images using SVG, you need some tools like InkScape.

SVG has pros and cons:

Pros:

  • Scalable
  • Lighter than raster images most of the time
  • Text in vector images remains accessible (which also benefits SEO)
  • Each component of the image is an element that can be styled via CSS or scripted via JavaScript

Cons:

  • Easy to get complicated, which leads the growing of file size, and time to be processed in browser
  • Sometimes harder to create than raster images
  • Not good at complext precision images like photos (use raster images instead)
  • Not supported in old browsers (IE8 and below)

Adding SVG to HTML

There are several different ways to add SVG to HTML pages:

Using the <img> Element

Reference the SVG file in the src attribute of <img>.

Pros:

  • Quick, alt can be used.
  • Can be easily turned into a hyperlink be wrapping an <a> element.
  • The SVG file can be cached by the browser

Cons:

  • JavaScript is unable to manipulate elements inside the SVG
  • CSS can only be used through the inline style in the SVG file.
  • CSS pseudoclasses are not available (like :focus)

For old browsers that don’t support SVG, you could reference a PNG or JPG using src and use srcset (which is supported only in newer browsers) to reference SVG:

1
2
3
4
5
<img
src="img/heart.png"
alt="a heart with black background"
srcset="img/heart.svg"
/>

If you use SVG as CSS background image, do the following to support old browsers:

1
2
3
4
5
p {
background: url("img/heart.png") no-repeat center;
background-image: url("img/heart.svg");
background-size: contain;
}

The <svg> Element

You can also copy and paste <svg> code snippet directly inside your HTML page, the SVG displayed above in the post is using this method, you can inspect them to see what is going on.

Pros:

  • Putting an SVG element inline saves an HTTP request, and therefore it can reduce a bit of loading time.
  • JavaScript and CSS are available, inline SVG is the only way to use CSS pseudoclasses and CSS animations.
  • Can be easily turned into a hyperlink by wrapping an <a> element.

Cons:

  • If you are using the same SVG in many places, use multiple same <svg>s is not a good idea.
  • Many <svg>s increases the size of your HTML.
  • Not cacheable since it’s not image assets.
  • If you have to support obsolescent browsers, you can use the <foreignObject> element inside the <svg>, but browsers that support SVG still download all fallback images which cost unnecessary bandwidth.

Adding vector graphics to the Web by Mozilla Contributors is licensed under CC-BY-SA 2.5