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.
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 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.
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.
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.
The next article will further explain how the co-ordinate system operates.