2 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <html xmlns=
"http://www.w3.org/1999/xhtml" lang=
"en" xml:
lang=
"en" >
5 <title>SVG and Canvas Support Status in Various Browsers. | liquidx
</title>
6 <meta http-equiv=
"Content-Type" content=
"text/html; charset=UTF-8" />
7 <link href=
"http://media.liquidx.net/css/x_general.css" media=
"screen" rel=
"Stylesheet" type=
"text/css" />
8 <link href=
"http://media.liquidx.net/css/x_header.css" media=
"screen" rel=
"Stylesheet" type=
"text/css" />
9 <link href=
"http://media.liquidx.net/css/x_layout.css" media=
"screen" rel=
"Stylesheet" type=
"text/css" />
10 <link href=
"http://media.liquidx.net/css/x_blocks.css" media=
"screen" rel=
"Stylesheet" type=
"text/css" />
11 <link rel=
"icon" href=
"/favicon.png" type=
"image/x-png">
12 <link rel=
"shortcut icon" href=
"/favicon.png" type=
"image/x-png">
14 <script defer
type=
"text/javascript" src=
"http://media.liquidx.net/js/pngfix.js"></script>
17 <link href=
"doc.css" media=
"screen" rel=
"stylesheet" type=
"text/css" />
23 <div id=
"logo"><a href=
"http://www.liquidx.net/"><img src=
"http://media.liquidx.net/imgx/logo.png" width=
"256" height=
"128" alt=
"liquidx.net" /></a></div>
25 <div id=
"menu-l"><img src=
"http://media.liquidx.net/imgx/menu_l.png" width=
"17" height=
"28" alt=
"menu cap" /></div><div id=
"menu-r"><img src=
"http://media.liquidx.net/imgx/menu_r.png" width=
"17" height=
"28" alt=
"menu cap" /></div>
27 <ul id=
"menu" class=
"code">
28 <li class=
"tab" id=
"blog"><a href=
"http://www.liquidx.net/" title=
"blog/home">blog
</a></li>
29 <li class=
"tab" id=
"code"><a href=
"http://www.liquidx.net/code/" title=
"software i have written">software
</a></li>
30 <li class=
"tab" id=
"dev"><a href=
"http://projects.liquidx.net/" title=
"source code for my open source projects">dev
</a></li>
31 <li class=
"tab" id=
"photos"><a href=
"http://al.tse.id.au/gallery/" title=
"photos and videos">photos
</a></li>
32 <li class=
"tab" id=
"research"><a href=
"http://al.tse.id.au/research/" title=
"research profile">research
</a></li>
33 <li class=
"tab" id=
"links"><a href=
"http://www.liquidx.net/links/" title=
"my bookmarks">linkblog
</a></li>
34 <li class=
"tab" id=
"stats"><a href=
"http://stats.liquidx.net/" title=
"stats for various parts of my website">stats
</a></li>
35 <li class=
"tab" id=
"status"><a href=
"http://www.liquidx.net/status/" title=
"weather report for alastair">status
</a></li>
36 <li class=
"tab" id=
"about"><a href=
"http://al.tse.id.au/" title=
"about alastair tse">aboutme
</a></li>
40 <div id=
"quickbuttons">
41 <span class=
"quickbutton"><a href=
"http://www.liquidx.net/albumartwidget/"><img src=
"http://media.liquidx.net/imgx/quick_widget.png" alt=
"album art widget" /></a></span>
42 <span class=
"quickbutton"><a href=
"http://www.liquidx.net/plotkit/"><img src=
"http://media.liquidx.net/imgx/quick_plotkit.png" alt=
"plotkit" /></a></span>
43 <span class=
"quickbutton"><a href=
"http://www.liquidx.net/fruity/"><img src=
"http://media.liquidx.net/imgx/quick_fruity.png" alt=
"fruity" /></a></span>
49 <div class=
"page doc">
52 <h1> State of SVG and Canvas in Modern Browsers
</h1>
53 <p> <strong>By: Alastair Tse - Last Updated:
27 April
2006</strong>
55 <p>My friends, just like HTML and CSS, different browsers support
56 different subsections of the SVG and Canvas specification. As part of
57 my work on PlotKit, the next generation javascript plotting library,
58 I've decided to summarise all the quirks in SVG and Canvas support.
61 <h1> Browsers Considered
</h1>
62 <p>I am looking at browsers that are considered
"modern
" as of
63 March
2006. These include:
67 <a href=
"http://apple.com/safari/">Safari
2.0.x
</a> (W/
<a href=
"http://www.adobe.com/svg/">Adobe SVG Plugin
</a>)
71 <a href=
"http://www.mozilla.com/firefox/">Firefox
1.5.x
</a>
75 <a href=
"http://snapshot.opera.com/">Opera
9.0 Preview
2</a>
79 <a href=
"http://www.microsoft.com/windows/ie/">Internet Explorer
6</a> (w/
<a href=
"http://www.adobe.com/svg/">Adobe SVG Plugin
</a>)
82 <p>I am also looking at some experiemental browsers as of March
2006.
86 <a href=
"http://www.microsoft.com/windows/IE/ie7/default.mspx">Internet Explorer
7 beta
2 preview + ASV
</a>
90 <a href=
"http://nightly.webkit.org/">Safari WebKit+SVG Nightly
2006-
03-
11</a>
94 <a href=
"http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox Deerpark Nightly
2006-
03-
11</a>
101 Canvas is defined by the WHATWG in what is known as the
102 <a href=
"http://whatwg.org/specs/web-apps/current-work/">Web Applications
1.0 specification
</a>
106 <h2> Supporting Browsers
</h2>
109 Safari
2.0 and above.
117 Firefox
1.5 and above.
123 <li><p> <strong>Safari
</strong> will forget a path after
<code>fill()
</code> or
<code>stroke()
</code> has
124 been called. Therefore, if you need to fill and stroke the same
125 path, you must draw the path out twice.
130 <li><p> <strong>Opera
</strong> will not obey
<code>stroke()
</code> for arc paths.
135 <li><p> <strong>Firefox
</strong> and
<strong>Opera
</strong> will not draw shadows even with
136 <code>shadowStyle
</code> or
<code>shadowOffset
</code> is set on the context object.
145 SVG support is either provided natively, or through the Adobe SVG
150 <h2> Supporting Browsers (Inline)
</h2>
157 Internet Explorer
6 + ASV
161 Safari Webkit+SVG Nightly
169 Mozilla Firefox
1.5 and above
173 <h2> Quirks (Inline)
</h2>
175 <li><p> <strong>Safari Nightly
</strong> will not render any
<code>text
</code> elements when
176 inlined. (Will do so if using
<code>embed
</code>)
181 <li><p> <strong>Safari
2.0 + ASV
</strong> will not respect inlined SVG.
186 <li><p> <strong>Internet Explorer
6 + ASV
</strong> will only parse inlined SVG if the
187 following is added to the HTML and all SVG elements are in the
188 correct namespace
<code>svg:
</code>.
193 <p> following is added to the HTML and all SVG elements are in the
194 correct namespace
<code>svg:
</code>.
196 <pre><code><html xmlns=
"http://www.w3.org/
1999/xhtml
" xml:lang=
"en
" lang=
"en
"
197 xmlns:svg=
"http://www.w3.org/
2000/svg
"
198 xmlns:xlink=
"http://www.w3.org/
1999/xlink
">
201 <!-- START Required for IE to support inlined SVG --
>
202 <object id=
"AdobeSVG
"
203 classid=
"clsid:
78156a80-c6a1-
4bbf-
8e6a-
3cd390eeb4e2
" width=
"1"
204 height=
"1"></object
>
205 <?import namespace=
"svg
" implementation=
"#AdobeSVG
"?
>
206 <!-- END Required for IE to support inlined SVG --
>
207 <svg:svg width=
"300" height=
"300" baseProfile=
"full
" version=
"1.1"></svg:svg
>
211 <li><p> <strong>Mozilla Firefox (
1.5 and nightly) on Mac
</strong> will not render
212 <code>text
</code> elements when inlined. Note that it does for Linux and Windows.
217 <li><p> <strong>Opera
9</strong> will refuse to draw an element if attribute
<code>filter
</code>
227 <strong>Internet Explorer
7b2p + ASV
</strong> will not work with the Adobe SVG Viewer.
232 <p>The above is presented as-is with my own findings. There may be
233 errors. Please do not use this to base your multi-million dollar
238 <p>If you have anything to add or modify, please contact me at
239 <a href=
"mailto:alastair@liquidx.net">alastair@liquidx.net</a>.
251 <h3>Syndication Feeds:
</h3>
254 <li><a href=
"http://www.liquidx.net/blog/feed/atom/" class=
"feed" title=
"feed for all posts on liquidx.net"><img src=
"http://media.liquidx.net/imgx/feed.gif" class=
"feed" alt=
"feed" />Atom Feed for the Blog Entries
</a></li>
255 <li><a href=
"http://www.liquidx.net/blog/feed/rss/" class=
"feed" title=
"feed for all posts on liquidx.net"><img src=
"http://media.liquidx.net/imgx/feed.gif" class=
"feed" alt=
"feed" />RSS Feed for the Blog Entries
</a></li>
256 <li><a href=
"http://www.liquidx.net/comments/feed/atom/" class=
"feed" title=
"feed for all posts on liquidx.net"><img src=
"http://media.liquidx.net/imgx/feed.gif" class=
"feed" alt=
"feed" />Feed for All Comments
</a></li>
257 <li><a href=
"http://www.liquidx.net/links/feed/atom/" class=
"feed" title=
"feed for all bookmarked links"><img src=
"http://media.liquidx.net/imgx/feed.gif" class=
"feed" alt=
"feed" />Feed for Links
</a></li>
262 <h3>About this site:
</h3>
263 <p>Content on this site is licensed under
<a href=
"http://creativecommons.org/licenses/by/2.5/">CC By Attribution
</a> unless otherwise specified.
264 Copyright (c)
2002-
2006,
<a href=
"http://al.tse.id.au/">Alastair Tse
</a>.
</p>
265 <p>For more information, see
<a href=
"http://al.tse.id.au/">al.tse.id.au
</a>.
</p>
266 <p><script type=
"text/javascript" src=
"http://technorati.com/embed/itwctkzez.js"></script></p>
269 <h3>Is Made Possible By:
</h3>
272 <dt><a href=
"http://ecto.kung-foo.tv/" class=
"clean">ecto
</a>.
</dt>
273 <dd>Blogging client for Mac
</dd>
274 <dt><a href=
"http://djangoproject.com/" class=
"clean">Django
</a>.
</dt>
275 <dd>Python Web Framework
</dd>
276 <dt><a href=
"http://www.lighttpd.net/" class=
"clean">lighttpd
</a>.
</dt>
277 <dd>Really Fast Web Server
</dd>
278 <dt><a href=
"http://www.saddi.com/software/flup/" class=
"clean">flup
</a>.
</dt>
279 <dd>FastCGI for Python
</dd>
284 <h3>Search My Sites:
</h3>
286 <div style='margin:
10px; text-align: center; width:
160px;'
><form action='http://www.rollyo.com/search.html'
><fieldset style='margin:
0; padding:
4px
0 0 0; height:
60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'
><div style=
"position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href=
"http://rollyo.com"><img style=
"border: none;" height=
"50" width=
"46" src=
"http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='
30' style='float: left; width:
90px; margin:
2px
0 0 48px; padding:
0; font-size:
12px;' name='q' value='Search...' onclick='this.
value=
"";'
/><br /> <select name='sid' style='float: left; width:
78px; height:
15px; margin:
12px
0 0 46px; font-size:
7pt; padding:
0;'
><option value='
106081' selected='selected'
>liquidx
</option><option value='web'
>Search The Web
</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin:
12px
0 0 3px; float: left;'
/><input type='hidden' name='togo-v' value='
1'
/></fieldset></form></div>
291 <div class=
"clear"> </div>
297 <script src=
"http://www.google-analytics.com/urchin.js" type=
"text/javascript"></script>
298 <script type=
"text/javascript">
299 _uacct =
"UA-58117-1";