granicus.if.org Git - imagemagick/blob - www/magick-vector-graphics.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" \r
   2   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">\r
   3 <html version="-//W3C//DTD XHTML 1.1//EN"\r
   4       xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"\r
   5       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"\r
   6       xsi:schemaLocation="http://www.w3.org/1999/xhtml\r
   7                           http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd">\r
   8 <head>\r
   9   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>\r
  10   <meta name="google-site-verification" content="MxsMq6bdLOx0KSuz1MY6yG9ZTIJ7_7DVRfl5NCAT5Yg"/>\r
  11   <title>ImageMagick: Magick Vector Graphics</title>
  12   <meta http-equiv="Content-Language" content="en-US"/>
  13   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  14   <meta http-equiv="Reply-to" content="magick-users@imagemagick.org"/>
  15   <meta name="Application-name" content="ImageMagick"/>
  16   <meta name="Description" content="Use ImageMagick to convert, edit, or compose bitmap images in a variety of formats.  In addition resize, rotate, shear, distort and transform images automagically."/>
  17   <meta name="Application-url" content="http://www.imagemagick.org"/>
  18   <meta name="Generator" content="PHP"/>
  19   <meta name="Keywords" content="magick, vector, graphics, ImageMagick, PerlMagick, image processing, OpenMP, software development library, image, photo, software, Magick++, MagickWand"/>
  20   <meta name="Rating" content="GENERAL"/>
  21   <meta name="Robots" content="INDEX, FOLLOW"/>
  22   <meta name="Generator" content="ImageMagick Studio LLC"/>
  23   <meta name="Author" content="ImageMagick Studio LLC"/>
  24   <meta name="Revisit-after" content="2 DAYS"/>
  25   <meta name="Resource-type" content="document"/>
  26   <meta name="Copyright" content="Copyright (c) 1999-2012 ImageMagick Studio LLC"/>
  27   <meta name="Distribution" content="Global"/>
  28   <link rel="icon" href="../images/wand.png"/>
  29   <link rel="shortcut icon" href="../images/wand.ico"  type="images/x-icon"/>
  30   <link rel="canonical" href="http://www.imagemagick.org" />\r
  31   <link rel="meta" type="application/rdf+xml" title="ICI" href="http://imagemagick.org/ici.rdf"/>\r
  32   <!-- Add jQuery library -->\r
  33   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>\r
  34   \r
  35   <!-- Optionaly include easing and/or mousewheel plugins -->\r
  36   <script type="text/javascript" src="http://www.imagemagick.org/fancybox/jquery.easing-1.3.pack.js"></script>\r
  37   <script type="text/javascript" src="http://www.imagemagick.org/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>\r
  38   \r
  39   <!-- Add fancyBox -->\r
  40   <link rel="stylesheet" href="http://www.imagemagick.org/fancybox/jquery.fancybox.css?v=2.0.3" type="text/css" media="screen" />\r
  41   <script type="text/javascript" src="http://www.imagemagick.org/fancybox/jquery.fancybox.pack.js?v=2.0.3"></script>\r
  42   \r
  43   <!-- Optionaly include button and/or thumbnail helpers -->\r
  44   <link rel="stylesheet" href="http://www.imagemagick.org/fancybox/helpers/jquery.fancybox-buttons.css?v=2.0.3" type="text/css" media="screen" />\r
  45   <script type="text/javascript" src="http://www.imagemagick.org/fancybox/helpers/jquery.fancybox-buttons.js?v=2.0.3"></script>\r
  46   \r
  47   <link rel="stylesheet" href="http://www.imagemagick.org/fancybox/helpers/jquery.fancybox-thumbs.css?v=2.0.3" type="text/css" media="screen" />\r
  48   <script type="text/javascript" src="http://www.imagemagick.org/fancybox/helpers/jquery.fancybox-thumbs.js?v=2.0.3"></script>\r
  49   <script type="text/javascript">\r
  50         $(document).ready(function() {\r
  51                 $(".fancybox").fancybox();\r
  52         });\r
  53   </script>\r
  54   <!-- ImageMagick style -->\r
  55   <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />\r
  56   <style type="text/css" media="all">\r
  57     @import url("../www/magick.css");\r
  58   </style>\r
  59 </head>\r
  60 \r
  61 <body id="www-imagemagick-org">\r
  62 <div class="titlebar">\r
  63 <div style="margin: 17px auto; float: left;">\r
  64   <script type="text/javascript">\r
  65   <!--\r
  66     google_ad_client = "pub-3129977114552745";\r
  67     google_ad_slot = "5439289906";\r
  68     google_ad_width = 728;\r
  69     google_ad_height = 90;\r
  70   //-->\r
  71   </script>\r
  72   <script type="text/javascript"\r
  73     src="http://pagead2.googlesyndication.com/pagead/show_ads.js">\r
  74   </script>\r
  75 </div>\r
  76 <a href="http://www.imagemagick.org/discourse-server/">\r
  77   <img src="../images/logo.jpg"\r
  78   alt="ImageMagick Logo"\r
  79   style="width: 123px; height: 118px; border: 0px; float: right;" /></a>\r
  80 <a href="../index.html">\r
  81   <img src="../images/sprite.jpg"\r
  82   alt="ImageMagick Sprite"\r
  83   style="width: 114px; height: 118px; border: 0px; float: right;" /></a>\r
  84 </div>\r
  85 \r
  86 <div class="westbar">\r
  87 \r
  88 <div class="menu">
  89   <a title="About ImageMagick" href="../index.html">About ImageMagick</a>
  90 </div>
  91 <div class="menu">
  92   <a title="Binary Releases" href="../www/binary-releases.html">Binary Releases</a>
  93 </div>
  94 <div class="sub">
  95     <a title="Binary Release: Unix" href="../www/binary-releases.html#unix">Unix</a>
  96 </div>
  97 <div class="sub">
  98     <a title="Binary Release: MacOS X" href="../www/binary-releases.html#macosx">Mac OS X</a>
  99 </div>
 100 <div class="sub">
 101     <a title="Binary Release: iOS" href="../www/binary-releases.html#iOS">iOS</a>
 102 </div>
 103 <div class="sub">
 104     <a title="Binary Release: Windows" href="../www/binary-releases.html#windows">Windows</a>
 105 </div>
 106 <div class="sep"></div>\r
 107 <div class="menu">
 108   <a title="Command-line Tools" href="../www/command-line-tools.html">Command-line Tools</a>
 109 </div>
 110 <div class="sub">
 111     <a title="Command-line Tools: Processing" href="../www/command-line-processing.html">Processing</a>
 112 </div>
 113 <div class="sub">
 114     <a title="Command-line Tools: Options" href="../www/command-line-options.html">Options</a>
 115 </div>
 116 <div class="sub">
 117     <a title="Command-line Tools: Usage" href="http://www.imagemagick.org/Usage/">Usage</a>
 118 </div>
 119 <div class="menu">
 120   <a title="Program Interfaces" href="../www/api.html">Program Interfaces</a>
 121 </div>
 122 <div class="sub">
 123     <a title="Program Interface: MagickWand" href="../www/magick-wand.html">MagickWand</a>
 124 </div>
 125 <div class="sub">
 126     <a title="Program Interface: MagickCore" href="../www/magick-core.html">MagickCore</a>
 127 </div>
 128 <div class="sub">
 129     <a title="Program Interface: PerlMagick" href="../www/perl-magick.html">PerlMagick</a>
 130 </div>
 131 <div class="sub">
 132     <a title="Program Interface: Magick++" href="../www/magick++.html">Magick++</a>
 133 </div>
 134 <div class="sep"></div>\r
 135 <div  class="menu">
 136    <a title="Install from Source" href="../www/install-source.html">Install from Source</a>
 137 </div>
 138 <div class="sub">
 139     <a title="Install from Source: Unix" href="../www/install-source.html#unix">Unix</a>
 140 </div>
 141 <div class="sub">
 142     <a title="Install from Source: Windows" href="../www/install-source.html#windows">Windows</a>
 143  </div>
 144 <div class="menu">
 145   <a title="Resources" href="../www/resources.html">Resources</a>
 146 </div>
 147 <div class="menu">
 148   <a title="Architecture" href="../www/architecture.html">Architecture</a>
 149 </div>
 150 <div class="menu">
 151   <a title="Download" href="../www/download.html">Download</a>
 152 </div>
 153 <div class="sep"></div>\r
 154 <div class="menu">
 155   <a title="Search" href="../www/search.html">Search</a>
 156 </div>
 157 <div class="sep"></div>\r
 158 <div class="menu">
 159   <a title="Site Map" href="../www/sitemap.html">Site Map</a>
 160 </div>
 161 <div  class="sub">
 162   <a title="Site Map: Links" href="../www/links.html">Links</a>
 163 </div>
 164 <div class="sep"></div>\r
 165 <div class="menu">
 166   <a rel="follow" title="Sponsors" href="../www/sponsors.html">Sponsors:</a>
 167
 168   <a href="http://www.networkredux.com"> <img src="../images/networkredux.png" width="140" height="31" alt="[sponsor]" style="margin-top: 4px; margin-left: 4px; border: 0px; float: left;" /></a>
 169   <a href="http://www.dinodirect.com/ipads-tablets/"> <img src="../images/dino-direct.jpg" width="140" height="90" alt="[sponsor]" style="margin-top: 4px; margin-left: 4px; border: 0px; float: left;" /></a><!-- 201204010120 mickey@163... -->
 170 <div class="sponsbox">
 171 <div class="sponsor">
 172   <a rel="follow" title="Android Tablet" href="http://www.dinodirect.com/ipads-tablets/">Android Tablet</a><!-- 201204010120 mickey@163... -->
 173 </div>
 174 <div class="sponsor">
 175   <a rel="follow" title="Sponsor: Web Hosting" href="http://www.micfo.com">Web Hosting</a><!-- 209901010090s golestan -->
 176 </div>
 177 <div class="sponsor">
 178   <a rel="follow" title="Sponsor: Autos Part" href="http://www.pkwteile.de/autoteile">Autos Part</a><!-- 201203010270 info@pkwte... -->
 179 </div>
 180 <div class="sponsor">
 181   <a rel="follow" title="Sponsor: Web Site Hosting" href="http://webhostinggeeks.com">Web Site Hosting</a><!-- 201302010900 funds@enmob... -->
 182 </div>
 183 <div class="sponsor">
 184   <a rel="follow" title="Sponsor: Tenant Check" href="http://www.rentmethod.com/">Tenant Check</a><!-- 201203010090 chris@rentm... -->
 185 </div>
 186 <div class="sponsor">
 187   <a rel="follow" title="Sponsor: VPS" href="http://www.interdominios.com/vps">VPS</a><!-- 201204010090 barsh@inter... -->
 188 </div>
 189 <div class="sponsor">
 190    <a rel="follow" title="Sponsor: Premium Quality Stock Photos" href="http://www.f1online.pro/en/">Premium Quality Stock Photos</a><!-- 2012080100540 ... -->
 191 </div>
 192 <div class="sponsor">
 193   <a rel="follow" title="Sponsor: Search engine optimisation" href="http://www.seomoves.com.au">Search engine optimisation</a><!-- 201301010090s jen@seo lowprofilelinks -->
 194 </div>
 195 <div class="sponsor">
 196    <a rel="follow" title="Sponsor: Druckerei" href="http://print24.com/de/">Druckerei</a><!-- 2012070100250 ... -->
 197 </div>
 198 <div class="sponsor">
 199   <a rel="follow" title="Sponsor: Managed Server" href="http://www.robhost.de">Managed Server</a><!-- 201210010720 klikics... -->
 200 </div>
 201 <div class="sponsor">
 202    <a rel="follow" title="Sponsor: Stock Photography" href="http://www.fotosearch.com/">Stock Photography</a><!-- 2012040100250 ... -->
 203 </div>
 204 <div class="sponsor">
 205   <a rel="follow" title="Sponsor: Autoteile" href="http://www.q11-shop.de">Autoteile</a><!-- 201205010540 suvalj -->
 206 </div>
 207 <div class="sponsor">
 208    <a rel="follow" title="Sponsor: Royalty Free Stock Images" href="http://www.canstockphoto.com/">Royalty Free Stock Images</a><!-- 2012050100360 support@can -->
 209 </div>
 210 <div class="sponsor">
 211   <a rel="follow" title="Sponsor: Web Hosting Reviews" href="http://www.webhostingsecretrevealed.com">Web Hosting Secret Revealed</a><!-- 201204010540 iamchee jerry -->
 212 </div>
 213 <div class="sponsor">
 214   <a rel="follow" title="Sponsor: Druckerei" href="http://www.allesdruck.de">Druckerei</a><!-- 201303011500 r.leo -->
 215 </div>
 216 <div class="sponsor">
 217    <a rel="follow" title="Sponsor: Got Stripes" href="http://www.stripeslawncare.org">Got Stripes?</a><!-- 2012090100150 brooks@stripes...-->
 218 </div>
 219 <div class="sponsor">
 220    <a rel="follow" title="Sponsor: Schlüsseldienst Berlin BSD" href="http://www.schluesseldienst-berlin.de">Schlüsseldienst Berlin BSD</a><!-- 2012050100025 info@schlues-->
 221 </div>
 222 </div>
 223 </div>
 224 </div>\r
 225 \r
 226 <div class="eastbar">\r
 227   <div class="g-plusone" data-size="standard" data-count="false"></div>\r
 228   <script type="text/javascript">\r
 229     window.___gcfg = {\r
 230       lang: 'en-US'\r
 231     };\r
 232 \r
 233     (function() {\r
 234       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;\r
 235       po.src = 'https://apis.google.com/js/plusone.js';\r
 236       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);\r
 237     })();\r
 238   </script>\r
 239 </div>\r
 240 \r
 241 <div class="main">\r
 242 \r
 243 \r
 244 <h1>ImageMagick Magick Vector Graphics</h1>
 245 <p class="navigation-index">[<a href="#intro">Introduction to Vector Graphics</a> &bull; <a href="#overview">MVG Overview</a> &bull; <a href="#primitives">Drawing Primitives</a>]</p>
 246
 247 <a id="intro"></a>
 248 <div class="doc-section">
 249
 250 <p>This specification defines the features and syntax for Magick Vector Graphics (MVG), a modularized language for describing two-dimensional vector and mixed vector/raster graphics in ImageMagick.  You can use the language to draw from the
 251 command line, from an MVG file, from an <a href="http://www.w3.org/TR/SVG/" >SVG -- Scalable Vector Graphics</a> file or from one of the ImageMagick <a href="../www/api.html">program interfaces</a>.  Use this command, for example, to render an arc:</p>
 252
 253 <p class='crt'><span class="crtprompt"> $ </span><span class='crtin'>convert -size 100x60 canvas:skyblue -fill white -stroke black \  <br/>
 254     -draw "path 'M 30,40  A 30,20  20  0,0 70,20 A 30,20  20  1,0 30,40 Z '" \ <br/>
 255     arc.png</span></p>
 256 <p>and here is the result:</p>
 257
 258 <p class="image">
 259   <a href="../images/arc.png"><img src="../images/arc.png" width="100" height="60" alt="arc" /></a>
 260 </p>
 261
 262 <p>When the drawing gets sufficiently complex, we recommend you assemble the graphic primitives into a MVG file. For our example, we use <a href="../www/source/piechart.mvg">piechart.mvg</a>:</p>
 263
 264 <div class="viewport">
 265   push graphic-context
 266     viewbox 0 0 624 369
 267     affine 0.283636 0 0 0.283846 -0 -0
 268     push graphic-context
 269       push graphic-context
 270         fill 'darkslateblue'
 271         stroke 'blue'
 272         stroke-width 1
 273         rectangle 1,1 2199,1299
 274       pop graphic-context
 275       push graphic-context
 276         font-size 40
 277         fill 'white'
 278         stroke-width 1
 279         text 600,1100 'Average: 20.0'
 280       pop graphic-context
 281       push graphic-context
 282         fill 'red'
 283         stroke 'black'
 284         stroke-width 5
 285         path 'M700.0,600.0 L340.0,600.0 A360.0,360.0 0 0,1 408.1452123287954,389.2376150414973 z'
 286       pop graphic-context
 287       push graphic-context
 288         font-size 40
 289         fill 'white'
 290         stroke-width 1
 291         text 1400,140 'MagickWand for PHP'
 292       pop graphic-context
 293       push graphic-context
 294         font-size 30
 295         fill 'white'
 296         stroke-width 1
 297         text 1800,140 '(10.0%)'
 298       pop graphic-context
 299       push graphic-context
 300         fill 'red'
 301         stroke 'black'
 302         stroke-width 4
 303         rectangle 1330,100 1370,140
 304       pop graphic-context
 305       push graphic-context
 306         fill 'yellow'
 307         stroke 'black'
 308         stroke-width 5
 309         path 'M700.0,600.0 L408.1452123287954,389.2376150414973 A360.0,360.0 0 0,1 976.5894480359858,369.56936567559273 z'
 310       pop graphic-context
 311       push graphic-context
 312         font-size 40
 313         fill 'white'
 314         stroke-width 1
 315         text 1400,220 'MagickCore'
 316       pop graphic-context
 317       push graphic-context
 318         font-size 30
 319         fill 'white'
 320         stroke-width 1
 321         text 1800,220 '(29.0%)'
 322       pop graphic-context
 323       push graphic-context
 324         fill 'yellow'
 325         stroke 'black'
 326         stroke-width 4
 327         rectangle 1330,180 1370,220
 328       pop graphic-context
 329       push graphic-context
 330         fill 'fuchsia'
 331         stroke 'black'
 332         stroke-width 5
 333         path 'M700.0,600.0 L976.5894480359858,369.56936567559273 A360.0,360.0 0 0,1 964.2680466142854,844.4634932636567 z'
 334       pop graphic-context
 335       push graphic-context
 336         font-size 40
 337         fill 'white'
 338         stroke-width 1
 339         text 1400,300 'MagickWand'
 340       pop graphic-context
 341       push graphic-context
 342         font-size 30
 343         fill 'white'
 344         stroke-width 1
 345         text 1800,300 '(22.9%)'
 346       pop graphic-context
 347       push graphic-context
 348         fill 'fuchsia'
 349         stroke 'black'
 350         stroke-width 4
 351         rectangle 1330,260 1370,300
 352       pop graphic-context
 353       push graphic-context
 354         fill 'blue'
 355         stroke 'black'
 356         stroke-width 5
 357         path 'M700.0,600.0 L964.2680466142854,844.4634932636567 A360.0,360.0 0 0,1 757.853099990584,955.3210081341651 z'
 358       pop graphic-context
 359       push graphic-context
 360         font-size 40
 361         fill 'white'
 362         stroke-width 1
 363         text 1400,380 'JMagick'
 364       pop graphic-context
 365       push graphic-context
 366         font-size 30
 367         fill 'white'
 368         stroke-width 1
 369         text 1800,380 '(10.6%)'
 370       pop graphic-context
 371       push graphic-context
 372         fill 'blue'
 373         stroke 'black'
 374         stroke-width 4
 375         rectangle 1330,340 1370,380
 376       pop graphic-context
 377       push graphic-context
 378         fill 'lime'
 379         stroke 'black'
 380         stroke-width 5
 381         path 'M700.0,600.0 L757.853099990584,955.3210081341651 A360.0,360.0 0 0,1 340.0,600.0 z'
 382       pop graphic-context
 383       push graphic-context
 384         font-size 40
 385         fill 'white'
 386         stroke-width 1
 387         text 1400,460 'Magick++'
 388       pop graphic-context
 389       push graphic-context
 390         font-size 30
 391         fill 'white'
 392         stroke-width 1
 393         text 1800,460 '(27.5%)'
 394       pop graphic-context
 395       push graphic-context
 396         fill 'lime'
 397         stroke 'black'
 398         stroke-width 4
 399         rectangle 1330,420 1370,460
 400       pop graphic-context
 401       push graphic-context
 402         font-size 100
 403         fill 'white'
 404         stroke-width 1
 405         text 100,150 'ImageMagick'
 406       pop graphic-context
 407       push graphic-context
 408         fill 'none'
 409         stroke 'black'
 410         stroke-width 5
 411         circle 700,600 700,960
 412       pop graphic-context
 413     pop graphic-context
 414   pop graphic-context
 415 </div>
 416
 417 <p>to render a pie chart with this command:</p>
 418
 419 <p class='crt'><span class="crtprompt"> $ </span><span class='crtin'>convert piechart.mvg piechart.png</span></p>
 420 <p>which produces this rendering:</p>
 421
 422 <p class="image">
 423   <a href="../images/piechart.png"><img src="../images/piechart.png" width="624" height="369" alt="piechart" /></a>
 424 </p>
 425
 426 <p>However, in general, MVG is sufficiently difficult to work with that you probably want to use a program to generate your graphics in the SVG format.  ImageMagick automagically converts SVG to MVG and renders your image, for example, we render <a href="../www/source/piechart.svg">piechart.svg</a> with this command:</p>
 427
 428 <p class='crt'><span class="crtprompt"> $ </span><span class='crtin'>convert piechart.svg piechart.jpg</span></p>
 429
 430 <p>to produce the same pie chart we created with the MVG language.</p>
 431
 432 <p>Drawing is available from many of the ImageMagick <a href="../www/api.html">program interfaces</a> as well.  ImageMagick converts the drawing API calls to MVG and renders it.  Here is example code written in the <a href="../www/magick-wand.html">MagickWand</a> language: </p>
 433
 434 <div class="viewport">
 435    (void) PushDrawingWand(draw_wand);
 436    {
 437      const PointInfo points[6] =
 438      {
 439        { 180,504 },
 440        { 282.7,578.6 },
 441        { 243.5,699.4 },
 442        { 116.5,699.4 },
 443        { 77.26,578.6 },
 444        { 180,504 }
 445      };
 446
 447      DrawSetStrokeAntialias(draw_wand,True);
 448      DrawSetStrokeWidth(draw_wand,9);
 449      DrawSetStrokeLineCap(draw_wand,RoundCap);
 450      DrawSetStrokeLineJoin(draw_wand,RoundJoin);
 451      (void) DrawSetStrokeDashArray(draw_wand,0,(const double *)NULL);
 452      (void) PixelSetColor(color,"#4000c2");
 453      DrawSetStrokeColor(draw_wand,color);
 454      DrawSetFillRule(draw_wand,EvenOddRule);
 455      (void) PixelSetColor(color,"#800000");
 456      DrawSetFillColor(draw_wand,color);
 457      DrawPolygon(draw_wand,6,points);
 458    }
 459    (void) PopDrawingWand(draw_wand);
 460 </div>
 461
 462 </div>
 463
 464 <h2><a id="overview"></a>MVG Overview</h2>
 465 <div class="doc-section">
 466
 467 <p>MVG ignores all white-space between commands. This allows multiple MVG commands per line. It is common convention to terminate each MVG command with a new line to make MVG easier to edit and read. This syntax description uses indentation in MVG sequences to aid with understanding. Indentation is supported but is not required.</p>
 468
 469 <p>Metafile wrapper syntax (to support stand-alone MVG files):</p>
 470
 471 <pre class="text">
 472   push graphic-context
 473     viewbox 0 0 width height
 474     [ any other MVG commands ]
 475   pop graphic-context
 476 </pre>
 477
 478 <p>Pattern syntax (saving and restoring context):</p>
 479
 480 <pre class="text">
 481   push pattern id x,y width,height
 482    push graphic-context
 483     [ drawing commands ]
 484    pop graphic-context
 485   pop pattern
 486 </pre>
 487
 488 <p>an example is (%s is a identifier string):</p>
 489
 490 <pre class="text">
 491   push defs
 492    push pattern %s 10,10 20,20
 493     push graphic-context
 494      fill red
 495      rectangle 5,5 15,15
 496     pop graphic-context
 497     push graphic-context
 498      fill green
 499      rectangle 10,10 20,20
 500     pop graphic-context
 501    pop pattern
 502   pop defs
 503 </pre>
 504
 505 <p>For image tiling use:</p>
 506
 507 <pre class="text">
 508   push pattern id x,y width,height
 509    image Copy ...
 510   pop pattern
 511 </pre>
 512
 513 <p>Note you can use the pattern for either the fill or stroke like:</p>
 514
 515 <pre class="text">
 516   stroke url(#%s)
 517 </pre>
 518
 519 <p>or</p>
 520
 521 <pre class="text">
 522   fill url(#%s)
 523 </pre>
 524
 525 <p>The clip path defines a clipping area, where only the contained area to be drawn upon.  Areas outside of the clipping areare masked.</p>
 526
 527 <pre class="text">
 528   push defs
 529    push clip-path %s
 530     push graphic-context
 531      rectangle 10,10 20,20
 532     pop graphic-context
 533    pop clip-path
 534   pop defs
 535   clip-path url(#%s)
 536 </pre>
 537
 538 </div>
 539
 540 <h2><a id="primitives"></a>Drawing Primitives</h2>
 541 <div class="doc-section">
 542
 543 <p>Here is a complete description of the MVG drawing primitives:</p>
 544
 545 <dl class="doc">
 546
 547   <dt class="doc"><a id="affine"></a>affine <em class="option">s<sub>x</sub></em>,<em class="option">r<sub>x</sub></em>,<em class="option">r<sub>y</sub></em>,<em class="option">s<sub>y</sub></em>,<em class="option">t<sub>x</sub></em>,<em class="option">t<sub>y</sub></em></dt>
 548
 549   <dd></dd>
 550
 551
 552
 553   <dt class="doc"><a id="arc"></a>arc <em class="option">x<sub>0</sub></em>,<em class="option">y<sub>0</sub></em>&nbsp; &nbsp;<em class="option">x<sub>1</sub></em>,<em class="option">y<sub>1</sub></em>&nbsp; &nbsp;<em class="option">a<sub>0</sub></em>,<em class="option">a<sub>1</sub></em></dt>
 554
 555   <dd></dd>
 556
 557   <dt class="doc"><a id="bezier"></a>bezier <em class="option">x<sub>0</sub></em>,<em class="option">y<sub>0</sub></em> ... <em class="option">x<sub>n</sub></em>,<em class="option">y<sub>n</sub></em></dt>
 558
 559   <dd>
 560   <p><kbd>Bezier</kbd> (spline) requires three or more x,y coordinates to define its shape. The first and last points are the knots (preserved coordinates) and any intermediate coordinates are the control points. If two control points are specified, the line between each end knot and its sequentially respective control point determines the tangent direction of the curve at that end. If one control point is specified, the lines from the end knots to the one control point determines the tangent directions of the curve at each end. If more than two control points are specified, then the additional control points act in combination to determine the intermediate shape of the curve. In order to
 561   draw complex curves, it is highly recommended either to use the <kbd>Path</kbd> primitive or to draw multiple four-point bezier segments with the start and end knots of each successive segment repeated.</p>
 562   </dd>
 563
 564   <dt class="doc"><a id="border-color"></a>border-color <em class="option">color</em></dt>
 565
 566   <dd></dd>
 567
 568   <dt class="doc"><a id="circle"></a>circle <em class="option">origin<sub>x</sub></em>,<em class="option">origin<sub>y</sub></em>&nbsp; &nbsp;<em class="option">perimeter<sub>x</sub></em>,<em class="option">perimeter<sub>y</sub></em></dt>
 569
 570   <dd></dd>
 571
 572   <dt class="doc"><a id="clip-path"></a>clip-path url(<em class="option">name</em>)</dt>
 573
 574   <dd></dd>
 575
 576   <dt class="doc"><a id="clip-rule"></a>clip-rule <em class="option">rule</em></dt>
 577
 578   <dd>Choose from these rule types:
 579
 580         <p class="text">
 581           evenodd <br/>
 582           nonzero
 583         </p>
 584    </dd>
 585
 586   <dt class="doc"><a id="clip-units"></a>clip-units <em class="option">units</em></dt>
 587
 588   <dd>Choose from these unit types:
 589
 590         <p class="text">
 591           userSpace <br/>
 592           userSpaceOnUse  <br/>
 593           objectBoundingBox <br/>
 594         </p>
 595   </dd>
 596
 597   <dt class="doc"><a id="color"></a>color <em class="option">x</em>,<em class="option">y</em> <em class="option">method</em></dt>
 598
 599
 600
 601
 602
 603
 604
 605
 606
 607
 608
 609 <dd>Choose from these method types:
 610
 611 <pre class="text">
 612   point
 613   replace
 614   floodfill
 615   filltoborder
 616   reset
 617 </pre>
 618
 619 </dd>
 620
 621   <dt class="doc"><a id="decorate"></a>decorate <em class="option">type</em></dt>
 622
 623
 624 <dd>Choose from these types of decorations:
 625
 626 <pre class="text">
 627   none
 628   line-through
 629   overline
 630   underline
 631 </pre>
 632
 633 </dd>
 634
 635   <dt class="doc"><a id="ellipse"></a>ellipse <em class="option">center<sub>x</sub></em>,<em class="option">center<sub>y</sub></em>&nbsp; &nbsp;<em class="option">radius<sub>x</sub></em>,<em class="option">radius<sub>y</sub></em>&nbsp; &nbsp;<em class="option">arc<sub>start</sub></em>,<em class="option">arc<sub>stop</sub></em></dt>
 636
 637   <dt class="doc"><a id="fill"></a>fill <em class="option">color</em></dt>
 638
 639 <dd>Choose from any of these <a href="../www/color.html">colors</a>.
 640 </dd>
 641
 642   <dt class="doc"><a id="fill-opacity"></a>fill-opacity <em class="option">opacity</em></dt>
 643
 644
 645 <dd>The opacity ranges from 0.0 (fully transparent) to 1.0 (fully opaque) or as a percentage (e.g. 50%).
 646 </dd>
 647
 648   <dt class="doc"><a id="fill-rule"></a>fill-rule <em class="option">rule</em></dt>
 649
 650
 651 <dd>Choose from these rule types:
 652
 653 <pre class="text">
 654   evenodd
 655   nonzero
 656 </pre>
 657
 658 </dd>
 659
 660   <dt class="doc"><a id="font"></a>font <em class="option">name</em></dt>
 661
 662 <dd></dd>
 663
 664   <dt class="doc"><a id="font-family"></a>font-family <em class="option">family</em></dt>
 665
 666 <dd></dd>
 667
 668   <dt class="doc"><a id="font-size"></a>font-size <em class="option">point-size</em></dt>
 669
 670 <dd></dd>
 671
 672   <dt class="doc"><a id="font-stretch"></a>font-stretch <em class="option">type</em></dt>
 673
 674 <dd>Choose from these stretch types:
 675
 676 <pre class="text">
 677   all
 678   normal
 679   ultra-condensed
 680   extra-condensed
 681   condensed
 682   semi-condensed
 683   semi-expanded
 684   expanded
 685   extra-expanded
 686   ultra-expanded
 687 </pre>
 688
 689 </dd>
 690
 691   <dt class="doc"><a id="font-style"></a>font-style <em class="option">style</em></dt>
 692
 693
 694 <dd>Choose from these styles:
 695
 696 <pre class="text">
 697   all
 698   normal
 699   italic
 700   oblique
 701 </pre>
 702
 703 </dd>
 704
 705   <dt class="doc"><a id="font-weight"></a>font-weight <em class="option">weight</em></dt>
 706
 707 <dd>Choose from these weights:
 708
 709 <pre class="text">
 710   all
 711   normal
 712   bold
 713   100
 714   200
 715   300
 716   400
 717   500
 718   600
 719   700
 720   800
 721   900
 722 </pre>
 723
 724 </dd>
 725
 726   <dt class="doc"><a id="gradient-units"></a>gradient-units <em class="option">units</em></dt>
 727
 728 <dd>Choose from these units:
 729
 730 <pre class="text">
 731   userSpace
 732   userSpaceOnUse
 733   objectBoundingBox
 734 </pre>
 735
 736 </dd>
 737
 738   <dt class="doc"><a id="gravity"></a>gravity <em class="option">type</em></dt>
 739
 740 <dd>Choose from these gravity types:
 741
 742 <pre class="text">
 743   NorthWest
 744   North
 745   NorthEast
 746   West
 747   Center
 748   East
 749   SouthWest
 750   South
 751   SouthEast
 752 </pre>
 753
 754 </dd>
 755
 756   <dt class="doc"><a id="compose"></a>image <em class="option">compose x,y width,height 'filename'</em></dt>
 757
 758 <dd>Choose from these compose operations:
 759
 760 <table id="table" cellpadding="2" cellspacing="0" style="width: 93%">
 761   <tbody>
 762   <tr valign="top">
 763     <th align="left" style="width: 8%">Method</th>
 764     <th align="left">Description</th>
 765   </tr>
 766
 767   <tr valign="top">
 768     <td valign="top">clear</td>
 769     <td valign="top">Both the color and the alpha of the destination are cleared. Neither the source nor the destination are used as input.</td>
 770   </tr>
 771
 772   <tr valign="top">
 773     <td valign="top">src</td>
 774     <td valign="top">The source is copied to the destination. The destination is not used as input.</td>
 775   </tr>
 776
 777   <tr valign="top">
 778     <td valign="top">dst</td>
 779     <td valign="top">The destination is left untouched.</td>
 780   </tr>
 781
 782   <tr valign="top">
 783     <td valign="top"><b>src-over</b></td>
 784     <td valign="top">The source is composited over the destination.</td>
 785   </tr>
 786
 787   <tr valign="top">
 788     <td valign="top">dst-over</td>
 789     <td valign="top">The destination is composited over the source and the result replaces the destination.</td>
 790   </tr>
 791
 792   <tr valign="top">
 793     <td valign="top">src-in</td>
 794     <td valign="top">The part of the source lying inside of the destination replaces the destination.</td>
 795   </tr>
 796
 797   <tr valign="top">
 798     <td valign="top">dst-in</td>
 799     <td valign="top">The part of the destination lying inside of the source replaces the destination.</td>
 800   </tr>
 801
 802   <tr valign="top">
 803     <td valign="top">src-out</td>
 804     <td valign="top">The part of the source lying outside of the destination replaces the destination.</td>
 805   </tr>
 806
 807   <tr valign="top">
 808     <td valign="top">dst-out</td>
 809     <td valign="top">The part of the destination lying outside of the source         replaces the destination.</td>
 810   </tr>
 811
 812   <tr valign="top">
 813     <td valign="top">src-atop</td>
 814     <td valign="top">The part of the source lying inside of the destination is  composited onto the destination.</td>
 815   </tr>
 816
 817   <tr valign="top">
 818     <td valign="top">dst-atop</td>
 819     <td valign="top">The part of the destination lying inside of the source is composited over the source and replaces the destination.</td>
 820   </tr>
 821
 822   <tr valign="top">
 823     <td valign="top">multiply</td>
 824     <td valign="top">The source is multiplied by the destination and replaces the destination. The resultant color is always at least as dark as either of the two constituent colors. Multiplying any color with black produces black. Multiplying any color with white leaves the original color unchanged.</td>
 825   </tr>
 826
 827   <tr valign="top">
 828     <td valign="top">screen</td>
 829     <td valign="top">The source and destination are complemented and then multiplied and then replace the destination. The resultant color is always at least as light as either of the two constituent colors. Screening any color with white produces white. Screening any color with black leaves the original color unchanged.</td>
 830   </tr>
 831
 832   <tr valign="top">
 833     <td valign="top">overlay</td>
 834     <td valign="top">Multiplies or screens the colors, dependent on the destination color. Source colors overlay the destination whilst preserving its highlights and shadows. The destination color is not replaced, but is mixed with the source color to reflect the lightness or darkness of the destination.</td>
 835   </tr>
 836
 837   <tr valign="top">
 838     <td valign="top">darken</td>
 839     <td valign="top">Selects the darker of the destination and source colors.  The destination is replaced with the source when the source is darker, otherwise it is left unchanged.</td>
 840   </tr>
 841
 842   <tr valign="top">
 843     <td valign="top">lighten</td>
 844     <td valign="top">Selects the lighter of the destination and source colors.  The destination is replaced with the source when the source is lighter, otherwise it is left unchanged.</td>
 845   </tr>
 846
 847   <tr valign="top">
 848     <td valign="top">linear-light</td>
 849     <td valign="top">Increase contrast slightly with an impact on the foreground's tonal values.</td>
 850   </tr>
 851
 852   <tr valign="top">
 853     <td valign="top">color-dodge</td>
 854     <td valign="top">Brightens the destination color to reflect the source color. Painting with black produces no change.</td>
 855   </tr>
 856
 857   <tr valign="top">
 858     <td valign="top">color-burn</td>
 859     <td valign="top">Darkens the destination color to reflect the source color.  Painting with white produces no change.</td>
 860   </tr>
 861
 862   <tr valign="top">
 863     <td valign="top">hard-light</td>
 864     <td valign="top">Multiplies or screens the colors, dependent on the source color value. If the source color is lighter than 0.5, the destination is lightened as if it were screened. If the source color is darker than 0.5, the destination is darkened, as if it were multiplied. The degree of lightening or darkening is proportional to the difference between the source color and 0.5. If it is equal to 0.5 the destination is unchanged. Painting with pure black or white produces black or white.</td>
 865   </tr>
 866
 867   <tr valign="top">
 868     <td valign="top">soft-light</td>
 869     <td valign="top">Darkens or lightens the colors, dependent on the source color value. If the source color is lighter than 0.5, the destination is lightened. If the source color is darker than 0.5, the destination is darkened, as if it were burned in. The degree of darkening or lightening is proportional to the difference between the source color and 0.5. If it is equal to 0.5, the destination is unchanged. Painting with pure black or white produces a distinctly darker or lighter area, but does not result in pure black or white.</td>
 870   </tr>
 871
 872   <tr valign="top">
 873     <td valign="top">plus</td>
 874     <td valign="top">The source is added to the destination and replaces the destination. This operator is useful for animating a dissolve between two images.</td>
 875   </tr>
 876
 877   <tr valign="top">
 878     <td valign="top">add</td>
 879     <td valign="top">As per 'plus' but transparency data is treated as matte
 880         values. As such any transparent areas in either image remain
 881         transparent. </td>
 882   </tr>
 883
 884   <tr valign="top">
 885     <td valign="top">minus</td>
 886     <td valign="top">Subtract the colors in the source image from the
 887         destination image. When transparency is involved, Opaque areas will be
 888         subtracted from any destination opaque areas. </td>
 889   </tr>
 890
 891   <tr valign="top">
 892     <td valign="top">subtract</td>
 893     <td valign="top">Subtract the colors in the source image from the
 894         destination image. When transparency is involved transparent areas are
 895         subtracted, so only the opaque areas in the source remain opaque in
 896         the destination image. </td>
 897   </tr>
 898
 899   <tr valign="top">
 900     <td valign="top">difference</td>
 901     <td valign="top">Subtracts the darker of the two constituent colors from the lighter. Painting with white inverts the destination color. Painting with black produces no change.</td>
 902   </tr>
 903
 904   <tr valign="top">
 905     <td valign="top">exclusion</td>
 906     <td valign="top">Produces an effect similar to that of 'difference', but appears as lower contrast. Painting with white inverts the destination color. Painting with black produces no change.</td>
 907   </tr>
 908
 909   <tr valign="top">
 910     <td valign="top">xor</td>
 911     <td valign="top">The part of the source that lies outside of the destination is combined with the part of the destination that lies outside of the source.</td>
 912   </tr>
 913
 914   <tr valign="top">
 915     <td valign="top">copy-*</td>
 916     <td valign="top">Copy the specificed channel in the source image to the
 917         same channel in the destination image.  If the channel specified in
 918         the source image does not exist, (which can only happen for methods,
 919         '<kbd>copy-opacity</kbd>' or '<kbd>copy-black</kbd>') then it is
 920         assumed that the source image is a special grayscale channel image
 921         of the values to be copied. </td>
 922     </tr>
 923
 924   <tr valign="top">
 925     <td valign="top">change-mask</td>
 926     <td valign="top">Replace any destination pixel that is the similar to the source images pixel (as defined by the current <a href="#fuzz">-fuzz</a> factor), with transparency. </td>
 927   </tr>
 928   </tbody>
 929 </table>
 930
 931 </dd>
 932
 933   <dt class="doc"><a id="interline-spacing"></a>interline-spacing <em class="option">pixels</em></dt>
 934
 935   <dd></dd>
 936
 937   <dt class="doc"><a id="interword-spacing"></a>interword-spacing <em class="option">pixels</em></dt>
 938
 939   <dd></dd>
 940
 941   <dt class="doc"><a id="kerning"></a>kerning <em class="option">pixels</em></dt>
 942
 943   <dd></dd>
 944
 945   <dt class="doc"><a id="line"></a>line <em class="option">x,y x<sub>1</sub>,y<sub>1</sub></em></dt>
 946
 947   <dd></dd>
 948
 949   <dt class="doc"><a id="matte"></a>matte <em class="option">x,y method</em></dt>
 950
 951 <dd>Choose from these methods:
 952
 953 <pre class="text">
 954   point
 955   replace
 956   floodfill
 957   filltoborder
 958   reset
 959 </pre>
 960
 961 </dd>
 962
 963   <dt class="doc"><a id="offset"></a>offset <em class="option">offset</em></dt>
 964
 965   <dd></dd>
 966
 967   <dt class="doc"><a id="opacity"></a>opacity <em class="option">opacity</em></dt>
 968
 969 <dd>Use percent (e.g. 50%).</dd>
 970
 971   <dt class="doc"><a id="path"></a>path <em class="option">path</em></dt>
 972
 973   <dd></dd>
 974
 975   <dt class="doc"><a id="point"></a>point <em class="option">x,y</em></dt>
 976
 977   <dd></dd>
 978
 979   <dt class="doc"><a id="polygon"></a>polygon <em class="option">x,y x<sub>1</sub>,y<sub>1</sub>, ..., x<sub>n</sub>,y<sub>n</sub></em></dt>
 980
 981   <dd></dd>
 982
 983   <dt class="doc"><a id="polyline"></a>polyline <em class="option">x,y x<sub>1</sub>,y<sub>1</sub>, ..., x<sub>n</sub>,y<sub>n</sub></em></dt>
 984
 985   <dd></dd>
 986
 987   <dt class="doc"><a id="pop-clip-path"></a>pop clip-path</dt>
 988
 989   <dd></dd>
 990
 991   <dt class="doc"><a id="pop-defs"></a>pop defs</dt>
 992
 993   <dd></dd>
 994
 995   <dt class="doc"><a id="pop-gradient"></a>pop gradient</dt>
 996
 997   <dd></dd>
 998
 999   <dt class="doc"><a id="pop-graphic-context"></a>pop graphic-context</dt>
1000
1001   <dd></dd>
1002
1003   <dt class="doc"><a id="pop-pattern"></a>pop pattern</dt>
1004
1005   <dd></dd>
1006
1007   <dt class="doc"><a id="push"></a>push clip-path <em class="option">name</em></dt>
1008
1009   <dd></dd>
1010
1011   <dt class="doc"><a id="push-defs"></a>push defs</dt>
1012
1013   <dd></dd>
1014
1015   <dt class="doc"><a id="push-gradient-linear"></a>push gradient <em class="option">id linear x,y x<sub>1</sub>,y<sub>1</sub></em></dt>
1016
1017   <dd></dd>
1018
1019   <dt class="doc"><a id="push-gradient-radial"></a>push gradient <em class="option">id radial x<sub>c</sub>,c<sub>y</sub> x<sub>f</sub>,y<sub>f</sub> radius</em></dt>
1020
1021   <dd></dd>
1022
1023   <dt class="doc"><a id="push-graphic-context"></a>push graphic-context</dt>
1024
1025   <dd></dd>
1026
1027   <dt class="doc"><a id="push-pattern"></a>push pattern <em class="option">id radial x,y width,height</em></dt>
1028
1029   <dd></dd>
1030
1031   <dt class="doc"><a id="rectangle"></a>rectangle <em class="option">x,y x<sub>1</sub>,y<sub>1</sub></em></dt>
1032
1033   <dd></dd>
1034
1035   <dt class="doc"><a id="rotate"></a>rotate <em class="option">angle</em></dt>
1036
1037   <dd></dd>
1038
1039   <dt class="doc"><a id="roundrectangle"></a>roundrectangle <em class="option">x,y x<sub>1</sub>,y<sub>1</sub> width,height</em></dt>
1040
1041   <dd></dd>
1042
1043   <dt class="doc"><a id="scale"></a>scale <em class="option">x,y</em></dt>
1044
1045   <dd></dd>
1046
1047   <dt class="doc"><a id="skewX"></a>skewX <em class="option">angle</em></dt>
1048
1049   <dd></dd>
1050
1051   <dt class="doc"><a id="skewY"></a>skewX <em class="option">angle</em></dt>
1052
1053   <dd></dd>
1054
1055   <dt class="doc"><a id="stop-color"></a>stop-color <em class="option">color offset</em></dt>
1056
1057   <dd></dd>
1058
1059   <dt class="doc"><a id="stroke"></a>stroke <em class="option">color</em></dt>
1060
1061   <dd></dd>
1062
1063   <dt class="doc"><a id="stroke-antialias"></a>stroke-antialias <em class="option">0 &bull; 1</em></dt>
1064
1065   <dd></dd>
1066
1067   <dt class="doc"><a id="stroke-dasharray"></a>stroke-dasharray <em class="option">none &bull; numeric-list</em></dt>
1068
1069   <dd></dd>
1070
1071   <dt class="doc"><a id="stroke-dashoffset"></a>stroke-dashoffset <em class="option">offset</em></dt>
1072
1073   <dd></dd>
1074
1075   <dt class="doc"><a id="stroke-linecap"></a>stroke-linecap <em class="option">type</em></dt>
1076
1077
1078   <dd>Choose from these cap types:
1079
1080 <pre class="text">
1081   butt
1082   round
1083   square
1084 </pre>
1085
1086   </dd>
1087
1088   <dt class="doc"><a id="stroke-linejoin"></a>stroke-linejoin <em class="option">type</em></dt>
1089
1090   <dd>Choose from these join types:
1091
1092 <pre class="text">
1093   bevel
1094   miter
1095   round
1096 </pre>
1097
1098   </dd>
1099
1100   <dt class="doc"><a id="stroke-miterlimit"></a>stroke-miterlimit <em class="option">limit</em></dt>
1101
1102   <dd></dd>
1103
1104   <dt class="doc"><a id="stroke-opacity"></a>stroke-opacity <em class="option">opacity</em></dt>
1105
1106   <dd>The opacity ranges from 0.0 (fully transparent) to 1.0 (fully opaque) or as a percentage (e.g. 50%).
1107   </dd>
1108
1109   <dt class="doc"><a id="stroke-width"></a>stroke-width <em class="option">width</em></dt>
1110
1111   <dd></dd>
1112
1113   <dt class="doc"><a id="text"></a>text <em class="option">"text"</em></dt>
1114
1115   <dd></dd>
1116
1117   <dt class="doc"><a id="text-antialias"></a>text-antialias <em class="option">0 &bull; 1</em></dt>
1118
1119   <dd></dd>
1120
1121   <dt class="doc"><a id="text-undercolor"></a>text-undercolor <em class="option">color</em></dt>
1122
1123   <dd></dd>
1124
1125   <dt class="doc"><a id="translate"></a>translate <em class="option">x,y</em></dt>
1126
1127   <dd></dd>
1128
1129   <dt class="doc"><a id="viewbox"></a>viewbox <em class="option">x,y x<sub>1</sub>,y<sub>1</sub></em></dt>
1130
1131   <dd></dd>
1132
1133 </dl>
1134
1135 </div>
1136
1137
1138 \r
1139 </div>\r
1140 \r
1141 <div id="linkbar">\r
1142     <span id="linkbar-west">&nbsp;</span>\r
1143     <span id="linkbar-center">\r
1144       <a href="http://www.imagemagick.org/discourse-server/">Discourse Server</a> &bull;\r
1145       <a href="http://www.imagemagick.org/MagickStudio/scripts/MagickStudio.cgi">Studio</a>\r
1146     </span>\r
1147     <span id="linkbar-east">&nbsp;</span>\r
1148   </div>\r
1149   <div class="footer">\r
1150     <span id="footer-west">&copy; 1999-2011 ImageMagick Studio LLC</span>\r
1151     <span id="footer-east"> <a href="http://www.imagemagick.org/script/contact.php">Contact the Wizards</a></span>\r
1152   </div>\r
1153   <div style="clear: both; margin: 0; width: 100%; "></div>\r
1154   <script type="text/javascript">\r
1155     var _gaq = _gaq || [];\r
1156     _gaq.push(['_setAccount', 'UA-17690367-1']);\r
1157     _gaq.push(['_trackPageview']);\r
1158 \r
1159     (function() {\r
1160       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
1161       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
1162       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
1163     })();\r
1164   </script>\r
1165 </body>\r
1166 </html>\r