State of SVG and Canvas in Modern Browsers
By: Alastair Tse - Last Updated: 15 March 2006
My friends, just like HTML and CSS, different browsers support different subsections of the SVG and Canvas specification. As part of my work on PlotKit, the next generation javascript plotting library, I've decided to summarise all the quirks in SVG and Canvas support.
Browsers Considered
I am looking at browsers that are considered "modern" as of March 2006. These include:
- Safari 2.0.x (W/ Adobe SVG Plugin)
- Firefox 1.5.x
- Opera 9.0 Preview 2
- Internet Explorer 6 (w/ Adobe SVG Plugin)
I am also looking at some experiemental browsers as of March 2006.
Canvas
- Canvas is defined by the WHATWG in what is known as the Web Applications 1.0 specification
Supporting Browsers
- Safari 2.0 and above.
- Opera 9.0 and above.
- Firefox 1.5 and above.
Quirks
-
Safari will forget a path after
fill()
orstroke()
has been called. Therefore, if you need to fill and stroke the same path, you must draw the path out twice.
path, you must draw the path out twice.
Opera will not obey
stroke()
for arc paths.Firefox and Opera will not draw shadows even with
shadowStyle
orshadowOffset
is set on the context object.
SVG
- SVG support is either provided natively, or through the Adobe SVG Viewer (ASV).
Supporting Browsers (Inline)
- Safari 2.0 + ASV
- Internet Explorer 6 + ASV
- Safari Webkit+SVG Nightly
- Opera 9.0 and above
- Mozilla Firefox 1.5 and above
Quirks (Inline)
Safari Nightly will not render any
text
elements when inlined. (Will do so if usingembed
)Safari 2.0 + ASV will not respect inlined SVG.
Internet Explorer 6 + ASV will only parse inlined SVG if the following is added to the HTML and all SVG elements are in the correct namespace
svg:
.
following is added to the HTML and all SVG elements are in the
correct namespace svg:
.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
...
<body>
<!-- START Required for IE to support inlined SVG -->
<object id="AdobeSVG"
classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2" width="1"
height="1"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>
<!-- END Required for IE to support inlined SVG -->
<svg:svg width="300" height="300" baseProfile="full" version="1.1"></svg:svg>
</body>
</html>
Mozilla Firefox (1.5 and nightly) on Mac will not render
text
elements when inlined. Note that it does for Linux and Windows.Opera 9 will refuse to draw an element if attribute
filter
is defined.Internet Explorer 7 will not work with the Adobe SVG Viewer. Also, it's native SVG renderer does not work with inline content either.
Viewer. Also, it's native SVG renderer does not work with inline content either.
Disclaimer
The above is presented as-is with my own findings. There may be errors. Please do not use this to base your multi-million dollar business decisions.
Contact
If you have anything to add or modify, please contact me at alastair@liquidx.net.