I have created a test page to determine how current web browsers deal with SVG in HTML, using an SVG file as an OBJECT element, an IMG element, or as CSS background.
My main purpose for this was to discover the limitations of Webkit’s ability to display SVG files as CSS backgrounds, after which I thought it might be helpful to show the other methods too.
Here is the SVG test page.
Currently, only Opera 9.5+ is able to render all the instances correctly.
Webkit (Safari, Chrome) appears to only be able to display SVG as CSS backgrounds under the following conditions:
- The HTML container may not larger than the width and height set in the SVG file
- The SVG file must have a width and height set
- Only elements in the SVG file with pixel rather than percentage positioning will appear
Similar restrictions exist for images.
There doesn’t appear to be a specification that states how SVGs should be handled in CSS backgrounds, so technically there’s nothing that says that Opera’s more flexible rendering is any more correct than Webkit’s. However, having more restrictions than it does on regular images seems odd. Tiling the image, for example, is not possible in Webkit.
Hopefully Webkit will at some point adopt Opera’s method, until then it’s limited to fixed width vector images in fixed width containers. Gecko, in the mean time, continues to have open bug reports for CSS in image as well as CSS, and anything from IE will have to wait until IE9 or a sudden switch to Webkit.