Using path to Render Rectangles

---

Using line to Render Rectangles

The SVG line element can be used for each of the four sides of a rectangle in order to define the rectangle itself. A line segment is determined by two points in the SVG plane, each of which has an x-coordinate and a y-coordinate.

The SVG document in Listing 1.5 uses the SVG line element in order to render a rectangle.

Listing 1.5 rect4.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%"> <!-- draw rectangle --> <g transform="translate(50,50)"> <line x1="0"   y1="0"  x2="200"  y2="0"  stroke="red"/> <line x1="200" y1="0"  x2="200"  y2="0"  stroke="red"/> <line x1="0"   y1="50" x2="150"  y2="50" stroke="red"/> <line x1="0"   y1="0"  x2="0"    y2="50" stroke="red"/> </g> </svg>

Remarks

The SVG line element defines a line segment whose end points are given by the points with coordinates (x1,y1) and (x2,y2). You can define a rectangle by means of four SVG line elements that specify the coordinates of its four vertices. Since more code is required to specify a rectangle in terms of SVG line elements and your code becomes less intuitive, it's probably better to use the SVG rect element for rendering rectangles and use the SVG line element for rendering non-rectangular components.

---