Posts Tagged ‘SVG’
An update to the “When can I use” page, now you can filter by spec status. This is helpful to only see support for full W3 recommendations, mostly stable specs, features still in flux or completely unofficial features.
I find it interesting to see that with IE8 Microsoft has focused largely on improving items under “candidate recommendation” status (primarily CSS 2.1), whereas most full recommendations (XHTML, SVG, MathML) get ignored. Working draft features seem to only be added when the spec is pretty clear cut, such as the querySelector one.
The “When can I use…” page now makes URLs based on selections. For example, I made the following links:
- SVG support in Internet Explorer (ha ha)
- HTML5 support, including fallback options
- How does browser support look in the future?
- What could I use in a world without IE?
Just selecting the options at the top of the page will immediately generate the URL.
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.