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