SVG for Web Developers

Styles: Inline and Embedded

First, let's review what we know so far about styles. The style attribute contains various properties. For instance, in the code in Example 8-1, fill, stroke, and stroke-width are properties of the style attribute. These properties control the color of the circle and the color and width of its outline. The properties are further defined by values. The values of the properties in Example 8-1 follow each of the properties and are separated from each property by a colon (e.g., fill:red, stroke:orange, and stroke-width:2). If there is more than one property in the style attribute, the properties are separated by semicolons.

This way of coding the style attribute is known as an inline style. Styles are created for each ...