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

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