Introduction to SVG

SVG is an acronym for Scalable Vector Graphics, an image format for rendering two-dimensional vector graphics. It first became a W3C recommendation in September 2001, and was later updated to its current form in August 2011. Web browsers have been capable of displaying *.svg files as referenced images for many years. More recently, the HTML 5 specification, which became a W3C recommendation in October 2014, included direct support for SVG as part of the Document Object Model (DOM).

The most recent SVG specification is version 1.1 (second edition), and can be found on the W3C website at https://www.w3.org/TR/SVG11/.

Vector graphics are particularly useful for drawing diagrams, graphs, or maps. It may also be useful as a replacement for bitmap images in certain cases, such as rotated text or hand-drawn icons. SVG provides direct support for basic shapes including lines, rectangles, circles, ellipses, polygons, arcs, and curves. Shapes can be drawn with a pen that supports solid strokes or dashed / dotted patterns, and filled using patterns or gradients.

SVG also provides more advanced capabilities, such as transformations, masks, filters, pre-defined shapes, and even animation. And because shapes can be defined as HTML tags, SVG drawings can be controlled and manipulated by CSS and JavaScript, and users can interact with them in their browser.

This tutorial series will attempt to provide a comprehensive guide and reference for all aspects of SVG. I hope readers will find it useful!

Embedding SVG into Web Pages

There are three ways that an SVG drawing can be embedded into a web page.

  • As a referenced image, using the img tag. If specified, the drawing will be scaled to fit the width and height of the img tag, as compared to the width and height specified by the SVG's viewBox. Any shapes drawn outside the view box will only be visible according to the preserveAspectRatio attribute of the SVG image. CSS that is embedded in the SVG file will be applied, but CSS in the HTML page will not. Images can also be used as a background on a web page with the background-image CSS property.
  • Referenced as the source in an iframe tag. If the drawing is larger than the width and height of the iframe tag, scroll bars will appear. Any shapes drawn outside the view box will not be visible. CSS that is embedded in the SVG file will be applied, but CSS in the HTML page will not.
  • Embedded directly using the svg tag. This is the most flexible way to embed SVG into a web page. Shapes drawn outside the view box will be visible based on the overflow style attribute on the svg tag. CSS that is part of the HTML page applies to the image, and JavaScript events can be attached to individual shapes.

Embedded Image Tag

The examples below show how an SVG file is displayed when embedded in a web page using an img tag. The image will be scaled, but will otherwise respect the co-ordinate system and aspect ratio of the SVG file. Notice how scaling the image causes the outline of the shapes to scale as well.

img tag, width equals height. Image is scaled, shapes outside the view box are not visible.
img tag, width greater than height. Image is scaled down, and shapes outside the view box become visible.
img tag, height greater than width. Image is scaled up, and shapes outside the view box become visible.

Embedded in an Iframe

The examples below show how an SVG file is displayed when embedded in a web page using an iframe tag. The image will completely respect the co-ordinate system and aspect ratio of the SVG file. Special CSS qualifiers like :hover embedded in the SVG file do get applied when embedding with an iframe tag.

iframe tag, width and height smaller than view box. Scroll bars appear. Only shapes within the view box appear.
iframe tag, width and height larger than view box. Only shapes within the view box appear.

Embedded as HTML Tags

The examples below show that SVG can be embedded directly in an HTML 5 web page. This is the most flexible way of adding vector graphics to a page.

svg tag.

The next article will further explain how the co-ordinate system operates.

SVG Tutorial and Reference

Introduction to SVG

SVG Co-ordinate System

Shape Reference

Path Reference

Text Reference

External SVG Resources

W3C SVG Specification Homepage

Mozilla Developer Network SVG Homepage

SVG Tutorial on jenkov.com