O'Reilly logo

Sams Teach Yourself SVG in 24 Hours by Micah Laaker

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

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 ...

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