2D Vector Graphics: PostScript, SVG, ImageMagick

coordinates | paths | shapes | color | text | groups | masks and filters | raster images

postscript svg imagemagick
hello world % hello.ps:

/Helvetica-Bold 20 selectfont
72 72 moveto (Hello, World!) show
<!-- hello.html: -->

<!DOCTYPE html>
    <svg width="400" height="400">
      <text x="100" y="100">
        Hello, World!
$ convert -size 400x400 xc:transparent \
  -draw "text 100,100 'Hello, World!'" hello.png
comment % comment
% another comment
<!-- comment
     another comment-->
postscript svg imagemagick
lower left upper left upper left
unit size 72 units per inch; i.e. each unit is the customary size of a point in the English-speaking world one pixel per unit
change coordinate system % move origin 72 units up and to the right:
72 72 translate

% increase size of unit 72-fold:
72 72 scale

% rotate coordinates 90 degrees counterclockwise:
90 rotate
<g transform="translate(50, 100)">
  <!-- origin at (50, 100) -->

<g transform="rotate(30)">
  <!-- rotate coordinates 30 degrees
       clockwise -->


<g transform="scale(2, 3)">
  <!-- double x-scale and triple
       y-scale -->

canvas size
get, set
% doesn't work on all devices:
currentpagedevice /PageSize get aload pop

% canvas size determined by device
<svg height="400px" width="400px"></svg> $ convert -size 400x400 xc:white white.png
postscript svg mvg
line newpath
15 25 moveto
70 90 lineto

% rlineto uses relative coordinates:
15 25 moveto
55 65 rlineto
<line x1="40" y1="20" x2="80" y2="20"
      style="stroke: black;"/>

<path d="M 40 20 L 80 20"
      stroke="black" fill="none"/>

<!-- use relative coordinates for 2nd point: -->
<path d="M 40 20 l 40 0"
      stroke="black" fill="none"/>
$ convert -size 400x400 xc:transparent \
  -stroke black -draw "line 40,20 80,20" \

convert -size 400x400 xc:transparent \
  -stroke black -draw "path 'M 40,20 L 80,20'" \

convert -size 400x400 xc:transparent \
  -stroke black -draw "path 'M 40,20 l 40,0'" \
stroke width 2 setlinewidth
15 25 moveto
70 90 lineto
<line x1="40" y1="20" x2="80" y2="20"
      style="stroke: black;"
convert -size 400x400 xc:transparent \
  -stroke black -strokewidth 4 -draw "line 40,20 80,20" \
line cap
none, circle, square
0 setlinecap
1 setlinecap
2 setlinecap
<line x1="10" y1="15" x2="50" y2="15"
      style="stroke-linecap: butt;"/>

<line x1="10" y1="45" x2="50" y2="45"
      style="stroke-linecap: round;"/>

<line x1="10" y1="75" x2="50" y2="75"
      style="stroke-linecap: square;"/>
dashed line none <!-- 10 pixel dash separated by 5 pixel space: -->
<line stroke-dasharray="10, 5"
      x1="10" y1="10" x2="190" y2="10"
      style="stroke: black"/>

<!-- alternate 10 and 5 pixel dashes: -->
<line stroke-dasharray="10, 5, 5, 5"
      x1="10" y1="10" x2="190" y2="10"
      style="stroke: black"/>
polyline newpath
10 10 moveto
20 20 lineto
30 10 lineto
40 20 lineto
<polyline points="10,10,20,20,30,10,40,20"

<path d="M 10 10 L 20 20 30 10 40 20"
      stroke="black" fill="none"/>
line join
miter, round, bevel
0 setlinejoin
1 setlinejoin
2 setlinejoin
<!-- stroke-linejoin can be "round" or "bevel": -->
<polyline points="10,10,20,20,30,10,40,20"
miter limit 1 setmiterlimit <polyline points="10,10,20,20,30,10,40,20"
circular arc % creates half-circular arc centered at
% (144,144) with radius 40:

144 144 40 90 270 arc
<path d="M 144 104 A 40 40 0 1 1 144 184"
      stroke="black" fill="none"/>
elliptic arc gsave
2 1 scale
144 144 40 90 270 arc
<path d="M 144 104 A 80 40 0 1 1 144 184"
      stroke="black" fill="none"/>
quadratic bezier None. If the control points of a quadratic bezier are Q0, Q1, and Q2, the equivalent cubic bezier has control points C0 = Q0, C1 = Q0 + 2Q1, C2 = 2Q1 + Q2, and C3 = Q2. <path d="M 144 144 Q 288 216 144 288"
      stroke="black" fill="none"/>
cubic bezier % control points are (144,144), (288,144),
% (288,288), and (144,288):

