JUMP START HTML5 (2014)

Chapter 17 Canvas & SVG: An Introduction to SVG

SVG stands for Scalable Vector Graphics. It allows you to create graphics using the XML markup language. SVG's been around for quite some time and is supported by the majority of browsers. Unlike Canvas, it's not intended for pixel manipulation. It allows you to create scalable graphics and, as it's resolution independent, it's ideal for use on projects that are likely to be used on a variety of screen resolutions and sizes. For example, SVG is ideal for sites using Responsive Web Design (RWD).

In fact, the use of SVG in RWD is so obvious, you have to wonder why some websites are redesigned using traditional images. SVG also displays perfectly on retina and other high-resolution screens. As resolutions get better, it's likely they'll be more widely used.

SVG uses an accessible DOM node-based API and is perfect for those with a good understanding of HTML, CSS, and some JavaScript. You can style it using CSS and make it interactive with JavaScript, and for those that aren't overly familiar with JavaScript, there are plenty of libraries around to help.

As with any web technology, SVG is ever changing but many of its features are available for animations, transforms, gradients, filter effects, and much more. It works in all modern browsers—you can check compatibility at caniuse.com.

Why Use SVG Instead of JPEG, PNG, or GIF?

There are two types of graphics that can be used in computing: bitmap and vector. Bitmaps, such as JPEG, PNG and GIF, are also known as raster graphics and are composed of individual pixels with differing colors. Vector graphics like SVG, on the other hand, define paths and points; they can be resized and retain their quality. This makes them ideal for web uses such as:

· logos

· banners

· signage

· illustrations

· line art

SVG images have a few inherent advantages over bitmap images:

· Since SVG images are comprised of text, they are often more accessible and search engine-friendly than bitmap images.

· Vectors can also be placed over other objects and made translucent, so the object below remains visible.

· Graphics created using SVG can be edited with relative ease, and SVG can be used in conjunction with CSS in order to style the output. This isn't something that's currently achievable with traditional bitmap images.

· SVG images are normally smaller in terms of file size than bitma

However, while they do have many advantages, like many things in life, vector images are not a perfect solution for every application. For example, it's unlikely that you'd be able to produce realistic-looking photos with vectors.

You can embed SVG in standard HTML documents, and SVG can be created using any text editor. However, you may prefer to use Adobe Illustrator or InkScape (an open source vector graphics editor) to create your SVG images.

Now that you know what SVG is all about, let's get down to the good stuff: learning how to use it.

Getting Started

To get started, you can just use a bare bones HTML5 page and drop inline-SVG code right into it. Let's start with an SVG image of a red circle:

<!DOCTYPE HTML>

<html>

<body>

<h1>A red circle:</h1>

</svg>

</body>

</html>

Save the file and open it in your browser and you should see a page with a red circle which is titled "A red circle:".

The SVG section is delimited by the svg tag, which defines dimensions of 200x200px for the image on the page.

Try altering some of the code yourself. The circle element specifies the shape that we want to draw with various attributes. The cx and cy attributes define the circle's center in relation to the drawing area; the r attribute gives the circle's radius. This means that the diameter (width) of the circle will appear as twice the value you've set as the radius.

You can also add a border around the circle

<circle id="redcircle" cx="100" cy="100" r="100"

↵stroke="black" stroke-width="1" fill="red"/>

Other Shapes

As well as a circle, it's a simple matter to create other shapes by appending appropriate tags within the svg block:

· line—Creates a simple line

· <line x1="25" y1="150" x2="300" y2="150"

↵stroke="#F00" stroke-width="5" />

A line

Figure 17.1. A line

· polyline—Defines shapes built from multiple line definitions

· <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"

· ↵stroke="#F00" stroke-width="5" fill="#FFF" />

A polyline

Figure 17.2. A polyline

· rect—Creates a rectangle

· <rect width="300" height="100" fill="#F00" />

A rectangle

Figure 17.3. A rectangle

· ellipse—Creates an ellipse

· <ellipse cx="300" cy="80" rx="100" ry="50" fill="#F00"/>

Ellipse

Figure 17.4. Ellipse

· polygon—Creates a polygon

· <polygon points="200,10 250,190 160,210"

· ↵stroke="#000" stroke-width="1" fill="#F00" />

A (polygon) triangle

Figure 17.5. A (polygon) triangle

Polygons define a series of x and y co-ordinates in the points attribute. This allows you to create complex shapes with any number of sides.

<polygon points="100,10 40,180 190,60 10,60 160,180 100,10"

↵stroke="#000" stroke-width="1" fill="pink" />

A star

Figure 17.6. A star

· path—Allows for the definition of arbitrary paths

The path element allows you to created drawings using special commands. These can be upper or lowercase, which apply absolute and relative positioning accordingly. It looks complex and there are many options so please refer to this SitePoint tutorial for more information.

All the above shapes can be made using paths. The code below creates a segmented circle using paths and, as you can see in Figure 17.7, this is perfect for creating pie charts and similar graphics.

<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"

↵fill="pink" stroke="red" stroke-width="3"/>

<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"

↵fill="purple" stroke="red" stroke-width="3"/>

Paths

Figure 17.7. Paths

Gradients and Patterns

As with canvas, SVG enables you to paint or stroke shapes using gradients and patterns. This is achieved by creating special gradient tags such as linearGradient and radialGradient within a defs section of the SVG. Other elements can then refer to these by name and reuse them on any shape.

To add a linear gradient to the circle within the svg:

<defs>

</linearGradient>

</defs>

Now open it in your browser, you'll see that you now have a blue and yellow circle. To make it a radial gradient, it's then just a case of using the radialGradient tag:

<defs>

</radialGradient>

</defs>

Patterns

You can also create repeating designs within a pattern tag. This defines a series of SVG elements, which can be used to fill an area:

<svg>

<defs>

<pattern id="mypattern" x="0" y="0" width="150" height="100"

↵patternUnits="userSpaceOnUse">

<circle cx="50" cy="50" r="10" fill="red" stroke="black"

<rect x="100" y="0" width="50" height="50" fill="cyan"

stroke="red" />

</pattern>

</defs>

<ellipse fill="url(#mypattern)" stroke="black"

stroke-width="1" cx="200" cy="200" rx="200" ry="200" />

</svg>

<defs>

<pattern id="mypattern" patternUnits="userSpaceOnUse"

↵x="0" y="0" width="50" height="50">

<rect x="25" y="25" width="25" height="25"

↵fill="cyan" stroke="red" />

</pattern>

</defs>

<circle cx="100" cy="100" r="100" fill="url(#MyPattern)"

↵stroke-width="1" stroke="black" />

Save the code above and open it in a browser to see the results, shown in Figure 17.8. Now you can experiment to see what other patterns you can make, using various shapes and color gradients.

Pattern fill

Figure 17.8. Pattern fill