plotkit_v091/doc/PlotKit.SVG.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>PlotKit.SVG | 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 api">
  50
  51 <p> <a href="PlotKit.html">PlotKit Home</a> | <a href="PlotKit.Canvas.html">&lt;&lt;</a> | <a href="PlotKit.SweetCanvas.html">&gt;&gt;</a>
  52 </p>
  53
  54 <h1> PlotKit SVG</h1>
  55 <p>PlotKit SVG includes the SVGRenderer which allows chart plotting on SVG capable browsers such as Firefox 1.5 and Opera 9.0. It should support Adobe SVG plugin, but is current untested.
  56 </p>
  57
  58 <h2> Important Implementation Requirements</h2>
  59 <p>In order to use the SVG Renderer, the file and webserver must support inline SVG files. This means the following conditions must exist:
  60 </p>
  61
  62 <h3>The HTML file must be XHTML compliant. </h3>
  63 <p>So it should start off with this:
  64 </p>
  65 <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
  66 &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
  67 &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
  68 &lt;html
  69 xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;
  70 xmlns:svg=&quot;http://www.w3.org/2000/svg&quot;
  71 xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
  72 &lt;head&gt;
  73   &lt;object id=&quot;AdobeSVG&quot; classid=&quot;clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2&quot; width=&quot;1&quot; height=&quot;1&quot;&gt;&lt;/object&gt;
  74   &lt;?import namespace=&quot;svg&quot; implementation=&quot;#AdobeSVG&quot;?&gt;
  75 ...
  76 </code></pre>
  77 <h3>Correct XHTML Mime-Type</h3>
  78 <p>Firefox and MSIE are fussy about the mimetype to do in-line
  79    SVG. Firefox requires that either the URL ends in .html or that the
  80    file is returned as mime type <code>application/xhtml+xml</code> in the HTTP
  81    headers.
  82 </p>
  83 <p>However, MSIE does not recognise <code>application/xhtml+xml</code> and will
  84    work fine with regular <code>text/html</code> mimetype for XHTML.
  85 </p>
  86
  87 <h3>Non XHTML Compliant javascript includes</h3>
  88 <p>You cannot use the autoloading MochiKit.js, but instead include all the JS files individually or use the packed MochiKit. This is because MochiKit's way of autoloading is not XHTML compliant.
  89 </p>
  90 <p>An example of this is in the tests.
  91 </p>
  92
  93 <h2> PlotKit SVG Options</h2>
  94 <p>There are no additional options for the SVG Renderer apart from the default Renderer options.
  95 </p>
  96
  97
  98 </div>
  99 </div>
 100
 101
 102
 103
 104     <div id="footer">
 105                 <div class="block">
 106                         <h3>Syndication Feeds:</h3>
 107                         <p>
 108                                 <ul class="tiny">
 109                                         <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>
 110                                         <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>
 111                                         <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>
 112                                         <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>
 113                                 </ul>
 114                         </p>
 115                 </div>
 116                 <div class="block">
 117                         <h3>About this site:</h3>
 118                         <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
 119                         Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
 120                         <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
 121                         <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
 122                 </div>
 123                 <div class="block">
 124                         <h3>Is Made Possible By:</h3>
 125                         <p>
 126                         <dl>
 127                                 <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
 128                                 <dd>Blogging client for Mac</dd>
 129                                 <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
 130                                 <dd>Python Web Framework</dd>
 131                                 <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
 132                                 <dd>Really Fast Web Server</dd>
 133                                 <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
 134                                 <dd>FastCGI for Python</dd>
 135                         </dl>
 136                         </p>
 137                 </div>
 138         <div class="block">
 139             <h3>Search My Sites:</h3>
 140             <p>
 141            <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>
 142                </p>
 143           </div>
 144
 145
 146                 <div class="clear">&nbsp;</div>
 147
 148     </div>
 149
 150
 151
 152    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
 153    <script type="text/javascript">
 154    _uacct = "UA-58117-1";
 155    urchinTracker();
 156    </script>
 157
 158 </body>
 159 </html>