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, ImageMagic, MagickCore, MagickWand, PerlMagick, Magick++, RMagick, PythonMagick, JMagick, TclMagick, Image, Magick, Magic, Wand, ImageMagickObject, Image, Processing, Automagically"/>
  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-2011 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   <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />\r
  33   <link rel="stylesheet" type="text/css" href="http://www.imagemagick.org/fancybox/jquery.fancybox-1.3.4.css" media="screen" />\r
  34   <style type="text/css" media="all">\r
  35     @import url("../www/magick.css");\r
  36   </style>\r
  37   <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>\r
  38   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>\r
  39   <script type="text/javascript" src="http://www.imagemagick.org/fancybox/jquery.fancybox-1.3.4.pack.js"></script>\r
  40   <script type="text/javascript">\r
  41     $(document).ready(function() {\r
  42       $("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox({\r
  43         'transitionIn'  : 'elastic',\r
  44         'transitionOut' : 'elastic',\r
  45         'overlayShow'   : false,\r
  46         'opacity'       : true\r
  47       });\r
  48     });\r
  49   </script>\r
  50 </head>\r
  51 \r
  52 <body id="www-imagemagick-org">\r
  53 <div class="titlebar">\r
  54 <div style="margin: 17px auto; float: left;">\r
  55   <script type="text/javascript">\r
  56   <!--\r
  57     google_ad_client = "pub-3129977114552745";\r
  58     google_ad_slot = "5439289906";\r
  59     google_ad_width = 728;\r
  60     google_ad_height = 90;\r
  61   //-->\r
  62   </script>\r
  63   <script type="text/javascript"\r
  64     src="http://pagead2.googlesyndication.com/pagead/show_ads.js">\r
  65   </script>\r
  66 </div>\r
  67 <a href="http://www.imagemagick.org/discourse-server/">\r
  68   <img src="../images/logo.jpg"\r
  69   alt="ImageMagick Logo"\r
  70   style="width: 123px; height: 118px; border: 0px; float: right;" /></a>\r
  71 <a href="../index.html">\r
  72   <img src="../images/sprite.jpg"\r
  73   alt="ImageMagick Sprite"\r
  74   style="width: 114px; height: 118px; border: 0px; float: right;" /></a>\r
  75 </div>\r
  76 \r
  77 <div class="westbar">\r
  78 \r
  79 <div class="menu">
  80   <a title="About ImageMagick" href="../index.html">About ImageMagick</a>
  81 </div>
  82 <div class="menu">
  83   <a title="Binary Releases" href="../www/binary-releases.html">Binary Releases</a>
  84 </div>
  85 <div class="sub">
  86     <a title="Binary Release: Unix" href="../www/binary-releases.html#unix">Unix</a>
  87 </div>
  88 <div class="sub">
  89     <a title="Binary Release: MacOS X" href="../www/binary-releases.html#macosx">Mac OS X</a>
  90 </div>
  91 <div class="sub">
  92     <a title="Binary Release: iOS" href="../www/binary-releases.html#iOS">iOS</a>
  93 </div>
  94 <div class="sub">
  95     <a title="Binary Release: Windows" href="../www/binary-releases.html#windows">Windows</a>
  96 </div>
  97 <div class="sep"></div>\r
  98 <div class="menu">
  99   <a title="Command-line Tools" href="../www/command-line-tools.html">Command-line Tools</a>
 100 </div>
 101 <div class="sub">
 102     <a title="Command-line Tools: Processing" href="../www/command-line-processing.html">Processing</a>
 103 </div>
 104 <div class="sub">
 105     <a title="Command-line Tools: Options" href="../www/command-line-options.html">Options</a>
 106 </div>
 107 <div class="sub">
 108     <a title="Command-line Tools: Usage" href="http://www.imagemagick.org/Usage/">Usage</a>
 109 </div>
 110 <div class="menu">
 111   <a title="Program Interfaces" href="../www/api.html">Program Interfaces</a>
 112 </div>
 113 <div class="sub">
 114     <a title="Program Interface: MagickWand" href="../www/magick-wand.html">MagickWand</a>
 115 </div>
 116 <div class="sub">
 117     <a title="Program Interface: MagickCore" href="../www/magick-core.html">MagickCore</a>
 118 </div>
 119 <div class="sub">
 120     <a title="Program Interface: PerlMagick" href="../www/perl-magick.html">PerlMagick</a>
 121 </div>
 122 <div class="sub">
 123     <a title="Program Interface: Magick++" href="../www/magick++.html">Magick++</a>
 124 </div>
 125 <div class="sep"></div>\r
 126 <div  class="menu">
 127    <a title="Install from Source" href="../www/install-source.html">Install from Source</a>
 128 </div>
 129 <div class="sub">
 130     <a title="Install from Source: Unix" href="../www/install-source.html#unix">Unix</a>
 131 </div>
 132 <div class="sub">
 133     <a title="Install from Source: Windows" href="../www/install-source.html#windows">Windows</a>
 134  </div>
 135 <div class="menu">
 136   <a title="Resources" href="../www/resources.html">Resources</a>
 137 </div>
 138 <div class="menu">
 139   <a title="Architecture" href="../www/architecture.html">Architecture</a>
 140 </div>
 141 <div class="menu">
 142   <a title="Download" href="../www/download.html">Download</a>
 143 </div>
 144 <div class="sep"></div>\r
 145 <div class="menu">
 146   <a title="Search" href="../www/search.html">Search</a>
 147 </div>
 148 <div class="sep"></div>\r
 149 <div class="menu">
 150   <a title="Site Map" href="../www/sitemap.html">Site Map</a>
 151 </div>
 152 <div  class="sub">
 153   <a title="Site Map: Links" href="../www/links.html">Links</a>
 154 </div>
 155 <div class="sep"></div>\r
 156 <div  class="menu">
 157   <a rel="follow" title="Sponsors" href="../www/sponsors.html">Sponsors:</a>
 158
 159 <a href="http://www.networkredux.com">
 160   <img src="../images/networkredux.png" width="140" height="31" alt="[sponsor]"
 161   style="margin-top: 4px; margin-left: 4px; border: 0px; float: left;" /></a>
 162 <div class="sponsbox">
 163 <div  class="sponsor">
 164   <a rel="follow" title="Sponsor: Autoteile" href="http://www.q11-shop.de">Autoteile</a><!-- 201205010540s suvalj -->
 165 </div>
 166 <div  class="sponsor">
 167   <a rel="follow" title="Sponsor: Web Hosting" href="http://www.micfo.com">Web Hosting</a><!-- 209901010090s golestan -->
 168 </div>
 169 <div  class="sponsor">
 170   <a rel="follow" title="Sponsor: Search engine optimisation" href="http://www.seomoves.com.au">Search engine optimisation</a><!-- 201110010090s jen@seo lowprofilelinks -->
 171 </div>
 172 <div  class="sponsor">
 173   <a rel="follow" title="Sponsor: Druckerei" href="http://print24.com/de/">Druckerei</a><!-- 201110010720 -->
 174 </div>
 175 <div  class="sponsor">
 176   <a rel="follow" title="Sponsor: Web Hosting Deals" href="http://www.webhostingdeals.org">Web Hosting Deals</a><!-- 201111010270 chee.hoa darin -->
 177 </div>
 178 <div  class="sponsor">
 179   <a rel="follow" title="Sponsor: Autos part" href="http://www.pkwteile.de/autoteile">Autos part</a><!-- 201112010090s jr@pkwte... -->
 180 </div>
 181 <div  class="sponsor">
 182   <a rel="follow" title="Sponsor: Web Hosting Reviews" href="http://www.webhostingsecretrevealed.com">Web Hosting Secret Revealed</a><!-- 201204010540 iamchee jerry -->
 183 </div>
 184 <div  class="sponsor">
 185   <a rel="follow" title="Sponsor: Web Hosting Break" href="http://www.webhostingbreak.com">Web Hosting Break</a><!-- 201109010090 ian@ian-m... -->
 186 </div>
 187 <div  class="sponsor">
 188   <a rel="follow" title="Sponsor: Druckerei" href="http://www.allesdruck.de">Druckerei</a><!-- 201303011500 r.leo -->
 189 </div>
 190 <div  class="sponsor">
 191   <a rel="follow" title="Sponsor: Website Hosting" href="http://www.hostreviewgeeks.com">Website Hosting</a><!-- 201110010090 alexanian media -->
 192 </div>
 193 <div  class="sponsor">
 194   <a rel="follow" title="Sponsor: Hotel München" href="http://www.messehotel-erb-muenchen.de">Hotel München</a><!-- 201111010450 cerb -->
 195 </div>
 196 <div  class="sponsor">
 197   <a rel="follow" title="Sponsor: Best Web Hosting" href="http://webhostinggeeks.com">Best Web Hosting</a><!-- 201110010720 -->
 198 </div>
 199 <div  class="sponsor">
 200   <a rel="follow" title="Sponsor: Flyer drucken" href="http://www.online-druck.biz">Flyer drucken</a><!-- 201109010900 Floeter-->
 201 </div>
 202 <div  class="sponsor">
 203   <a rel="follow" title="Sponsor: Web Hosting Ratings" href="http://webhostingrating.com">Web Hosting Ratings</a><!-- 201110010720 -->
 204 </div>
 205 <div  class="sponsor">
 206    <a rel="follow" title="Sponsor: Best Web Hosting" href="http://www.webhostingclue.com">Best Web Hosting</a><!-- 2012030100300 accounting@webhostingclue -->
 207 </div>
 208 </div>
 209 </div>
 210 </div>\r
 211 \r
 212 <div class="eastbar">\r
 213   <div class="g-plusone" data-size="standard" data-count="false"></div>\r
 214 </div>\r
 215 \r
 216 <div class="main">\r
 217 \r
 218 \r
 219 <h1>ImageMagick Magick Vector Graphics</h1>
 220 <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>
 221
 222 <a id="intro"></a>
 223 <div class="doc-section">
 224
 225 <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
 226 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>
 227
 228 <p class='crt'><span class="crtprompt"> $magick&gt; </span><span class='crtin'>convert -size 100x60 canvas:skyblue -fill white -stroke black \  <br/>
 229     -draw "path 'M 30,40  A 30,20  20  0,0 70,20 A 30,20  20  1,0 30,40 Z '" \ <br/>
 230     arc.png</span></p>
 231 <p>and here is the result:</p>
 232
 233 <p class="image">
 234   <a href="../images/arc.png"><img src="../images/arc.png" width="100" height="60" alt="arc" /></a>
 235 </p>
 236
 237 <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>
 238
 239 <div class="viewport">
 240   push graphic-context
 241     viewbox 0 0 624 369
 242     affine 0.283636 0 0 0.283846 -0 -0
 243     push graphic-context
 244       push graphic-context
 245         fill 'darkslateblue'
 246         stroke 'blue'
 247         stroke-width 1
 248         rectangle 1,1 2199,1299
 249       pop graphic-context
 250       push graphic-context
 251         font-size 40
 252         fill 'white'
 253         stroke-width 1
 254         text 600,1100 'Average: 20.0'
 255       pop graphic-context
 256       push graphic-context
 257         fill 'red'
 258         stroke 'black'
 259         stroke-width 5
 260         path 'M700.0,600.0 L340.0,600.0 A360.0,360.0 0 0,1 408.1452123287954,389.2376150414973 z'
 261       pop graphic-context
 262       push graphic-context
 263         font-size 40
 264         fill 'white'
 265         stroke-width 1
 266         text 1400,140 'MagickWand for PHP'
 267       pop graphic-context
 268       push graphic-context
 269         font-size 30
 270         fill 'white'
 271         stroke-width 1
 272         text 1800,140 '(10.0%)'
 273       pop graphic-context
 274       push graphic-context
 275         fill 'red'
 276         stroke 'black'
 277         stroke-width 4
 278         rectangle 1330,100 1370,140
 279       pop graphic-context
 280       push graphic-context
 281         fill 'yellow'
 282         stroke 'black'
 283         stroke-width 5
 284         path 'M700.0,600.0 L408.1452123287954,389.2376150414973 A360.0,360.0 0 0,1 976.5894480359858,369.56936567559273 z'
 285       pop graphic-context
 286       push graphic-context
 287         font-size 40
 288         fill 'white'
 289         stroke-width 1
 290         text 1400,220 'MagickCore'
 291       pop graphic-context
 292       push graphic-context
 293         font-size 30
 294         fill 'white'
 295         stroke-width 1
 296         text 1800,220 '(29.0%)'
 297       pop graphic-context
 298       push graphic-context
 299         fill 'yellow'
 300         stroke 'black'
 301         stroke-width 4
 302         rectangle 1330,180 1370,220
 303       pop graphic-context
 304       push graphic-context
 305         fill 'fuchsia'
 306         stroke 'black'
 307         stroke-width 5
 308         path 'M700.0,600.0 L976.5894480359858,369.56936567559273 A360.0,360.0 0 0,1 964.2680466142854,844.4634932636567 z'
 309       pop graphic-context
 310       push graphic-context
 311         font-size 40
 312         fill 'white'
 313         stroke-width 1
 314         text 1400,300 'MagickWand'
 315       pop graphic-context
 316       push graphic-context
 317         font-size 30
 318         fill 'white'
 319         stroke-width 1
 320         text 1800,300 '(22.9%)'
 321       pop graphic-context
 322       push graphic-context
 323         fill 'fuchsia'
 324         stroke 'black'
 325         stroke-width 4
 326         rectangle 1330,260 1370,300
 327       pop graphic-context
 328       push graphic-context
 329         fill 'blue'
 330         stroke 'black'
 331         stroke-width 5
 332         path 'M700.0,600.0 L964.2680466142854,844.4634932636567 A360.0,360.0 0 0,1 757.853099990584,955.3210081341651 z'
 333       pop graphic-context
 334       push graphic-context
 335         font-size 40
 336         fill 'white'
 337         stroke-width 1
 338         text 1400,380 'JMagick'
 339       pop graphic-context
 340       push graphic-context
 341         font-size 30
 342         fill 'white'
 343         stroke-width 1
 344         text 1800,380 '(10.6%)'
 345       pop graphic-context
 346       push graphic-context
 347         fill 'blue'
 348         stroke 'black'
 349         stroke-width 4
 350         rectangle 1330,340 1370,380
 351       pop graphic-context
 352       push graphic-context
 353         fill 'lime'
 354         stroke 'black'
 355         stroke-width 5
 356         path 'M700.0,600.0 L757.853099990584,955.3210081341651 A360.0,360.0 0 0,1 340.0,600.0 z'
 357       pop graphic-context
 358       push graphic-context
 359         font-size 40
 360         fill 'white'
 361         stroke-width 1
 362         text 1400,460 'Magick++'
 363       pop graphic-context
 364       push graphic-context
 365         font-size 30
 366         fill 'white'
 367         stroke-width 1
 368         text 1800,460 '(27.5%)'
 369       pop graphic-context
 370       push graphic-context
 371         fill 'lime'
 372         stroke 'black'
 373         stroke-width 4
 374         rectangle 1330,420 1370,460
 375       pop graphic-context
 376       push graphic-context
 377         font-size 100
 378         fill 'white'
 379         stroke-width 1
 380         text 100,150 'ImageMagick'
 381       pop graphic-context
 382       push graphic-context
 383         fill 'none'
 384         stroke 'black'
 385         stroke-width 5
 386         circle 700,600 700,960
 387       pop graphic-context
 388     pop graphic-context
 389   pop graphic-context
 390 </div>
 391
 392 <p>to render a pie chart with this command:</p>
 393
 394 <p class='crt'><span class="crtprompt"> $magick&gt; </span><span class='crtin'>convert piechart.mvg piechart.png</span></p>
 395 <p>which produces this rendering:</p>
 396
 397 <p class="image">
 398   <a href="../images/piechart.png"><img src="../images/piechart.png" width="624" height="369" alt="piechart" /></a>
 399 </p>
 400
 401 <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>
 402
 403 <p class='crt'><span class="crtprompt"> $magick&gt; </span><span class='crtin'>convert piechart.svg piechart.jpg</span></p>
 404
 405 <p>to produce the same pie chart we created with the MVG language.</p>
 406
 407 <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>
 408
 409 <div class="viewport">
 410    (void) PushDrawingWand(draw_wand);
 411    {
 412      const PointInfo points[6] =
 413      {
 414        { 180,504 },
 415        { 282.7,578.6 },
 416        { 243.5,699.4 },
 417        { 116.5,699.4 },
 418        { 77.26,578.6 },
 419        { 180,504 }
 420      };
 421
 422      DrawSetStrokeAntialias(draw_wand,True);
 423      DrawSetStrokeWidth(draw_wand,9);
 424      DrawSetStrokeLineCap(draw_wand,RoundCap);
 425      DrawSetStrokeLineJoin(draw_wand,RoundJoin);
 426      (void) DrawSetStrokeDashArray(draw_wand,0,(const double *)NULL);
 427      (void) PixelSetColor(color,"#4000c2");
 428      DrawSetStrokeColor(draw_wand,color);
 429      DrawSetFillRule(draw_wand,EvenOddRule);
 430      (void) PixelSetColor(color,"#800000");
 431      DrawSetFillColor(draw_wand,color);
 432      DrawPolygon(draw_wand,6,points);
 433    }
 434    (void) PopDrawingWand(draw_wand);
 435 </div>
 436
 437 </div>
 438
 439 <h2><a id="overview"></a>MVG Overview</h2>
 440 <div class="doc-section">
 441
 442 <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>
 443
 444 <p>Metafile wrapper syntax (to support stand-alone MVG files):</p>
 445
 446 <pre class="text">
 447   push graphic-context
 448     viewbox 0 0 width height
 449     [ any other MVG commands ]
 450   pop graphic-context
 451 </pre>
 452
 453 <p>Pattern syntax (saving and restoring context):</p>
 454
 455 <pre class="text">
 456   push pattern id x,y width,height
 457    push graphic-context
 458     [ drawing commands ]
 459    pop graphic-context
 460   pop pattern
 461 </pre>
 462
 463 <p>an example is (%s is a identifier string):</p>
 464
 465 <pre class="text">
 466   push defs
 467    push pattern %s 10,10 20,20
 468     push graphic-context
 469      fill red
 470      rectangle 5,5 15,15
 471     pop graphic-context
 472     push graphic-context
 473      fill green
 474      rectangle 10,10 20,20
 475     pop graphic-context
 476    pop pattern
 477   pop defs
 478 </pre>
 479
 480 <p>For image tiling use:</p>
 481
 482 <pre class="text">
 483   push pattern id x,y width,height
 484    image Copy ...
 485   pop pattern
 486 </pre>
 487
 488 <p>Note you can use the pattern for either the fill or stroke like:</p>
 489
 490 <pre class="text">
 491   stroke url(#%s)
 492 </pre>
 493
 494 <p>or</p>
 495
 496 <pre class="text">
 497   fill url(#%s)
 498 </pre>
 499
 500 <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>
 501
 502 <pre class="text">
 503   push defs
 504    push clip-path %s
 505     push graphic-context
 506      rectangle 10,10 20,20
 507     pop graphic-context
 508    pop clip-path
 509   pop defs
 510   clip-path url(#%s)
 511 </pre>
 512
 513 </div>
 514
 515 <h2><a id="primitives"></a>Drawing Primitives</h2>
 516 <div class="doc-section">
 517
 518 <p>Here is a complete description of the MVG drawing primitives:</p>
 519
 520 <dl class="doc">
 521
 522   <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>
 523
 524   <dd></dd>
 525
 526
 527
 528   <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>
 529
 530   <dd></dd>
 531
 532   <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>
 533
 534   <dd>
 535   <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
 536   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>
 537   </dd>
 538
 539   <dt class="doc"><a id="border-color"></a>border-color <em class="option">color</em></dt>
 540
 541   <dd></dd>
 542
 543   <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>
 544
 545   <dd></dd>
 546
 547   <dt class="doc"><a id="clip-path"></a>clip-path url(<em class="option">name</em>)</dt>
 548
 549   <dd></dd>
 550
 551   <dt class="doc"><a id="clip-rule"></a>clip-rule <em class="option">rule</em></dt>
 552
 553   <dd>Choose from these rule types:
 554
 555         <p class="text">
 556           evenodd <br/>
 557           nonzero
 558         </p>
 559    </dd>
 560
 561   <dt class="doc"><a id="clip-units"></a>clip-units <em class="option">units</em></dt>
 562
 563   <dd>Choose from these unit types:
 564
 565         <p class="text">
 566           userSpace <br/>
 567           userSpaceOnUse  <br/>
 568           objectBoundingBox <br/>
 569         </p>
 570   </dd>
 571
 572   <dt class="doc"><a id="color"></a>color <em class="option">x</em>,<em class="option">y</em> <em class="option">method</em></dt>
 573
 574
 575
 576
 577
 578
 579
 580
 581
 582
 583
 584 <dd>Choose from these method types:
 585
 586 <pre class="text">
 587   point
 588   replace
 589   floodfill
 590   filltoborder
 591   reset
 592 </pre>
 593
 594 </dd>
 595
 596   <dt class="doc"><a id="decorate"></a>decorate <em class="option">type</em></dt>
 597
 598
 599 <dd>Choose from these types of decorations:
 600
 601 <pre class="text">
 602   none
 603   line-through
 604   overline
 605   underline
 606 </pre>
 607
 608 </dd>
 609
 610   <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>
 611
 612   <dt class="doc"><a id="fill"></a>fill <em class="option">color</em></dt>
 613
 614 <dd>Choose from any of these <a href="../www/color.html">colors</a>.
 615 </dd>
 616
 617   <dt class="doc"><a id="fill-opacity"></a>fill-opacity <em class="option">opacity</em></dt>
 618
 619
 620 <dd>The opacity ranges from 0.0 (fully transparent) to 1.0 (fully opaque) or as a percentage (e.g. 50%).
 621 </dd>
 622
 623   <dt class="doc"><a id="fill-rule"></a>fill-rule <em class="option">rule</em></dt>
 624
 625
 626 <dd>Choose from these rule types:
 627
 628 <pre class="text">
 629   evenodd
 630   nonzero
 631 </pre>
 632
 633 </dd>
 634
 635   <dt class="doc"><a id="font"></a>font <em class="option">name</em></dt>
 636
 637 <dd></dd>
 638
 639   <dt class="doc"><a id="font-family"></a>font-family <em class="option">family</em></dt>
 640
 641 <dd></dd>
 642
 643   <dt class="doc"><a id="font-size"></a>font-size <em class="option">point-size</em></dt>
 644
 645 <dd></dd>
 646
 647   <dt class="doc"><a id="font-stretch"></a>font-stretch <em class="option">type</em></dt>
 648
 649 <dd>Choose from these stretch types:
 650
 651 <pre class="text">
 652   all
 653   normal
 654   ultra-condensed
 655   extra-condensed
 656   condensed
 657   semi-condensed
 658   semi-expanded
 659   expanded
 660   extra-expanded
 661   ultra-expanded
 662 </pre>
 663
 664 </dd>
 665
 666   <dt class="doc"><a id="font-style"></a>font-style <em class="option">style</em></dt>
 667
 668
 669 <dd>Choose from these styles:
 670
 671 <pre class="text">
 672   all
 673   normal
 674   italic
 675   oblique
 676 </pre>
 677
 678 </dd>
 679
 680   <dt class="doc"><a id="font-weight"></a>font-weight <em class="option">weight</em></dt>
 681
 682 <dd>Choose from these weights:
 683
 684 <pre class="text">
 685   all
 686   normal
 687   bold
 688   100
 689   200
 690   300
 691   400
 692   500
 693   600
 694   700
 695   800
 696   900
 697 </pre>
 698
 699 </dd>
 700
 701   <dt class="doc"><a id="gradient-units"></a>gradient-units <em class="option">units</em></dt>
 702
 703 <dd>Choose from these units:
 704
 705 <pre class="text">
 706   userSpace
 707   userSpaceOnUse
 708   objectBoundingBox
 709 </pre>
 710
 711 </dd>
 712
 713   <dt class="doc"><a id="gravity"></a>gravity <em class="option">type</em></dt>
 714
 715 <dd>Choose from these gravity types:
 716
 717 <pre class="text">
 718   NorthWest
 719   North
 720   NorthEast
 721   West
 722   Center
 723   East
 724   SouthWest
 725   South
 726   SouthEast
 727 </pre>
 728
 729 </dd>
 730
 731   <dt class="doc"><a id="compose"></a>image <em class="option">compose x,y width,height 'filename'</em></dt>
 732
 733 <dd>Choose from these compose operations:
 734
 735 <table id="table" cellpadding="2" cellspacing="0" style="width: 93%">
 736   <tbody>
 737   <tr valign="top">
 738     <th align="left" style="width: 8%">Method</th>
 739     <th align="left">Description</th>
 740   </tr>
 741
 742   <tr valign="top">
 743     <td valign="top">clear</td>
 744     <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>
 745   </tr>
 746
 747   <tr valign="top">
 748     <td valign="top">src</td>
 749     <td valign="top">The source is copied to the destination. The destination is not used as input.</td>
 750   </tr>
 751
 752   <tr valign="top">
 753     <td valign="top">dst</td>
 754     <td valign="top">The destination is left untouched.</td>
 755   </tr>
 756
 757   <tr valign="top">
 758     <td valign="top"><b>src-over</b></td>
 759     <td valign="top">The source is composited over the destination.</td>
 760   </tr>
 761
 762   <tr valign="top">
 763     <td valign="top">dst-over</td>
 764     <td valign="top">The destination is composited over the source and the result replaces the destination.</td>
 765   </tr>
 766
 767   <tr valign="top">
 768     <td valign="top">src-in</td>
 769     <td valign="top">The part of the source lying inside of the destination replaces the destination.</td>
 770   </tr>
 771
 772   <tr valign="top">
 773     <td valign="top">dst-in</td>
 774     <td valign="top">The part of the destination lying inside of the source replaces the destination.</td>
 775   </tr>
 776
 777   <tr valign="top">
 778     <td valign="top">src-out</td>
 779     <td valign="top">The part of the source lying outside of the destination replaces the destination.</td>
 780   </tr>
 781
 782   <tr valign="top">
 783     <td valign="top">dst-out</td>
 784     <td valign="top">The part of the destination lying outside of the source         replaces the destination.</td>
 785   </tr>
 786
 787   <tr valign="top">
 788     <td valign="top">src-atop</td>
 789     <td valign="top">The part of the source lying inside of the destination is  composited onto the destination.</td>
 790   </tr>
 791
 792   <tr valign="top">
 793     <td valign="top">dst-atop</td>
 794     <td valign="top">The part of the destination lying inside of the source is composited over the source and replaces the destination.</td>
 795   </tr>
 796
 797   <tr valign="top">
 798     <td valign="top">multiply</td>
 799     <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>
 800   </tr>
 801
 802   <tr valign="top">
 803     <td valign="top">screen</td>
 804     <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>
 805   </tr>
 806
 807   <tr valign="top">
 808     <td valign="top">overlay</td>
 809     <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>
 810   </tr>
 811
 812   <tr valign="top">
 813     <td valign="top">darken</td>
 814     <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>
 815   </tr>
 816
 817   <tr valign="top">
 818     <td valign="top">lighten</td>
 819     <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>
 820   </tr>
 821
 822   <tr valign="top">
 823     <td valign="top">linear-light</td>
 824     <td valign="top">Increase contrast slightly with an impact on the foreground's tonal values.</td>
 825   </tr>
 826
 827   <tr valign="top">
 828     <td valign="top">color-dodge</td>
 829     <td valign="top">Brightens the destination color to reflect the source color. Painting with black produces no change.</td>
 830   </tr>
 831
 832   <tr valign="top">
 833     <td valign="top">color-burn</td>
 834     <td valign="top">Darkens the destination color to reflect the source color.  Painting with white produces no change.</td>
 835   </tr>
 836
 837   <tr valign="top">
 838     <td valign="top">hard-light</td>
 839     <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>
 840   </tr>
 841
 842   <tr valign="top">
 843     <td valign="top">soft-light</td>
 844     <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>
 845   </tr>
 846
 847   <tr valign="top">
 848     <td valign="top">plus</td>
 849     <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>
 850   </tr>
 851
 852   <tr valign="top">
 853     <td valign="top">add</td>
 854     <td valign="top">As per 'plus' but transparency data is treated as matte
 855         values. As such any transparent areas in either image remain
 856         transparent. </td>
 857   </tr>
 858
 859   <tr valign="top">
 860     <td valign="top">minus</td>
 861     <td valign="top">Subtract the colors in the source image from the
 862         destination image. When transparency is involved, Opaque areas will be
 863         subtracted from any destination opaque areas. </td>
 864   </tr>
 865
 866   <tr valign="top">
 867     <td valign="top">subtract</td>
 868     <td valign="top">Subtract the colors in the source image from the
 869         destination image. When transparency is involved transparent areas are
 870         subtracted, so only the opaque areas in the source remain opaque in
 871         the destination image. </td>
 872   </tr>
 873
 874   <tr valign="top">
 875     <td valign="top">difference</td>
 876     <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>
 877   </tr>
 878
 879   <tr valign="top">
 880     <td valign="top">exclusion</td>
 881     <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>
 882   </tr>
 883
 884   <tr valign="top">
 885     <td valign="top">xor</td>
 886     <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>
 887   </tr>
 888
 889   <tr valign="top">
 890     <td valign="top">copy-*</td>
 891     <td valign="top">Copy the specificed channel in the source image to the
 892         same channel in the destination image.  If the channel specified in
 893         the source image does not exist, (which can only happen for methods,
 894         '<kbd>copy-opacity</kbd>' or '<kbd>copy-black</kbd>') then it is
 895         assumed that the source image is a special grayscale channel image
 896         of the values to be copied. </td>
 897     </tr>
 898
 899   <tr valign="top">
 900     <td valign="top">change-mask</td>
 901     <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>
 902   </tr>
 903   </tbody>
 904 </table>
 905
 906 </dd>
 907
 908   <dt class="doc"><a id="interline-spacing"></a>interline-spacing <em class="option">pixels</em></dt>
 909
 910   <dd></dd>
 911
 912   <dt class="doc"><a id="interword-spacing"></a>interword-spacing <em class="option">pixels</em></dt>
 913
 914   <dd></dd>
 915
 916   <dt class="doc"><a id="kerning"></a>kerning <em class="option">pixels</em></dt>
 917
 918   <dd></dd>
 919
 920   <dt class="doc"><a id="line"></a>line <em class="option">x,y x<sub>1</sub>,y<sub>1</sub></em></dt>
 921
 922   <dd></dd>
 923
 924   <dt class="doc"><a id="matte"></a>matte <em class="option">x,y method</em></dt>
 925
 926 <dd>Choose from these methods:
 927
 928 <pre class="text">
 929   point
 930   replace
 931   floodfill
 932   filltoborder
 933   reset
 934 </pre>
 935
 936 </dd>
 937
 938   <dt class="doc"><a id="offset"></a>offset <em class="option">offset</em></dt>
 939
 940   <dd></dd>
 941
 942   <dt class="doc"><a id="opacity"></a>opacity <em class="option">opacity</em></dt>
 943
 944 <dd>Use percent (e.g. 50%).</dd>
 945
 946   <dt class="doc"><a id="path"></a>path <em class="option">path</em></dt>
 947
 948   <dd></dd>
 949
 950   <dt class="doc"><a id="point"></a>point <em class="option">x,y</em></dt>
 951
 952   <dd></dd>
 953
 954   <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>
 955
 956   <dd></dd>
 957
 958   <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>
 959
 960   <dd></dd>
 961
 962   <dt class="doc"><a id="pop-clip-path"></a>pop clip-path</dt>
 963
 964   <dd></dd>
 965
 966   <dt class="doc"><a id="pop-defs"></a>pop defs</dt>
 967
 968   <dd></dd>
 969
 970   <dt class="doc"><a id="pop-gradient"></a>pop gradient</dt>
 971
 972   <dd></dd>
 973
 974   <dt class="doc"><a id="pop-graphic-context"></a>pop graphic-context</dt>
 975
 976   <dd></dd>
 977
 978   <dt class="doc"><a id="pop-pattern"></a>pop pattern</dt>
 979
 980   <dd></dd>
 981
 982   <dt class="doc"><a id="push"></a>push clip-path <em class="option">name</em></dt>
 983
 984   <dd></dd>
 985
 986   <dt class="doc"><a id="push-defs"></a>push defs</dt>
 987
 988   <dd></dd>
 989
 990   <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>
 991
 992   <dd></dd>
 993
 994   <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>
 995
 996   <dd></dd>
 997
 998   <dt class="doc"><a id="push-graphic-context"></a>push graphic-context</dt>
 999
1000   <dd></dd>
1001
1002   <dt class="doc"><a id="push-pattern"></a>push pattern <em class="option">id radial x,y width,height</em></dt>
1003
1004   <dd></dd>
1005
1006   <dt class="doc"><a id="rectangle"></a>rectangle <em class="option">x,y x<sub>1</sub>,y<sub>1</sub></em></dt>
1007
1008   <dd></dd>
1009
1010   <dt class="doc"><a id="rotate"></a>rotate <em class="option">angle</em></dt>
1011
1012   <dd></dd>
1013
1014   <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>
1015
1016   <dd></dd>
1017
1018   <dt class="doc"><a id="scale"></a>scale <em class="option">x,y</em></dt>
1019
1020   <dd></dd>
1021
1022   <dt class="doc"><a id="skewX"></a>skewX <em class="option">angle</em></dt>
1023
1024   <dd></dd>
1025
1026   <dt class="doc"><a id="skewY"></a>skewX <em class="option">angle</em></dt>
1027
1028   <dd></dd>
1029
1030   <dt class="doc"><a id="stop-color"></a>stop-color <em class="option">color offset</em></dt>
1031
1032   <dd></dd>
1033
1034   <dt class="doc"><a id="stroke"></a>stroke <em class="option">color</em></dt>
1035
1036   <dd></dd>
1037
1038   <dt class="doc"><a id="stroke-antialias"></a>stroke-antialias <em class="option">0 &bull; 1</em></dt>
1039
1040   <dd></dd>
1041
1042   <dt class="doc"><a id="stroke-dasharray"></a>stroke-dasharray <em class="option">none &bull; numeric-list</em></dt>
1043
1044   <dd></dd>
1045
1046   <dt class="doc"><a id="stroke-dashoffset"></a>stroke-dashoffset <em class="option">offset</em></dt>
1047
1048   <dd></dd>
1049
1050   <dt class="doc"><a id="stroke-linecap"></a>stroke-linecap <em class="option">type</em></dt>
1051
1052
1053   <dd>Choose from these cap types:
1054
1055 <pre class="text">
1056   butt
1057   round
1058   square
1059 </pre>
1060
1061   </dd>
1062
1063   <dt class="doc"><a id="stroke-linejoin"></a>stroke-linejoin <em class="option">type</em></dt>
1064
1065   <dd>Choose from these join types:
1066
1067 <pre class="text">
1068   bevel
1069   miter
1070   round
1071 </pre>
1072
1073   </dd>
1074
1075   <dt class="doc"><a id="stroke-miterlimit"></a>stroke-miterlimit <em class="option">limit</em></dt>
1076
1077   <dd></dd>
1078
1079   <dt class="doc"><a id="stroke-opacity"></a>stroke-opacity <em class="option">opacity</em></dt>
1080
1081   <dd>The opacity ranges from 0.0 (fully transparent) to 1.0 (fully opaque) or as a percentage (e.g. 50%).
1082   </dd>
1083
1084   <dt class="doc"><a id="stroke-width"></a>stroke-width <em class="option">width</em></dt>
1085
1086   <dd></dd>
1087
1088   <dt class="doc"><a id="text"></a>text <em class="option">"text"</em></dt>
1089
1090   <dd></dd>
1091
1092   <dt class="doc"><a id="text-antialias"></a>text-antialias <em class="option">0 &bull; 1</em></dt>
1093
1094   <dd></dd>
1095
1096   <dt class="doc"><a id="text-undercolor"></a>text-undercolor <em class="option">color</em></dt>
1097
1098   <dd></dd>
1099
1100   <dt class="doc"><a id="translate"></a>translate <em class="option">x,y</em></dt>
1101
1102   <dd></dd>
1103
1104   <dt class="doc"><a id="viewbox"></a>viewbox <em class="option">x,y x<sub>1</sub>,y<sub>1</sub></em></dt>
1105
1106   <dd></dd>
1107
1108 </dl>
1109
1110 </div>
1111
1112
1113 \r
1114 </div>\r
1115 \r
1116 <div id="linkbar">\r
1117     <span id="linkbar-west">&nbsp;</span>\r
1118     <span id="linkbar-center">\r
1119       <a href="http://www.imagemagick.org/discourse-server/">Discourse Server</a> &bull;\r
1120       <a href="http://www.imagemagick.org/MagickStudio/scripts/MagickStudio.cgi">Studio</a>\r
1121     </span>\r
1122     <span id="linkbar-east">&nbsp;</span>\r
1123   </div>\r
1124   <div class="footer">\r
1125     <span id="footer-west">&copy; 1999-2011 ImageMagick Studio LLC</span>\r
1126     <span id="footer-east"> <a href="http://www.imagemagick.org/script/contact.php">Contact the Wizards</a></span>\r
1127   </div>\r
1128   <div style="clear: both; margin: 0; width: 100%; "></div>\r
1129   <script type="text/javascript">\r
1130     var _gaq = _gaq || [];\r
1131     _gaq.push(['_setAccount', 'UA-17690367-1']);\r
1132     _gaq.push(['_trackPageview']);\r
1133 \r
1134     (function() {\r
1135       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
1136       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
1137       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
1138     })();\r
1139   </script>\r
1140 </body>\r
1141 </html>\r