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

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