Home > Articles

Styling SVG

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

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.

  • + Share This
  • 🔖 Save To Your Account