Basics of scalable vector graphics (SVG) in HTML

Why use SVG at all?

SVG (Scalable Vector Graphics) is a file format that describes two-dimensional graphics and graphics applications in XML. These graphics can consist of paths, images, and/or text. It is the best format for line art, logos, graphs and pictures that are based on paths and shapes. Their size is relatively small, and they can easily scale to whatever size we want without losing clarity (except very tiny). Therefore, you don't need many different asset sizes for different breakpoints or retina displays. Also, SVG uses client-side graphics, so your web server does not use a lot of resources.

Next SVG advantage is flexibility. With the selectors we can easily control styling properties and animations. It can be easily integrated with JavaScript by simply attaching a handler to a specific node of the SVG element.

And last but not least, SVG is XML base code, and it is readable by screen readers and search engines. So when you say a picture is worth a thousand words now gains a new meaning.

Browser support

In most common cases all browsers support the basic SVG specification. The exception is <= IE8 and  <= Android Browser 4.3 and for those situations you need to provide some kind of fallback. For more detail browser support here is a detailed table that includes mobile browsers.

Although with various detections like Modernizer you can easily set fallback image for not supported situations there is also few workarounds like RaphaelJS or D3. Those are great JavaScript libraries for interactive data visualization that should simplify your work with vector graphics on the web browsers.

Using in HTML

There are several implementations of SVG:

1. as a src attribute

<img src="example.svg">

1. as a background image

.my-svg { background-image: url('example.svg') }

1. inline

<svg>
 // content
</svg>

1. using an <embed> tag

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

1. within an <iframe>

<iframe src="'example.svg">
 fallback for browsers that do not support iframe
</iframe>

1. using an <object> tag

<object type="image/svg+xml" data="'example.svg">
 fallback for browsers that do not support SVG
</object>

The first two are basic and very common implementations of SVG but the problem with both <img> and background-image is that you have unnecessary HTTP requests and you don't have control over the SVG nodes with CSS or scripts.

Unlike first two solutions, inline SVG include all XML data directly in HTML document and allows us to access nodes via CSS and JavaScript. This gives us great control over manipulation of things like fill, stroke, position, opacity and other properties and attributes.

CSS control

With styling properties we define how the graphics elements in the SVG content are to be rendered. Styling can be done using attributes or CSS properties.

See the Pen SVG_basics_1 by Effectiva (@effectiva) on CodePen.

Or we can add some keyframes to our style to animate objects...

See the Pen SVG_basics_2 by Effectiva (@effectiva) on CodePen.

 

Note that SVG elements have a special set of CSS properties. For instance, it's not background-color, it's fill. The full list of styling properties you can find here.

When not use SVG?

In three most common cases. First, as already mentioned, SVG uses client-side graphics. Our browser is doing the vector math which is required to render SVG objects, so more nodes means more rendering and that means a slower website. Second, for more advanced graphics with many elements, details, shadows or filters SVG size along with entire project can grow. And third, if a project requires support for an older browser like IE8.

SVG Tools

Although it can be opened and edit in any text editor, most popular are graphics editors like Illustrator, Sketch and Inkscape. Some of them are free some are more “professional” but they all provide you tools needed for creating and editing vector graphic among user-friendly interface. Also, it’s worth to mention that there is few SVG optimizers which can often reduce file size and make them easier to work with.

Summary

Today, SVG has great support and you shouldn’t be afraid to use them! They are great for web icons, fonts or graphics because of their small size and great possibility of data visualization which can be easily interactive.