- Envisioning XML and Visual Components
- Understanding the <svg> Element and Visual Components
- Using Components that Save Time and Work
- Creating a Plug-In Component and Making It Mobile
- Building a Portfolio of Visual Components
- About This Article
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?