User:MarkFinkle/SVGUseCases

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:

• Charting / Graphing - Use SVG to create high quality charts and graphs complete with shading, gradients and raster image overlays. Since SVG has a DOM (like HTML) it is accessible from JavaScript and supports events, you can easily add interaction to your charts.
• Graphical Web Content & Games - SVG makes it easy to create graphics for visual web applications and games. Interactivity can be adding using events and JavaScript.
• Enhancing Web Content - SVG works together with HTML, CSS and JavaScript. This allows you to mix SVG graphics with HTML content. Simple examples are using SVG to create non-rectangular areas, areas with gradient fills and combine shapes to create non-standard widgets. More complicated examples are overlaying content with SVG paths, as in mapping applications, or adding interactive graphical process flows, or adding live charts to HTML forms.
• 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.
• Animation via JavaScript may not be smooth. Try to mitigate problems by limiting the amount of work done in the update function:
  • 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