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

Home > Articles > Design

  • Print
  • + Share This
From the author of

Building a Portfolio of Visual Components

One of the issues that hits you as time passes and you build up a portfolio of SVG images is just where you can find that filter or animation you liked so much and that would be just right to make use of again.

Structuring a portfolio

I am working through this issue with my own collection of visual components. The fact that I, as you have seen, tend to make heavy use of nested <svg> elements has the advantage that I can break out those nested <svg> elements and simply copy them to separate files. Because they have an outer <svg> element, they are legal SVG document fragments and can stand alone in a file and be displayed by an SVG viewer.

I usually give visual components very long filenames, such as DiagonalGradientThreeStops01.svg or DiagonalGradientThreeStopsAnimated01.svg, which tells me at least a little about the nature of the visual component.

One of the more problematic areas, even when using very long filenames, is how best to store and use filters. Creating a nice filter can take quite a bit of effort, and yet it might contain multiple filters. I give those names such as FilterWhichDoesSomethingNice.svg. The visual effect is what I am most likely to remember them by, not any specific combination of SVG filter primitives.

Within each file, you can make use of the <desc> element to document important details of what the SVG does. Using the <desc> element is more convenient than using ordinary XML comments.

Backing up

I don't know how thorough you are about making backups of images or Web pages you create, but I suggest that you give serious thought to a backup strategy for your growing library of SVG visual components.

Those SVG visual components, properly used, are a significant asset for your graphics design activities, so it pays to take care of them. Think about how regularly you should back them up.

Of course, one side to this issue might make you less inclined to back up locally: You already have an off-site backup on the Web! All your SVG images on the Web are continuously accessible to you (barring server failure at your or your client's Web hosting company). I suggest that you don't rely solely on that and take active steps to store your visual components safely.

If you go on to build up your SVG skills, you can add to your library of SVG components all the more quickly.

  • + Share This
  • 🔖 Save To Your Account