SVGBasics

Simple Lines with SVG

Lines and Markers

To make shapes with more sides than circles or less sides than rectangles, use a line element, polyline element, or polygon element.

Point A to Point B

The line element just takes the attributes x1, x2, y1 and y2 to make a line from (x1,y1) to (x2,y2).

<?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 viewBox = "0 0 200 200" version = "1.1">
    <line x1 = "20" y1 = "20" x2 = "200" y2 = "180" stroke = "black" stroke-width = "3"/>
</svg>

The points attribute of the polyline element is a list of points to connect. I've paired off the coordinates with commas, but the list points="20,20 40,25 60,40 80,120 120,140 200,180" is the same to SVG as the list points="20 20 40 25 60 40 80 120 120 140 200 180". The list is interpreted as pairs of x-y coordinates in either case. The same goes for carriage returns and other whitespace. The nice thing about this is that you're free to make your source more readable. Just don't use parentheses - "(10,10)" is not valid. The same rules apply in other lists of data for SVG that I'll use later on for paths and matrices.

<?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 viewBox = "0 0 200 200" version = "1.1">
    <polyline points = "20,20 40,25 60,40 80,120 120,140 200,180" fill = "none" stroke = "black" stroke-width = "3"/>
</svg>

A polygon element is basically the same as a polyline except that it automatically closes itself.

<?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 viewBox = "0 0 200 200" version = "1.1">
    <polygon points = "60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60" fill = "green" stroke = "black" stroke-width = "3"/>
</svg>

The path element can do everything that the line, polyline and polygon elements do, but the syntax is a little more complicated.

©2004 Late Night PC Service | About Us | Site Map | Contact Us