2D Vector Graphics: PostScript, SVG, ImageMagick

	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 Q₀, Q₁, and Q₂, the equivalent cubic bezier has control points C₀ = Q₀, C₁ = Q₀ + 2Q₁, C₂ = 2Q₁ + Q₂, and C₃ = Q₂.	<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!"

Coordinates

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.

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 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.

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.

Shapes

Color

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 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.