O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required