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

Home > Articles > Design

  • Print
  • + Share This
From the author of

Using Components that Save Time and Work

As you gather experience with SVG and increase your stock of working SVG code, the reuse of that careful effort you invested earlier is sensible.

An important question is how you structure and store the visual components you have created. I return to that question later in this article.

Saving debugging time

When you cut and paste code from previous SVG projects, you are, or ought to be, using code that has been well tested. You likely invested time in carefully constructing that code and testing its animations, interactivity, and links, for example, to ensure that they were working as you want them to.

Of course, when you reuse that code, you likely do not want to use it exactly in its original form. As you tweak some attribute values or refine some animation timing, you have to be careful not to introduce new errors into code that was previously working.

From time to time, you inevitably will make a syntax error as you adjust the code to its new purpose. If you have taken my advice to change one thing at a time and to test the static display and animations frequently, you likely know what changes you have made since the code last worked correctly. Those changes are where you should be focusing your debugging task. When you have made only one or two changes since last viewing the result, you have only one or two places to look, and spotting the error shouldn't take long.

If you have made ten or a dozen changes since you last checked whether the SVG was being displayed correctly, you have only yourself to blame if you can't even remember what two or three of the changes were. If you code in that way, expect to have some long, frustrating debugging sessions. I don't enjoy those one bit and try to code in such a way as to make them rare occurrences. I suggest that because you won't enjoy debugging, you should carefully follow a step-by-step approach on each part of an SVG project.

Breaking down the barriers to using components fully

At the time this article was written, some of the most helpful aspects of SVG for fully exploiting SVG components are missing. The biggest single omission is the absence of any implementation of the SVG <image> element that can include or import existing SVG images.

Hopefully, by the time you read this, Adobe might have implemented the SVG image-import part of the <image> element. That facilitates the reuse of SVG components, pretty much along the lines of the XML entities I discussed in the early part of this chapter.

  • + Share This
  • 🔖 Save To Your Account