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