2D Vector Graphics: PostScript, Processing, SVG

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

postscript processing svg
hello world % hello.ps:

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

size(400, 400);
background(255);
PFont f = createFont("Arial", 16, true);
fill(0);
textFont(f, 36);
text("Hello, World!", 10, 100);
<!-- hello.html: -->

<!DOCTYPE html>
<html>
  <body>
    <svg width="400" height="400">
      <text x="100" y="100">
        Hello, World!
      </text>
    </svg>
  </body>
</html>
comment % comment
% another comment
// comment
// another comment

/* comment
   another comment */
<!-- comment
     another comment -->
debug message
 
none println("DEBUG: height: " + height); none
coordinates
postscript processing svg
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 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
// move origin to (100, 200):
translate(100, 200);

// double x-scale and triple y-scale:
scale(2, 3);

// rotate coordinates 90 degrees
// clockwise:

rotate(PI/2);
<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
width
height

// set width and height:
size(400, 400)
<svg height="400px" width="400px"></svg>
paths
postscript processing svg
line newpath
15 25 moveto
70 90 lineto
stroke

% rlineto uses relative coordinates:
newpath
15 25 moveto
55 65 rlineto
stroke
// x1, y1, x2, y2:
line(15, 25, 70, 90);
<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"/>
stroke width 2 setlinewidth
newpath
15 25 moveto
70 90 lineto
stroke
strokeWeight(2);
line(15, 25, 70, 90);
<line x1="40" y1="20" x2="80" y2="20"
      style="stroke: black;"
      stroke-width="4"/>
line cap
none, circle, square
0 setlinecap
1 setlinecap
2 setlinecap
strokeCap(SQUARE);
strokeCap(ROUND);
strokeCap(PROJECT);
<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 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
line(10, 10, 20, 20);
line(20, 20, 30, 10);
line(30, 10, 40, 20);
<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
strokeJoin(MITER);
strokeJoin(ROUND);
strokeJoin(BEVEL);
<!-- 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 none <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
noFill();
// circular when 3rd and 4th args
// are the same:

arc(144, 144, 40, 40, HALF_PI, 3*HALF_PI)
<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
noFill();
arc(144, 144, 80, 40, HALF_PI, 3*HALF_PI);
<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. none <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
noFill();
bezier(144, 144, 288, 144, 288, 288, 144, 288);
<path d="M 144 144 C 288 144 288 288 144 288"
      stroke="black" fill="none"/>
shapes
postscript processing svg
outlined polygon % creates outline of triangle:
newpath
72 72 moveto
144 144 lineto
144 72 lineto
closepath
stroke
noFill();

triangle(72, 72, 144, 144, 144, 72);

// quadrilateral:
quad(10, 20, 250, 10, 260, 270, 30, 240);

// pentagon:
beginShape();
vertex(10, 10);
vertex(10, 50);
vertex(50, 80);
vertex(70, 60);
vertex(50, 10);
endShape();
<polygon points="72,72,72,144,144,144"
         stroke="black"
         fill="none"/>
solid polygon stroke(0);
fill(0);

triangle(72, 72, 144, 144, 144, 72);

// quadrilateral:
quad(10, 20, 250, 10, 260, 270, 30, 240);

// pentagon:
beginShape();
vertex(10, 10);
vertex(10, 50);
vertex(50, 80);
vertex(70, 60);
vertex(50, 10);
endShape();
<polygon points="72,72,72,144,144,144"/>
outlined rectangle % x y width height:
200 100 40 20 rectstroke
// x, y, width, height:
rect(200, 300, 12, 14);
<rect x="200" y="300"
      height="12" width="14"/>
solid rectangle % solid:
200 100 40 20 rectfill
// x, y, width, height:
rect(200, 300, 12, 14);
<rect x="200" y="300"
      height="12" width="14"/>
solid rounded rectangle none rect(200, 200, 150, 120, 20); <rect x="200" y="200"
      height="150" width="120"
      rx="20" ry="20"/>
solid circle newpath
144 144 40 0 360 arc
stroke
// first two args are x and y
// set last two args to radius:

ellipse(50, 50, 80, 80);
<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
// x, y, rx, ry:
ellipse(100, 100, 80, 120);
<ellipse cx="300" cy="100"
         rx="30" ry="50"
         fill="red"/>
color
postscript processing svg
grayscale
black, white, gray
0 setgray
1 setgray
0.5 setgray
fill(0);
fill(255);
fill(127);
<!-- 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
// this is the default:
colorMode(RGB, 256);

color red = color(255, 0, 0);
color green = color(0, 255, 0);
color blue = color(0, 0, 255);

// another way to make red:
color red = #FF0000;

// set fill color to red:
fill(red);
<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 // with scale from 0 to 99:
colorMode(HSB, 100);
<rect x="200" y="300"
      height="50" width="80"
      style="fill:hsl(0, 100%, 50%)"/>
named color none 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
color pink = color(255, 191, 191);
background(pink);
<svg width="400" height="400"
     style="background-color: pink">
  <!-- more elements here -->
</svg>
stroke color stroke and fill color are the same color red = color(255, 0, 0);
stroke(red);
noStroke()
<rect x="200" y="300"
      height="50" width="80"
      stroke="#F00" fill="none"/>
fill color stroke and fill color are the same fill(red);
noFill();
<rect x="200" y="300"
      height="50" width="80"
      fill="#F00"/>
opacity no support for transparency stroke(256, 0, 0, 127);
fill(256, 0, 0, 127);
rect(80, 180, 120, 140);

stroke(0, 0, 256, 127);
fill(0, 0, 256, 127);
rect(100, 200, 120, 140);
<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 processing svg
font /Helvetica 20 selectfont
72 72 moveto (lorem ipsum) show
PFont f = createFont("Arial", 20);
textFont(f);
text("lorem ipsum", 10, 100);
<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
// Has access to system fonts;
// how to see what is available:

println(PFont.list());
Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
generic fonts none none serif
sans-serif
cursive
monospace
fantasy
font size /Helvetica 20 selectfont
72 72 moveto (lorem ipsum) show
// 2nd arg is font size:
PFont f = createFont("Arial", 16);
// optional 2nd arg overrides value provided to createFont:
textFont(f, 20);
text("lorem ipsum", 10, 100);
<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
// must be separate font for weight:
PFont f = createFont("HelveticaNeue-Bold", 32);
textFont(f);
text("lorem ipsum", 10, 100);
<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
// must be separate font for style:
PFont f = createFont("GillSans-Italic", 32);
textFont(f);
text("lorem ipsum", 10, 100);
<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.
Strings are Java strings. Backslash escape sequences of the form \u03bb can be used to specify a character by Unicode point.

The source code is UTF-8 encoded. Make sure that the font used for the source code supports the desired characters. Go to


  Preferences | Editor and Console font:

to change the source code font.
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 processing svg
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 processing svg
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 processing svg
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

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)

Processing

Processing

SVG

Scalable Vector Graphics (SVG) 1.1

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