144 144 moveto
288 144 288 288 144 288 curveto
<path d="M 144 144 C 288 144 288 288 144 288"
      stroke="black" fill="none"/>
postscript svg mvg
outlined polygon % creates outline of triangle:
72 72 moveto
144 144 lineto
144 72 lineto
<polygon points="72,72,72,144,144,144"
solid polygon <polygon points="72,72,72,144,144,144"/>
outlined rectangle % x y width height:
200 100 40 20 rectstroke
<rect x="200" y="300"
      height="12" width="14"/>
solid rectangle % solid:
200 100 40 20 rectfill
<rect x="200" y="300"
      height="12" width="14"/>
solid rounded rectangle none <rect x="200" y="200"
      height="150" width="120"
      rx="20" ry="20"/>
solid circle newpath
144 144 40 0 360 arc
<circle cx="300" cy="200"
        r="35" fill="green"/>
solid ellipse gsave
1 1.6666 scale
144 144 40 0 360 arc
<ellipse cx="300" cy="100"
         rx="30" ry="50"
postscript svg mvg
black, white, gray
0 setgray
1 setgray
0.5 setgray
<!-- stroke attribute also takes rgb values -->
<rect x="200" y="300"
      height="50" width="80" fill="#000"/>

<rect x="200" y="300"
      height="50" width="80" fill="#FFF"/>

<rect x="200" y="300"
      height="50" width="80" fill="#777"/>
rgb color % default color is black. Sets current color to red:
1.0 0.0 0.0 setrgbcolor
<rect x="200" y="300"
      height="50" width="80" fill="#F00"/>

<rect x="200" y="300"
      height="50" width="80" fill="red"/>
hsb color sethsbcolor <rect x="200" y="300"
      height="50" width="80"
      style="fill:hsl(0, 100%, 50%)"/>
named color none HTML 4.1 defines 16 named colors, the same used by VGA; in practice most browsers recognize the X Windows color names
background color clippath 1 0.75 0.75 setrgbcolor fill
0 setgray
<svg width="400" height="400"
     style="background-color: pink">
  <!-- more elements here -->
stroke color stroke and fill color are the same <rect x="200" y="300"
      height="50" width="80"
      stroke="#F00" fill="none"/>
fill color stroke and fill color are the same <rect x="200" y="300"
      height="50" width="80"
opacity no support for transparency <rect x="80" y="180"
      height="120" width="140" fill="red"
<rect x="100" y="200"
      height="120" width="140" fill="blue"
postscript svg mvg
font /Helvetica 20 selectfont
72 72 moveto (lorem ipsum) show
<text x="100" y="100" font-family="Arial">
  lorem ipsum
built-in fonts /Times-Roman /Times-Italic
/Times-Bold /Times-BoldItalic
/Helvetica /Helvetica-Oblique
/Helvetica-Bold /Helvetica-BoldOblique
/Courier /Courier-Bold
/Courier-Oblique /Courier-BoldOblique
Andale Mono
Arial Black
Comic Sans MS
Courier New
Times New Roman
Trebuchet MS
$ convert -list font
generic fonts none serif
font size /Helvetica 20 selectfont
72 72 moveto (lorem ipsum) show
<text x="100" y="100" font-size="20">
  lorem ipsum
font weight
normal, bold
% must be separate font for weight:
/Helvetica-Bold 20 selectfont
72 72 moveto (lorem ipsum) show
<text x="100" y="100" font-weight="bold">
  lorem ipsum
font style
normal, italic, oblique
% must be separate font for style:
/Helvetica-Oblique 20 selectfont
72 72 moveto (lorem ipsum) show
<text x="100" y="100" font-style="italic">
  lorem ipsum
utf-8 PostScript is ASCII only.

One can use octal backslash sequences to put upper 8-bit characters in strings. Each font has an encoding associated with it.

There are CID fonts for multibyte character encodings, but they require extra software.
Make this first child of <head> element:
<meta charset="UTF-8">
text path <defs>
  <path id="sine_path"
        d="M 100 200
           C 200 100 300 0 400 100
           C 500 200 600 300 700 200
           C 800 100 900 100 900 100" />

<text font-family="Helvetica" font-size="40">
  <textPath xlink:href="#sine_path">
    This text is printed along a sine wave path.
postscript svg mvg
group similar in function to gsave and grestore? <g id="group1" fill="red">
  <rect x="1cm" y="1cm"
        width="1cm" height="1cm"/>
  <rect x="3cm" y="1cm"
        width="1cm" height="1cm"/>
definition <defs>
  <linearGradient id="Gradient01">
    <stop offset="20%" stop-color="#39F"/>
    <stop offset="90%" stop-color="#F3F"/>
masks and filters
postscript svg mvg
clip path <defs>
  <clipPath id="clip">
    <rect x="0" y="0" width="200" height="100" />

