The style Attribute
The application of style to elements is not a very complicated process, and there are a variety of ways to handle such applications. SVG offers developers four methods of applying style to elements:
XML presentation attributes
Inline CSS property declarations
Internal CSS style sheet references
External CSS style sheet references
Developers can apply style directly to objects (using the first two methods listed) or they can use a style sheet (be it internal or external). Direct application of style allows for the quickest method to test the results of style application, whereas style sheets allow for cleaner, more organized documents.
This hour will focus on the three CSS methods of applying style to SVG elements for three reasons:
Most Web developers are already quite familiar with CSS.
The XML presentation attributes method produces excessive code, as styles cannot be consolidated.
Most SVG WYSIWYG editors produce code based on one of the three CSS methods.
Because of these reasons, the CSS methods will provide you with the most flexible and widely used conventions of applying style in SVG.