O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The <line> Element

The SVG <line> element defines a straight line. A line has starting coordinates and ending coordinates. In addition, a line can have stroke, stroke-width, and stroke-opacity properties.

Thus, you can completely define a line in SVG like this, which defines a line running diagonally from the upper-left corner of an SVG image toward the lower-right corner. I have also included a second line whose stroke-opacity property is 0.5 as shown in Figure 03.04. (The line is semitransparent, so you can see how that setting affects the rendering of the line.)

Figure 03.04. Two lines created using the SVG <line> element.

Listing 3.6. (Line01.svg) ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required