SVG Use Cases
SVG is designed to mix well with other Web technologies. This allows technologies to leverage each other. Here are some ways SVG can be used in Web applications:
- Transforming Web Content - SVG's foreignObject support and transformation features allow developers to create effects that are difficult or not possible in HTML or CSS alone. Scaling, rotating, clipping and filtering HTML content are examples.
SVG Rules of Thumb
Mozilla's SVG implementation is pretty solid, but like anything, there are gotcha's and caveats to consider.
- Filters are slow. This is especially true when:
- Combining various filters together using feComposite or feMerge
- Applying filters to many elements, like drop shadows in a flowchart or diagram.
- Cache the animated elements instead of searching for them in each update loop.
- Only animate a subset of the elements in each update loop.
- Experiment with the update interval length to get the smoothest animation.
- Reduce animation loops to use a single timer, instead of a separate timer for each loop. 1