SVG Images, Maps, and Icons

SVG (scalable vector graphics) is a XML based vector image format that is supported in all browsers except IE < version 9. SVG element is basically taking a vector image that you created in Adobe Illustrator or Inkscape. When you place it where you want, the browser will read the code and your image will appear. SVG elements use embed tag or object tag to display an image.

Pros

• SVG graphics are scalable and flexible. They do NOT lose any quality if they are zoomed or resized
• Every element and every attribute in SVG files can be animated
• SVG is a W3C recommendation (and has been since 2011 despite underuse)
• SVG images can be printed with high quality at any resolution

Cons

• If your design must be rendered in IE8, you must either provide another vector fallback (such as the more convoluted VML) or not use vector at all, and instead rely on responsively sized images.