Issues and Answers (I&A)

Using SVG1.1 images in HTML5 on "Standards Compliant" Browsers

Issue Description

One of the basic "theoretical" advantages of SVG graphics on the web is being able to use one graphics file in multiple locations and multiple sizes on a web page as well as site wide with little or no loss of detail or image quality. Ideally, SVG files should code in HTML exactly the same as jpeg, png, or gif files. In reality this is not yet the case but browsers are making remarkable (sometimes rapid) progress on this front. This page is intended to be both a summary and a "visual test suite" of browser progress (or lack thereof) toward this goal. If and when universal browser support of svg is implemented, it can be expected that the following methods would work when trying to use an existing SVG1.1 image in HTML5:

HTML5 elements for displaying SVG1.1 image files This table should display the sample SVG1.1 image exactly the same way as the more common raster based image file formats on browsers which are truly compliant in HTML5. Regardless of the tag used to display it the raster and vector versions of the image should display identicaly. Browsers which accomplish this will be treated as fully compliant with the standard. The HTML code used in each example makes no use of CSS but the image size should be properly constrained by the "height" and "width" attributes for each respective element. The criteria for browser compliance using the <iframe> tag is complicated since the purpose of the iframe element is the embedding of one html document in another. Because of this, displaying the vector image the same way as the raster version is sufficient for compliance. The standard for compliance in the last two columns below will be the display of the vector image the same as a raster image coded using the <imag /> tag.

Tag:	<img />	<embed>	<object>	<iframe>	Inline <svg> with external reference	Inline <svg>
Raster Example:					N/A	N/A
SVG (Vector) Example:
Supported By:
Last Test Date:	11APR2014	11APR2014	11APR2014	11APR2014	11APR2014	11APR2014
Related I&A:

HTML5 elements for displaying SVG1.1 image files using CSS2.1 This table should display the sample SVG1.1 image exactly the same way as the more common raster based image file formats on browsers which are truly compliant in HTML5. Regardless of the tag used to display it the raster and vector versions of the image should display identicaly. Browsers which accomplish this will be treated as fully compliant with the standard. The HTML code used in each example makes use of the CSS2.1 "height" and "width" properties for each respective element. The criteria for browser compliance using the <iframe> tag is complicated since the purpose of the iframe element is the embedding of one html document in another. Because of this, displaying the vector image the same way as the raster version is sufficient for compliance. The similar to the standard for compliance in the table above, the last two columns below must display of the vector image the same as a raster image coded using the <img /> tag. There is an additional hurdle in the last column however of the browser properly implementing the <use /> element of SVG1.1 in displaying the previously inline SVG1.1 declaration of the image.

Tag:	<img />	<embed>	<object>	<iframe>	Inline <svg> with external reference	Inline <svg>
Raster Example:					N/A	N/A
SVG (Vector) Example:
Supported By:
Last Test Date:	11APR2014	11APR2014	11APR2014	11APR2014	11APR2014	11APR2014
Related I&A:

Displaying only part of a SVG1.1 image file in HTML5 This table should display only the eagle with the anchor portion for the sample SVG1.1 image which is containded in a container element with the id attribute value of "Inner_Seal" on browsers which are truly compliant in HTML5. Regardless of the tag used to display it only that portion of the SVG document should be displayed. Browsers which accomplish this will be treated as fully compliant with the standard. The HTML code used in each example makes use of the CSS2.1 "height" and "width" properties for each respective element. The criteria for browser compliance using the <iframe> tag is complicated since the purpose of the iframe element is the embedding of one html document in another. Because of this, simply displaying only the "Inner_Seal" portion of the vector image is sufficient for compliance. As in the table above, the last column assumes the browser properly implements the <use /> element of SVG1.1 in displaying the desired "Inner_Seal" portion of the already declared inline SVG1.1 coding of the image.

Tag:	<img />	<embed>	<object>	<iframe>	Inline <svg> with external reference	Inline <svg>
SVG (Vector) Example:
Supported By:
Last Test Date:	11APR2014	11APR2014	11APR2014	11APR2014	11APR2014	11APR2014
Related I&A: