Stroke - SVG Tutorial

- [Instructor] In the previous chapter, we focused on how to create various SVG shapes. In this chapter, we'll take a closer look at the appearance of those shapes, specifically how to work with strokes, dashes, markers, advanced fills, and patterns. We'll start with strokes. A stroke is what makes the outline of an SVG shape visible in the browser. As you've seen earlier, an SVG shape does not need to have a stroke, but if you want to make the outline of a shape visible, you do so using a stroke. You can apply and modify a stroke either in the SVG code itself, via attributes, or in CSS using properties. The names and values are the same whether you use SVG attributes in the SVG code or CSS properties in a style sheet. For standard solid strokes, the attributes we have available are stroke, which sets the color, stroke-width, that sets the width of the stroke, stroke-linecap, which controls the end of an open stroke, stroke-linejoin, which controls the corners of strokes, stroke-miterlimit, which limits how long a miter corner can be, and stroke-opacity, which sets the opacity of the stroke. To see how these attributes and properties work, I've set up an example for you. In the exercise files for this movie, I've set up an SVG with a viewbox of 500 x 500 to give us some more granularity in the stroke width. The SVG contains a polyline with a class "stroke" and the associated CSS rule has the "stroke" property set to black just so we can see the stroke. Run the exercise file in the browser and what we see is the box we've been working with so far. I've taken the grid behind it away because we don't need it anymore, and we have a polyline that happens to look like an M. This polyline was specifically designed to showcase all the features of these different stroke properties, and it has nothing to do with the first letter of my name at all. The first attribute or property is one you've seen me use before. It is stroke, and here you set the color of the stroke. Right now, it's set to black, but I can change it to any color I want. Pink, green, orange, and so on. This property will take hex colors, and RGB, and HSL, and whatever color format you normally use in the browser. The next property is stroke-width. By default, the stroke-width will always be 1, and the stroke width is relative to the viewbox you're working with, so if you have a very small viewbox, then changing the stroke-width will have a very big effect. If you have a very big viewbox, changing the stroke-width will have very little effect. In this case, we have a medium viewbox. If I increase the width of my stroke, you can see it increasing pretty fast, and if we crank it up, our M gets nice and thick and really bold. Chrome insists on adding a pixel value here, but you don't actually need to add a pixel value. If I take "px" away, you'll see that the stroke is still the same thickness, and that's because we are working relative to the viewbox, not relative to the pixel value of the overall document. The next property is stroke-linecap, and this has to do with what happens at the end of open lines. We have two ends here, one here, and one here. By default, stroke linecap is set to "butt." "Butt" means the stroke ends where the actual line ends. So for the last line point, it's right here, and that's where the stroke ends. If I change this value to square, you see a square is added to that end. So what's effectively happening is, we're extending the stroke out after the end of the line. We can also change stroke-linecap to round, and then we get a round end to these open lines, and this round end also extends past the end of the final line. The stroke-linejoin property works similarly to stroke-linecap, except this one relates to the corners of our stroke. So here we have three corners, one here, one at the bottom here, and one at the top here. By default, stroke-linejoin is set to "miter," and that means the stroke line will try to stretch out naturally based on how sharp the angle is. Now, miter corners can get really problematic if you have very sharp corners, because you get these really tall peaks, and we'll control that later on using miter limits. But first, let's see the other values. You can set stroke-linejoin to "round." This gives you rounded corners, which look quite different from the miter corners, or you can set it to "bevel," which gives you beveled corners, which are these hard caps. So miter, round, and bevel give you three very different options that create three very different looks. Now, if you set it to miter, and you want to control how long these miter joints are, you can use stroke- miterlimit. This property sets a hard cap limit to how long these miter corners can be, so if we set this one to 1, you'll see I cut off all the miter corners. If I then increase, you'll see over time that some of the corners will get points and others won't, and this is a value you have to experiment with to figure out exactly how much of a limit you want to put on your particular graphics. This one is kind of fickle, and you need to use it individually for each graphic you create. Finally, we have stroke-opacity. This one is pretty much self-explanatory. The opacity is measured from 0 to 1, so 0 is completely transparent and 1 is completely solid. If you set it to any point value, you get a semi-transparent stroke. For solid strokes, these are all the properties you need, and these properties give you full control of the stroke. In the next movie, we'll look at how you can use some additional properties to create dashed lines instead of solid strokes.