Home > Articles

Symbols in SVG

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

This chapter is from the book

Workshop

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.

Quiz

  1. True or False: Symbols allow you to reuse the same piece of artwork multiple times in one document.

  2. Which element is used to store a series of symbols and other referential items?

  3. For an object to be referenced as a symbol by the use element, what attribute must it have defined?

  4. True or False: The use element cannot accept the style attribute.

  5. True or False: Symbols can reside within other symbols.

Answers

  1. True. A symbol can be referenced indefinitely within a document, creating as many duplicates of the symbol as there are references for it in the document.

  2. The defs element is used to harbor symbols and other content to be referenced in an SVG document.

  3. The use element requires an symbol to be named via the id attribute so that its xlink:href attribute can specify a specific item.

  4. False. SVG symbols can accept radically different appearances because their referencing agent (the use element) can accept additional visual information through the style attribute.

  5. True. Yet another powerful aspect of the SVG symbol is its ability to use other symbols within itself. By using a symbol within a symbol (within a symbol, and so on), you can create a very modular design that is easy to update quickly.

Exercise

In last hour's exercises, you created a pattern containing a series of gradated objects and applied it to an object. Now, take that object, make it a symbol, and reference it several times in your document. Alter one of the gradient's colors and watch your efficiency at work.
  • + Share This
  • 🔖 Save To Your Account