Applying a Stroke

Adding a stroke to an object is almost as simple as adding a fill. Instead of the single declaration that fills operate on, strokes require two commands to clearly specify their purpose. The first declaration, stroke, is used to describe the color of the stroke. The second declaration, stroke-width, describes the width of the stroke.

To use the two, you need to add the commands using the following syntax: stroke:stroke-color and stroke-width:x. In this example, stroke-color is replaced with a color keyword or hexadecimal value, and x is replaced with a numerical value (including decimal numbers, such as “2.35”).

To demonstrate the application of stroke, follow Listing 7.2 to begin adding the rectangular framework you first created ...

Get Sams Teach Yourself SVG in 24 Hours now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.