APEX@IGP
Lesson 5
<line />
Objective: Learn to draw, position and style a line.
5.1 The line element
<line x1="0" y1="0" x2="100" y2="100"></line>
<line> ... </line> The full line element with open and closing tags.
<line /> Because this does not contain any content it can also be used as a self-closing element.
5.2 Line construction attributes
The line has four layout attributes you must know and remember:
x1 The line starting x coordinate.
y1 The line starting g coordinate.
x2 The line ending x coordinate.
y2 The line ending y coordinate.
The same style properties apply except line does not need to use fill.
5.3 Line presentation elements
Lines look simple but they have a number of presentation styles that are very useful in many illustration contexts. Note that these stroke- properties can be used on the stroke of all shapes and not just lines.
stroke-linecap="butt" The value can also be round or square. The default value if you do not specify stroke-linecap is butt.
stroke-dasharray="5, 10" This property allows a dashed line with different spacing to be created. Any number of values can be used but they MUST be separated by commas.
You can use these properties on any shape, not just <line />.
Example simple line
This first example uses full SVG attributes to define the stroke colour and size of the line.
<line
x1="100"
y1="200"
x2="300"
y2="200"
stroke="black"
stroke-width="5">
</line>
Example full properties line
<line
x1="200"
y1="10"
x2="200"
y2="390"
stroke-linecap="butt"
stroke-dasharray="10,5"
stroke="green"
stroke-width="10">
</line>
Interactive Editor
5.4 Exercises
- Create a single vertically centered horizontal line going the full width of the box.
- Create four lines radiating from the center to each corner of the viewBox.
- Create a row of lines 300px high and 50px apart from left to right each with a 1px wider stroke. Use adifferent colour and use different stroke-linecap properties on each.
- Create a single vertical line going the height of the box and put the stroke-dasharray property on the line. Experiment with different stroke-width values and numbers of dasharry values. Eg "5,10" "2, 4, 6, 8" "2, 4, 6"
- Create a line that starts on the left vertical center and is 800px long. The line goes out of the viewbox. Adjust the viewbox width so you can see the full line.
- Use both the SVG attributes and the style attribute to colour your lines. Become comfortable with both techniques.
- Draw three lines that have stroke-width="20". Apply the three stroke-linecap="xxx" values. Remember the values are butt (default), square and round. Observe how linecap round and square increase the visible length of the line by half the stroke width.
For Cheaters
Here is the SVG for those who are too lazy to type the SVG. View the SVG Markup
SVG Cheatsheets and Resources
Here are our standard SVG Cheatsheets you can download, print out and have ready when needed. There is also a text file containing annotated quickstarts for all major shapes and techniques.
SVG Editor. Access a full SVG Editor online at any time.