CHAPTER 3 WORKING WITH SCALABLE VECTOR GRAPHICS
Adding SVG to a Page
Adding inline SVG to an HTML page is as simple as adding any other element.
There are several ways to use SVG on the Web, including as <img> elements. We will use inline SVG in HTML, because it will integrate into the HTML document. That will let us later write an interactive application that seamlessly combines HTML, JavaScript, and SVG (see Listing 3-1).
Listing 3-1. SVG Containing a Red Rectangle
<!doctype html>
<svg width="200" height="200"> </svg>
That’s it! No XML namespace necessary. Now, between the start and end svg tags, we can add shapes and other visual objects. If you want to split the SVG content out into a separate .svg file, you will need to change it like so:
<svg width="400" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
Now it is a valid XML document with the proper namespace attributes. You will be able to open that document with a wide variety of image viewers and editors. You can also refer to an SVG file from HTML as a static image with code such as <img src="example.svg">. One downside to that approach is that the SVG document is not integrated into the DOM the way inline SVG content is. You won’t be able to script interaction with the SVG elements.
Simple Shapes
The SVG language includes basic shape elements such as rectangles, circles, and ellipses. The size and position of shape elements are defined with attributes. For rectangles, these are width and height. For circles, there is an r attribute for radius. All of these use the CSS syntax for distances, so they can be pixels, points, ems, and so on. Listing 3-2 is a very short HTML document containing inline SVG. It is just a gray rectangle with a red outline that is 100 pixels by 80 pixels in size, and it is displayed in Figure 3-4.
Listing 3-2. SVG Containing a Red Rectangle
<!doctype html>
<svg width="200" height="200">
<rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" /> </svg>
Figure 3-4. An SVG rectangle in an HTML document
67
CHAPTER 3 WORKING WITH SCALABLE VECTOR GRAPHICS
SVG draws objects in the order they appear in the document. If we add a circle after the rectangle, it appears on top of the first shape. We will give that circle an 8 pixel wide blue stroke and no fill style (see Listing 3-3), so it stands out, as shown in Figure 3-5.
Listing 3-3. A Rectangle and a Circle
<!doctype html>
<svg width="200" height="200">
<rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" /> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8" />
</svg>
Figure 3-5. A rectangle and a circle
Note that the x and y attributes define the position of the top-left corner of the rectangle. The circle, on the other hand, has cx and cy attributes, which are the x and y values for the center of the circle. SVG uses the same coordinate system as the canvas API. The top-left corner of the svg element is position 0,0. See Chapter 2 for the details of the canvas coordinate system.
Transforming SVG Elements
There are organizational elements in SVG intended to combine multiple elements so that they can be transformed or linked to as units. The <g> element stands for “group.” Groups can be used to combine multiple related elements. As a group, they can be referred to by a common ID. A group can also be transformed as a unit. If you add a transform attribute to a group, all of that group’s contents are transformed. The transform attribute can include commands to rotate (see Listing 3-4 and Figure 3-6), translate, scale, and skew. You can also specify a transformation matrix, just as you can with the canvas API.
Listing 3-4. A Rectangle and a Circle Within a Rotated Group
<svg width="200" height="200">
<g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup"> <rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" />
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8" /> </g>
</svg>
68
CHAPTER 3 WORKING WITH SCALABLE VECTOR GRAPHICS
Figure 3-6. A rotated group
Reusing Content
SVG has a <defs> element for defining content for future use. It also has an element named <use> that you can link to your definitions. This lets you reuse the same content multiple times and eliminate redundancy. Figure 3-7 shows a group used three times at different transformed positions and scales. The group has the id ShapeGroup, and it contains a rectangle and a circle. The actual rectangle and circle shapes are just defined the one time inside of the <defs> element. The defined group is not, by itself, visible. Instead, there are three <use> elements linked to the shape group, so three rectangles and three circles appear rendered on the page (see Listing 3-5).
Listing 3-5. Using a Group Three Times
<svg width="200" height="200"> <defs>
<g id="ShapeGroup">
<rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" /> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8" />
</g>
</defs>
<use xlink:href="#ShapeGroup" transform="translate(60,0) scale(0.5)"/> <use xlink:href="#ShapeGroup" transform="translate(120,80) scale(0.4)"/> <use xlink:href="#ShapeGroup" transform="translate(20,60) scale(0.25)"/>
</svg>
69
CHAPTER 3 WORKING WITH SCALABLE VECTOR GRAPHICS
Figure 3-7. Three use elements referencing the same group
Patterns and Gradients
The circle and rectangle in Figure 3-7 have simple fill and stroke styles. Objects can be painted with more complex styles, including gradients and patterns (see Listing 3-6). Gradients can be linear or radial. Patterns can be made up of pixel graphics or even other SVG elements. Figure 3-8 shows a rectangle with a linear color gradient as well as a circle with a gravel texture. The texture comes from a JPEG image that is linked to from an SVG image element.
Listing 3-6. Texturing the Rectangle and Circle
<!doctype html>
<svg width="200" height="200"> <defs>
<pattern id="GravelPattern" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="67" viewBox="0 0 100 67">
<image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg"></image> </pattern>
<linearGradient id="RedBlackGradient">
<stop offset="0%" stop-color="#000"></stop> <stop offset="100%" stop-color="#f00"></stop>
</linearGradient>
</defs>
<rect x="10" y="20" width="100" height="80" stroke="red" fill="url(#RedBlackGradient)" />
<circle cx="120" cy="80" r="40" stroke="#00f" stroke-width="8" fill="url(#GravelPattern)" />
</svg>
70