Inline SVG use

It's often suggested we use inline usage of SVG in place of rastered PNG:

Good:

• Scales better with client zoom
• Better print quality
• Potential for interactivity
• In some cases, faster transfer (SVG can have smaller file size)

Bad:

• More important to sanitize JS for browser security
• Possibly inconsistent rendering between clients
• In many cases, slower transfer (SVG can have much, MUCH larger file size than rendered PNG)
• In some cases, SVG originals are verrrrry slow display in browsers
  • (try anything with filters! Example commons:File:Anime Girl.svg)
• No native Internet Explorer support

Things to consider

Compatibility (as of March 2012)

• All major desktop/laptop browsers provide support for HTML5+SVG as well as for XHTML 1 + SVG

Compatibility for older browsers:

• http://code.google.com/p/svgweb/
  • Flash+JS implementation of SVG rendering which provides support for IE. Could be interesting if reliable and performant!

Performance:

• A tool to decimate highly-detailed images to something that looks about the same in a more browser-sized way might be nice... still more scaling-friendly than a raster image, but could be much smaller than a super-detailed map of the entire US or something

See also

• SVG