[whatwg] How to use SVG in HTML5?

[Vlad Alexander (xhtml.com)]

Embedding SVG by reference (thought the img element) is well suited to HTML. SVG was designed for this as stated in "Embedding by reference" section here:

http://www.w3.org/TR/SVG11/concepts.html#UsageOptions

I tested Opera's support for SVG through the img element and it incorrectly clips the SVG image. The width and height attributes of the img element need to set the viewport for the SVG image and scale the SVG non-uniformly to fit the viewport.

The advantages of using the img element to render SVG over the object element or inline SVG are:

1. Existing authoring tools and CMS can support SVG without major modifications. For example, most CMS that support image libraries are hard wired to generate the img element when an image is selected from an image library.

2. Using SVG through the img element is more accessible solution because existing assistive technologies support the alt attribute whereas support for the object fallback mechanism is limited and support for inline SVG is non-existent. Also, even though SVG supports title and desc elements which are meant to increase accessibility of SVG, most SVG documents do not use them. So having the alt attribute on the img element is more accessible solution than relying on title and desc inside SVG.

Regards,
-Vlad
http://xhtml.com