Rendering HTML5 Illustration - Rendering HTML5 Illustration - page 14

<path d=”M102 85C102 81 106 77 110 77C115 77
119 81 119 85C119 90 115 93 110 93C106 93 102
90 102 85M153 85C153 81 157 77 162 77C166 77
170 81 170 85C170 90 166 93 162 93C157 93 153
90 153 85” fill-rule=”nonzero” fill=”#cccc00”
stroke=”#ff0000” stroke-width=”2.0” stroke-
linejoin=”round” stroke-linecap=”butt”></path>
<path d=”M93 141Q136 169 179 141” fill-rule=
”nonzero” stroke=”#ff0000” stroke-width=”2.0”
stroke-linejoin=”round” stroke-linecap=
”butt”></path>
<path d=”M56 108L56 108C56 66 92 32 136 32C180 32
216 66 216 108C216 150 180 184 136 184C92 184 56
150 56 108Z” fill-rule=”nonzero” stroke=”#ff0000”
stroke-width=”2.0” stroke-linejoin=”round”
stroke-linecap=”butt”></path>
</svg>
As you can see, it is quite complex to create PATH-defined
illustrations. For this reason, it is recommended that you use an
SVG drawing tool to create PATH-based illustrations (more on
that later).
Adding CSS-Based Color
SVG is a technology that allows you to create drawings. To add
color to those drawings, however, you leverage Cascading Style
Sheets. There is no need to use a different technology for apply-
ing color, as CSS and SVG are partners in HTML5. Both have
strengths that can be enhanced with each other.
To provide an example, let's look back at the ellipse drawing
created earlier (see Figure 3.14).
<?xml version=”1.0” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=”100%” height=”100%” version=”1.1”
xmlns=”http://www.w3.org/2000/svg”>
<ellipse cx=”300” cy=”150” rx=”250” ry=”120”
style=”fill:yellow;
stroke:red;stroke-width:5”/>
</svg>
After the ellipse image is drawn there is a style attribute. The
style attribute in SVG allows you to add a CSS style to the image. In
HTML you have a style attribute that behaves exactly the same.