plotkit_v091/doc/SVGCanvasCompat.html

   1
   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" >
   4 <head>
   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">
  13         <!--[if lt IE 7.]>
  14         <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
  15         <![endif]-->
  16
  17 <link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
  18
  19 </head>
  20
  21 <body>
  22     <div id="header">
  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>
  24                 <div id="menu-hack">
  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>
  26             <div id="menu-main">
  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>
  37                         </ul>
  38                 </div>
  39         </div>
  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>
  44                 </div>
  45
  46         </div>
  47
  48     <div id="body">
  49 <div class="page doc">
  50
  51
  52 <h1> State of SVG and Canvas in Modern Browsers</h1>
  53 <p> <strong>By: Alastair Tse - Last Updated: 27 April 2006</strong>
  54 </p>
  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.
  59 </p>
  60
  61 <h1> Browsers Considered</h1>
  62 <p>I am looking at browsers that are considered &quot;modern&quot; as of
  63    March 2006. These include:
  64 </p>
  65 <ul>
  66  <li>
  67       <a href="http://apple.com/safari/">Safari 2.0.x</a> (W/ <a href="http://www.adobe.com/svg/">Adobe SVG Plugin</a>)
  68  </li>
  69
  70  <li>
  71       <a href="http://www.mozilla.com/firefox/">Firefox 1.5.x</a>
  72  </li>
  73
  74  <li>
  75       <a href="http://snapshot.opera.com/">Opera 9.0 Preview 2</a>
  76  </li>
  77
  78  <li>
  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>)
  80  </li>
  81 </ul>
  82 <p>I am also looking at some experiemental browsers as of March 2006.
  83 </p>
  84 <ul>
  85  <li>
  86       <a href="http://www.microsoft.com/windows/IE/ie7/default.mspx">Internet Explorer 7 beta 2 preview + ASV</a>
  87  </li>
  88
  89  <li>
  90       <a href="http://nightly.webkit.org/">Safari WebKit+SVG Nightly 2006-03-11</a>
  91  </li>
  92
  93  <li>
  94       <a href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox Deerpark Nightly 2006-03-11</a>
  95  </li>
  96 </ul>
  97
  98 <h1> Canvas</h1>
  99 <ul>
 100  <li>
 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>
 103  </li>
 104 </ul>
 105
 106 <h2> Supporting Browsers</h2>
 107 <ul>
 108  <li>
 109      Safari 2.0 and above.
 110  </li>
 111
 112  <li>
 113      Opera 9.0 and above.
 114  </li>
 115
 116  <li>
 117      Firefox 1.5 and above.
 118  </li>
 119 </ul>
 120
 121 <h2> Quirks</h2>
 122 <ul>
 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.
 126 </p>
 127
 128  </li>
 129
 130  <li><p> <strong>Opera</strong> will not obey <code>stroke()</code> for arc paths.
 131 </p>
 132
 133  </li>
 134
 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.
 137 </p>
 138
 139  </li>
 140 </ul>
 141
 142 <h1> SVG</h1>
 143 <ul>
 144  <li>
 145      SVG support is either provided natively, or through the Adobe SVG
 146        Viewer (ASV).
 147  </li>
 148 </ul>
 149
 150 <h2> Supporting Browsers (Inline)</h2>
 151 <ul>
 152  <li>
 153      Safari 2.0 + ASV
 154  </li>
 155
 156  <li>
 157      Internet Explorer 6 + ASV
 158  </li>
 159
 160  <li>
 161      Safari Webkit+SVG Nightly
 162  </li>
 163
 164  <li>
 165      Opera 9.0 and above
 166  </li>
 167
 168  <li>
 169      Mozilla Firefox 1.5 and above
 170  </li>
 171 </ul>
 172
 173 <h2> Quirks (Inline)</h2>
 174 <ul>
 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>)
 177 </p>
 178
 179  </li>
 180
 181  <li><p> <strong>Safari 2.0 + ASV</strong> will not respect inlined SVG.
 182 </p>
 183
 184  </li>
 185
 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>.
 189 </p>
 190
 191  </li>
 192 </ul>
 193 <p>  following is added to the HTML and all SVG elements are in the
 194      correct namespace <code>svg:</code>.
 195 </p>
 196 <pre><code>&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;
 197 xmlns:svg=&quot;http://www.w3.org/2000/svg&quot;
 198 xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
 199 ...
 200 &lt;body&gt;
 201 &lt;!-- START Required for IE to support  inlined SVG --&gt;
 202 &lt;object id=&quot;AdobeSVG&quot;
 203 classid=&quot;clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2&quot; width=&quot;1&quot;
 204 height=&quot;1&quot;&gt;&lt;/object&gt;
 205 &lt;?import namespace=&quot;svg&quot; implementation=&quot;#AdobeSVG&quot;?&gt;
 206 &lt;!-- END   Required for IE to support inlined SVG --&gt;
 207 &lt;svg:svg width=&quot;300&quot; height=&quot;300&quot; baseProfile=&quot;full&quot; version=&quot;1.1&quot;&gt;&lt;/svg:svg&gt;
 208 &lt;/body&gt;
 209 &lt;/html&gt;
 210 </code></pre><ul>
 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.
 213 </p>
 214
 215  </li>
 216
 217  <li><p> <strong>Opera 9</strong> will refuse to draw an element if attribute <code>filter</code>
 218      is defined.
 219 </p>
 220
 221  </li>
 222 </ul>
 223 <p>  is defined.
 224 </p>
 225 <ul>
 226  <li>
 227       <strong>Internet Explorer 7b2p + ASV</strong> will not work with the Adobe SVG Viewer.
 228  </li>
 229 </ul>
 230
 231 <h1> Disclaimer</h1>
 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
 234    business decisions.
 235 </p>
 236
 237 <h1> Contact</h1>
 238 <p>If you have anything to add or modify, please contact me at
 239    <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#97;&#108;&#97;&#115;&#116;&#97;&#105;&#114;&#64;&#108;&#105;&#113;&#117;&#105;&#100;&#120;&#46;&#110;&#101;&#116;">&#97;&#108;&#97;&#115;&#116;&#97;&#105;&#114;&#64;&#108;&#105;&#113;&#117;&#105;&#100;&#120;&#46;&#110;&#101;&#116;</a>.
 240 </p>
 241
 242
 243 </div>
 244 </div>
 245
 246
 247
 248
 249     <div id="footer">
 250                 <div class="block">
 251                         <h3>Syndication Feeds:</h3>
 252                         <p>
 253                                 <ul class="tiny">
 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>
 258                                 </ul>
 259                         </p>
 260                 </div>
 261                 <div class="block">
 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>
 267                 </div>
 268                 <div class="block">
 269                         <h3>Is Made Possible By:</h3>
 270                         <p>
 271                         <dl>
 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>
 280                         </dl>
 281                         </p>
 282                 </div>
 283         <div class="block">
 284             <h3>Search My Sites:</h3>
 285             <p>
 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>
 287                </p>
 288           </div>
 289
 290
 291                 <div class="clear">&nbsp;</div>
 292
 293     </div>
 294
 295
 296
 297    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
 298    <script type="text/javascript">
 299    _uacct = "UA-58117-1";
 300    urchinTracker();
 301    </script>
 302
 303 </body>
 304 </html>