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