Home > Articles

Styling SVG

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

This chapter is from the book


The Workshop is designed to help you anticipate possible questions, review what you've learned, and begin learning how to put your knowledge into practice.


  1. What is the term used to describe a CSS class's label?

  2. Describe the components of a style declaration.

  3. Style sheets are contained within what element?

  4. What is the function of a CDATA section?

  5. What does the author recommend naming class selectors according to?


  1. A selector is the label used to reference a CSS class.

  2. A style declaration is composed of a style property (such as stroke) and a style value (such as green) separated by a colon.

  3. An internal style sheet is contained within a CDATA section, which is contained within a style element.

  4. CDATA sections are used to prevent their contained content from being parsed as SVG by an SVG viewer. Nonetheless, CDATA's content must adhere to the XML syntax rules for the element. For more information on CDATA, see the W3School's example: http://www.w3schools.com/xml/xml_cdata.asp.

  5. Naming selectors according to their declaration's function allows other developers the ability to discern the function of a class without needing to reference the style sheet.


  1. Check out the W3C SVG recommendation and read chapter 6.4 about using XML presentation attributes to define style application. If you feel daring, revisit Listing 6.1 and apply the selected styles already in use via the XML method.

  2. Review the possible style properties in the recommendation's Appendix N. Although Hour 7, "Painting," will discuss fills and strokes, there are a variety of other properties that can be applied to your artwork that won't be covered in this book.

  • + Share This
  • 🔖 Save To Your Account