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