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