<!-- top half of circle renders: -->
<circle cx="100" cy="100" r="100"
linear gradient <defs>
  <linearGradient id="grad1">
    <stop offset="0%" stop-color="#FFF"/>
    <stop offset="100%" stop-color="#000"/>

<rect x="100" y="0"
      height="100" width="200"
      fill="url(#grad1)" />
radial gradient <defs>
  <radialGradient id="grad2">
    <stop offset="0%" stop-color="white"/>
    <stop offset="100%" stop-color="black"/>

<circle fill="url(#grad2)"
        cx="60" cy="60" r="50"/>
raster images
postscript svg mvg
raster image <image xlink:href="cat.jpg" x="0" y="0"
       width="300px" height="300px"/>
__________________________________________________________________ __________________________________________________________________ __________________________________________________________________


hello world

A complete program which renders "Hello, World!"


The syntax for a comment.

debug message

How to print a debug message.



unit size

In CSS, lengths the following units of length can be used:

abbrev unit
in inch
cm centimeter
mm millimeter
pc pica (6 to an inch)
pt point (72 to an inch)
px pixel

Pixels are used if the unit of length is not specified explicitly. High pixel density devices such as the Mac Retina display may nevertheless scale up the size of images specified in pixels.

change coordinate system

canvas size


The SVG path element has a d attribute which can contain the following commands:

M X Y move to (X, Y)
m DX DY move relative to current location
L X Y draw line to (X, Y)
l DX DY draw line to point defined relative to current location.
H X draw horizontal line to x-coordinate X.
h DX draw horizontal line of length DX.
V Y draw vertical line to y-coordinate Y.
v DY draw vertical line of length DY.
C X1 Y1 X2 Y2 X Y draw bezier curve to (X, Y) with control points at (X1, Y1) and (X2, Y2).
c X1 Y1 X2 Y2 DX DY Like C, except that the end point is defined relative to the current location.
A RX RY ROT F1 F2 X Y draw an arc along an ellipse with x-radius RX and y-radius RY. The orientation of the ellipse is rotated ROT degrees. The current location and the point (X Y) define the start and end of the arc. If F1 and F2 are both 0, the shorter distance along the ellipse is drawn. If F1 and F2 are both 1, the longer distance along the ellipse is drawn.
a RX RY ROT F1 F2 DX DY Like A, except that the end of the arc is defined relative to the current location.
Z draw line from current location to starting location
z draw line from current location to starting location


How to draw a straight line.

stroke width

How to set the stroke width for a path.

line cap

How the end of a line is terminated.

If the line cap is "circle" or "square", the geometric figure with the same diameter or side length as the stroke width is drawn, centered at the vertex where the line terminates.

The "none" and "square" options both give a squared-off end; in the later case the end extends beyond the vertex.

Line segments which meet at a corner are handled by the line join property described below.

dashed line

How to draw a dashed line.


How to draw a path consisting of joined line segments.

line join

How to specify the line join property.

The possibilities are "miter", "round", and bezel".

miter limit

When the line join property is "miter", the miter limit truncates joins when extend beyond the vertex the specified amount.

circular arc

How to draw a circular arc.

elliptic arc

How to draw an elliptic arc.

quadratic bezier

cubic bezier


outlined polygon

solid polygon

outlined rectangle

solid rectangle

solid rounded rectangle

solid circle

solid ellipse



rgb color

hsb color

named color

background color

stroke color

fill color



SVG text elements use the same font properties as are used in CSS.

  • font-family: Andale Mono | Arial | Arial Black | Comic Sans MS | Courier New | Georgia | Impact | Times New Roman | Trebuchet MS | Verdana
  • font-family: serif | sans-serif | cursive | monospace | fantasy
  • font-size:
  • font-weight: normal | bold | bolder | lighter
  • font-style: normal | italic | oblique
  • font-variant: normal | small-caps

The first list of fonts are "Core fonts for the Web" which Microsoft made publicly available from 1996 to 2002.

The second list of fonts are generic fonts. They define categories, and the user agent will select from an available font in the category.

Font size, if not specified, will be in pixels.

SVG provides a mechanism for telling the user agent where to download the font. It also has <font> and <glyph> tags for defining a font.


How to set select the font for text

built-in fonts

The fonts which are available.

generic fonts

font size

font weight

font style

How to specify the font style.

The standard font styles are "normal", "italic", and "oblique".

The "italic" and "oblique" styles are not always different. When they are different, the "italic" style is often specially designed by the font designer, whereas the "oblique" may have been given a slant by a simple linear transformation.


text path


Masks and Filters


PostScript Language Reference (pdf)


Scalable Vector Graphics (SVG) 1.1


Magic Vector Graphics

issue tracker | content of this page licensed under creative commons attribution-sharealike 3.0