HTML5 Tutorial – Introduction to SVG, SVG Tooling

SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. It is a language for describing 2D-graphics and graphical applications in XML.

With SVG, you can use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation.

The most recent browser versions support most of SVG 1.1.

SVG allows for three main types of graphic objects:

Vector graphic shapes (for example, paths that consist of straight lines and curves).
Images.
Text.

Sophisticated applications of SVG are possible by using scripts, which access the SVG Document Object Model (DOM) and provides complete access to all elements, attributes, and properties. A rich set of event handlers such as’ onmouseover’ and’ onclick’ can be assigned to any SVG graphical object.

IMPORTANT NOTE: To view the examples in this post, you will need a browser that supports Inline SVG in HTML5, such as IE 9 or IE 10, Firefox version after 16, Chrome, Safari after 5.1, Opera 2.1 and later.

SVG Advantages

Graphical objects (including text) can be grouped, styled, transformed and composited into previously rendered objects. The SVG feature set includes nested transformations, clipping paths, alpha masks, and template objects.

SVG drawings can be interactive and dynamic. For example, animations can be defined and triggered by using scripts.

SVG files provide resolution independent, high resolution dots per inch (HiDPI) graphics on the web, in print, and on mobile devices in a compact format. The ability to style SVG with CSS and the support of scripting and animation makes SVG an integral part of the web platform.

In this series of posts, I’ll show how you can put SVG graphics into your HTML5 page, how to draw basic shapes, how to describe paths, how to draw text and text on a path, how to use fonts in SVG, how to draw a gradient in an element, demonstrate basic transforms, and how you can write JavaScript to interact with your SVG elements.

I will describe the SVG tools you can use and provide links to the topics that I do not cover, such as animation, clipping, filter effects.

SVG Use Cases, Key Features

SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc. SVG is ideal for interactive, data-driven, personalized graphics.

SVG became a W3C Recommendation 14. January 2003 and you can check latest version of SVG specification at SVG Specification.

The SVG 1.1 specification defines 14 functional areas or feature sets:

Paths. Simple or compound shape outlines are drawn with curved or straight lines that can be filled in, outlined, or used as a clipping path.
Basic shapes. Straight-line paths and paths made up of a series of connected straight-line segments (polylines), closed polygons, circles and ellipses, rectangles and round-cornered rectangles.
Text. Unicode character text included in an SVG file is expressed as XML character data. Many visual effects are possible, and the SVG specification automatically handles bidirectional text (such as mixing English and Arabic text, for example), vertical text (as Chinese was historically written) and characters along a curved path.
Painting. SVG shapes can be filled and/or outlined (painted with a color, a gradient, or a pattern). Fills can be opaque or have any degree of transparency. “Markers” are line-end features, such as arrowheads, or symbols that can appear at the vertices of a polygon.
Color. Colors can be applied to all visible SVG elements, either directly or via ‘fill’, ‘stroke,’ and other properties. Colors are specified in the same way as in CSS2, i.e. using names like black or blue, in hexadecimal such as #2f0 or #22ff00, in decimal like rgb(255,255,127), or as percentages of the form rgb(100%,100%,50%).
Gradients and patterns. SVG shapes can be filled or outlined with solid colors as above, or with color gradients or with repeating patterns. Color gradients can be linear or radial (circular), and can involve any number of colors as well as repeats.
Clipping, masking and compositing. Graphic elements, including text, paths, basic shapes and combinations of these, can be used as outlines to define both ‘inside’ and ‘outside’ regions that can be painted (with colors, gradients and patterns) independently. Fully opaque clipping paths and semi-transparent masks are composited together to calculate the color and opacity of every pixel of the final image, using alpha blending.
Filter effects. A filter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified bitmapped result.
Interactivity. SVG images can interact with users in many ways. In addition to hyperlinks, any part of an SVG image can be made receptive to user interface events such as changes in focus, mouse clicks, scrolling or zooming the image and other pointer, keyboard and document events. Event handlers may start, stop or alter animations as well as trigger scripts in response to such events.
Linking. SVG images can contain hyperlinks to other documents, using XLink.
Scripting. All aspects of an SVG document can be accessed and manipulated using scripts in a similar way to HTML. JavaScript can run in response to pointer events, keyboard events and document events as required.
Animation. SVG content can be animated using the built-in animation elements such as <animate>, <animateMotion> and <animateColor>. Content can be animated by manipulating the DOM using ECMAScript and the scripting language’s built-in timers. Animations can be continuous, they can loop and repeat, and they can respond to user events.
Fonts. As with HTML and CSS, text in SVG may reference external font files, such as system fonts. If the required font files do not exist on the machine where the SVG file is rendered, the text may not appear as intended. To overcome this limitation, text can be displayed in an ‘SVG font’, where the required glyphs are defined in SVG as a font that is then referenced from the <text> element.
Metadata. SVG allows you to provide metadata about SVG content. The main facility is the <metadata> element, where the document can be described using Dublin Core metadata properties (e.g., title, creator/author, subject, description, etc). Other metadata schemas may also be used. In addition, SVG defines <title> and <desc> elements where authors may also provide plain-text descriptive material within an SVG image to help indexing, searching and retrieval by a number of means.

