HTML5 and CSS3, Second Edition

html5_svg/index.html

<polylineid="line"

points="0,4030,060,40285,40"

style="fill:none;stroke:rgb(255,0,0);stroke-width:2">

</polyline>

Just like with the canvas, we start out on a coordinate system with x=0 and

y=0 in the upper-left corner. To plot our line with <polyline>, we specify a set

of points. We start at 0 pixels across and 40 pixels down. Then we move to

30 pixels across and 0 pixels down to create the first part of the line. From

there we go over to 60 pixels across and 40 pixels down, and then finally over

to 285 pixels across and 40 pixels down.

We also set the style attribute, setting the stroke of the line to a thickness and

a color. When we’re done, the plotted line looks like this:

From here we can add the text.

Adding Text

We use the <text> tag to define text we want to place. We specify the font

family, font size, font style, and font weight using attributes with the same

names (but with hyphens between the words).

Within the <text> tag, we place a <tspan> element that creates the actual block

of text. We specify its position using the x and y attributes, and we place the

text we want to display within the opening and closing <tspan> tags. To get

our text rendered the way we want it, we code it like this:

html5_svg/index.html

<textid="AwesomeCo"

fill="rgb(255,0,0)"

font-family="Arial"font-size="40"

font-style="italic"font-weight="normal">

<tspanx="60"y="36"fill="rgb(255,0,0)">AwesomeCo</tspan>

</text>

The text appears properly placed within our logo:

Now we can move on to creating the smaller square and rectangle.

report erratum • discuss

Creating Vector Graphics with SVG • 127

Download from Wow! eBook <www.wowebook.com>