CHAPTER 3  WORKING WITH SCALABLE VECTOR GRAPHICS

Figure 3-8. A rectangle with a gradient fill and a circle with a pattern fill

SVG Paths

SVG has freeform paths as well as simple shapes. Path elements have d attributes. The “d” stands for data. Inside the value of the d attribute, you can specify a series of path drawing commands. Each command might take coordinate arguments. Some of the commands are M for moveto, L for lineto, Q for quadratic curve, and Z for closing the path. If these remind you of the canvas drawing API, that is no coincidence. Listing 3-7 uses a path element to draw a closed tree canopy shape using a series of lineto commands.

Listing 3-7. SVG Path Defining a Tree Canopy

<path d="M-25, -50 L-10, -80 L-20, -80 L-5, -110 L-15, -110 L0, -140 L15, -110 L5, -110 L20, -80 L10, -80 L25, -50

Z" id="Canopy"></path>

You can fill a path by closing it with the Z command and giving it a fill attribute, just like the rectangle we drew earlier. Figure 3-9 shows how to draw a tree by combining a stroked closed path and a filled closed path.

Figure 3-9. A stroked path, a filled path, and both paths

Similarly, we can create an open path with two quadratic curves to form a trail. We can even give it texture. Note the stroke-linejoin attribute in Listing 3-8. This makes a round connection between the two quadratic curves. Figure 3-10 shows a mountain trail drawn as an open path.

71

CHAPTER 3  WORKING WITH SCALABLE VECTOR GRAPHICS

Listing 3-8. SVG Path Defining a Twisting Trail

<g transform="translate(-10, 350)" stroke-width="20" stroke="url(#GravelPattern)" strokelinejoin="round">

<path d="M0,0 Q170,-50 260, -190 Q310, -250 410,-250" fill="none"></path>

</g>

Figure 3-10. An open path containing two quadratic curves

Using SVG Text

SVG also supports text. Text in SVG is selectable within the browser (see Figure 3-11). Should they choose to, browsers and search engines could also allow users to search for text inside of SVG text elements. This has major usability and accessibility benefits.

SVG Text has attributes that are similar to CSS style rules for HTML. Listing 3-9 shows a text element that has font-weight and font-family attributes. As in CSS, font-family can be a single font-family name like “sans-serif” or a list of fallbacks like “Droid Sans, sans-serif” in the order you prefer.

Listing 3-9. SVG Text

<svg width="600" height="200"> <text

x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#0ff" font-size="40px" font-weight="bold"> Select this text!

</text>

</svg>

Figure 3-11. Selecting SVG text

72

CHAPTER 3  WORKING WITH SCALABLE VECTOR GRAPHICS

Putting the Scene Together

We can combine all of the preceding elements to make an image of happy trails. The text is, naturally, a text element. The tree trunks are composed of two rectangles. The tree canopies are two paths. The trees cast shadows, which use the same geometry given a gray fill color and a transformation that skews them down and to the right. The winding path that cuts across the image is another path with an image pattern for texture. There is also a little bit of CSS to give the scene an outline.

Listing 3-10 provides the complete code for trails-static.html.

Listing 3-10. Complete Code for trails-static.html

<title>Happy Trails in SVG</title>

<style> svg {

border: 1px solid black;

}

</style>

<svg width="400" height="600">

<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" /> </pattern>

<linearGradient id="TrunkGradient">

<stop offset="0%" stop-color="#663300" /> <stop offset="40%" stop-color="#996600" /> <stop offset="100%" stop-color="#552200" /> </linearGradient>

<rect x="-5" y="-50" width=10 height=50 id="Trunk" /> <path d="M-25, -50

L-10, -80

L-20, -80

L-5, -110

L-15, -110 L0, -140 L15, -110 L5, -110 L20, -80 L10, -80 L25, -50 Z"

id="Canopy"

/>

<linearGradient id="CanopyShadow" x=0 y=0 x2=0 y2=100%> <stop offset="0%" stop-color="#000" stop-opacity=".5" /> <stop offset="20%" stop-color="#000" stop-opacity="0" /> </linearGradient>

73