Backward Compatibility

You can use Modernizr to detect whether your browser can support:

Inline SVG
SVG
SVG Clip Paths

Here are some workarounds if your customer browsers do not support SVG:

You can use SVG Web Toolkit to render your graphics.
Other polyfills exist depending on what you are trying to accomplish, such as transform them in node.js or to draw the image onto canvas or into Flash.
You could replace your SVG with a PNG file.
You may want to ask your user to install one of the SVG Plug-Ins, such as Google Chrome Frame although it may disable IE or Mozilla features.
You can ask the user to use a browser that supports SVG. See CanIUse SVG for more information.

SVG vs Canvas

In as previous post, I introduced Canvas. You draw graphics onto a Web page using JavaScript.

The primary difference between the two formats is that SVG is vector based, whereas canvas offers pixel operations.

The distinction is somewhat blurred — you can load bitmaps in SVG, and the canvas API can draw lines and shapes. But the final result is what’s important: SVGs remain as vectors but canvas elements are bitmaps.

SVG images are defined in XML. Drawings on to canvas element become a collection of pixels.

Because each SVG element and sub-element can respond to individual events, you can create complex user interfaces very easily. With canvas, you interact with the canvas element itself.

SVG in Web Pages

There are a variety of ways in which SVG content can be included within a Web page:

A stand-alone SVG Web page. An SVG document can be loaded into your Web browser.
Embedded by reference. An SVG document can be embedded in an <img> element.
Embedding inline. The examples that I’ll show are inline directly with the HTML on a Web page.
External link. You can use the <a> tag to link to SVG content, which allows SVG viewer to be used.
Referenced from a CSS or XSL property. You can reference SVG resources wherever CSS or XSL properties allow for the referencing of raster images, including the ability to tile SVG graphics wherever necessary and the ability to composite the SVG into the background if it has transparent portions.

SVG negotiates with its HTML parent to determine where it should draw. SVG content can be embedded by reference or inline within the containing document.

Here is an example of a circle using an inline SVG.

	<!DOCTYPE html>
	<html>
	<head>
	<title>SVG Inline</title>
	</head>
	<body>
	<h1>SVG Inline</h1>
	<!– Create the SVG pane. –>
	<svg height="100" width="100">
	<!– Create the circle. –>
	<circle cx="50" cy="50" r="50" fill="gold" id="circ" />
	</svg>
	</body>
	</html>

view raw

svg-inlinecircle.html

hosted with ❤ by GitHub

The initial coordinate system has the origin at the top/left with the x-axis pointing to the right and the y-axis pointing down. The initial user coordinate system has one user unit equal to the broswer’s “pixel”.

Example InitialCoords – SVG’s initial coordinate system (0,0) (300,0) (0,100)

SVG Tools

You probably will not be handwriting complex graphics. You can use drawing tools. Here are some that may interest you.

Inkspace offers state-of-the-art vector drawing, and it’s open source. It uses SVG as its native file format.
Adobe Illustrator is a vector graphics editor developed and marketed by Adobe Systems and available on premises and as a part of Adobe Creative Cloud. You can creates and imports SVG files for print and the web. Within the Adobe Edge Tools & Services, SVG content can be styled and debugged using Edge Code and can be animated and embedded in HTML with Edge Animate.
Apache Batik is a open source tools that offers almost complete SVG 1.1 support. Batik offers an SVG pretty printer to format SVG files and a TrueType-to-SVG-Font converter.

A large collection of symbols on The Noun Project are all available for free download in SVG format. These free icons are useful for all types of design projects including websites, user interfaces and print design. Each comes along with a title and credit line.

There is a library with some free SVG content also here: Open Clip Art Library

RaphaelJS is a JavaScript library that will help you generating dynamic SVG with few lines of code. You’ll find demos on the website using for instance nonlinear animation functions on SVG elements, animated charts, etc. Also, older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.

JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. It is implemented completely in JavaScript, does not rely on any other library, and uses SVG, VML, or canvas. JSXGraph is released under the LGPL – Lesser GNU General Public License.

If you’re looking specifically for charting, see HighCharts.

The W3C offers a list of programs that support SVG.