Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design

  • Print
  • + Share This
From the author of

Understanding the <svg> Element and Visual Components

You can nest <svg> elements within an outer <svg> element. In some senses, that nesting functionally does the same thing as using an <image> element to import separate SVG files, each nested within its own outer <svg> element.

One use of such nested <svg> elements is as a grouping element. Another is for use as independent visual components. Because the <svg> element that ultimately is nested can be used as the outer <svg> element of a separate component during testing, you can develop all the content of the <svg> element as a separate document fragment.

In a team setting, assuming that the size and other relevant parameters of the (to be) nested <svg> element are sufficiently clear, individual members of the design team can implement separate parts of a complex SVG image or Web page.

After each team member has created the <svg> element assigned to her and the elements have been tested, they can be pasted into one SVG document that makes use of the visual components created by individual designers.

The <use> element

Any basic coverage of an SVG document should illustrate the straightforward reuse of visual components within a single SVG document.

If you want to create an SVG image of the United States flag, for example, you need to have a substantial number of identical stars. Rather than redefine those one at a time, creating one correctly sized and shaped star and then accessing it multiple times by using the <use> element makes much more sense. This process cuts down the length of the SVG code a little and means that the code for a star has to be tested only once. Testing the code for each <use> element should be straightforward because, apart from adjusting the x and y attributes to ensure correct placement of each star, there are no differences between each example.

The stars wouldn't be the only reusable component in the Stars and Stripes because the stripes can also be reused.

The <defs> element

The <defs> element also helps you to reuse code. If you want to use a gradient in more than one element in an image, for example, you simply define the gradient once and refer to it twice or more. That technique saves code and also saves time for testing the gradient.

Use in multiple documents

At a deeper level, a navigation bar can be saved in its own file for copying and pasting into another application later. A limit must exist on how many ways a horizontal text navigation bar, for example, can be created. Of course, its colors and other characteristics are adapted in its new use, but the basic structure and function remain the same. So why not reuse the good code you already have at hand?

  • + Share This
  • 🔖 Save To Your Account