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>
<html>
  <body>
    <svg width="400" height="400">
      <text x="100" y="100">
        Hello, World!
      </text>
    </svg>
  </body>
</html>
$ convert -size 400x400 xc:transparent \
  -draw "text 100,100 'Hello, World!'" hello.png
comment % comment
% another comment
<!-- comment
     another comment-->
coordinates
postscript svg imagemagick
origin
 
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>

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

</g>

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

</g>
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
paths
postscript svg mvg
line newpath
15 25 moveto
70 90 lineto
stroke

% rlineto uses relative coordinates:
newpath
15 25 moveto
55 65 rlineto
stroke
<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" \
  line.png

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

convert -size 400x400 xc:transparent \
  -stroke black -draw "path 'M 40,20 l 40,0'" \
  line.png
stroke width 2 setlinewidth
newpath
15 25 moveto
70 90 lineto
stroke
<line x1="40" y1="20" x2="80" y2="20"
      style="stroke: black;"
      stroke-width="4"/>
convert -size 400x400 xc:transparent \
  -stroke black -strokewidth 4 -draw "line 40,20 80,20" \
  line.png
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
stroke
<polyline points="10,10,20,20,30,10,40,20"
          stroke="black"
          fill="none"/>

<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"
          stroke-linejoin="miter"
          stroke="black"
          fill="none"/>
miter limit 1 setmiterlimit <polyline points="10,10,20,20,30,10,40,20"
          stroke-miterlimit=1
          stroke="black"
          fill="none"/>
circular arc % creates half-circular arc centered at
% (144,144) with radius 40:

newpath
144 144 40 90 270 arc
stroke
<path d="M 144 104 A 40 40 0 1 1 144 184"
      stroke="black" fill="none"/>
elliptic arc gsave
2 1 scale
newpath
144 144 40 90 270 arc
stroke
grestore
<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):

newpath
144 144 moveto
288 144 288 288 144 288 curveto
stroke
<path d="M 144 144 C 288 144 288 288 144 288"
      stroke="black" fill="none"/>
shapes
postscript svg mvg
outlined polygon % creates outline of triangle:
newpath
72 72 moveto
144 144 lineto
144 72 lineto
closepath
stroke
<polygon points="72,72,72,144,144,144"
         stroke="black"
         fill="none"/>
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
stroke
<circle cx="300" cy="200"
        r="35" fill="green"/>
solid ellipse gsave
1 1.6666 scale
newpath
144 144 40 0 360 arc
stroke
grestore
<ellipse cx="300" cy="100"
         rx="30" ry="50"
         fill="red"/>
color
postscript svg mvg
grayscale
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 -->
</svg>
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"
      fill="#F00"/>
opacity no support for transparency <rect x="80" y="180"
      height="120" width="140" fill="red"
      fill-opacity="0.5"/>
<rect x="100" y="200"
      height="120" width="140" fill="blue"
      fill-opacity="0.5"/>
text
postscript svg mvg
font /Helvetica 20 selectfont
72 72 moveto (lorem ipsum) show
<text x="100" y="100" font-family="Arial">
  lorem ipsum
</text>
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
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
$ convert -list font
generic fonts none serif
sans-serif
cursive
monospace
fantasy
font size /Helvetica 20 selectfont
72 72 moveto (lorem ipsum) show
<text x="100" y="100" font-size="20">
  lorem ipsum
</text>
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
</text>
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
</text>
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" />
</defs>

<text font-family="Helvetica" font-size="40">
  <textPath xlink:href="#sine_path">
    This text is printed along a sine wave path.
  </textPath>
</text>
groups
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"/>
</g>
definition <defs>
  <linearGradient id="Gradient01">
    <stop offset="20%" stop-color="#39F"/>
    <stop offset="90%" stop-color="#F3F"/>
  </linearGradient>
</defs>
masks and filters
postscript svg mvg
clip path <defs>
  <clipPath id="clip">
    <rect x="0" y="0" width="200" height="100" />
  </clipPath>
</defs>

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

<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"/>
  </radialGradient>
</defs>

<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"/>
__________________________________________________________________ __________________________________________________________________ __________________________________________________________________

General

hello world

A complete program which renders "Hello, World!"

comment

The syntax for a comment.

debug message

How to print a debug message.

Coordinates

origin

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

Paths

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.
S
s
Q
q
T
t
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

line

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.

polyline

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

Shapes

outlined polygon

solid polygon

outlined rectangle

solid rectangle

solid rounded rectangle

solid circle

solid ellipse

Color

grayscale

rgb color

hsb color

named color

background color

stroke color

fill color

opacity

Text

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.

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.

utf-8

text path

Groups

Masks and Filters

PostScript

PostScript Language Reference (pdf)

SVG

Scalable Vector Graphics (SVG) 1.1

ImageMagick

Magic Vector Graphics

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