Inline SVG use

Jump to navigation Jump to search

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


  • Use with templates: dinamically rendering figures with logical templates
  • Scales better with client zoom
  • Better print quality
  • Potential for interactivity
  • In some cases, faster transfer (SVG can have smaller file size)


  • 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
  • No native Internet Explorer support before IE 9

Things to consider[edit]

Today, 2017, no problem, only advantages!

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:


  • 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[edit]