Table of contents
svg
create SVG container
<svg viewbox="0 0 1920 1080" width="1920" height="1080">
...
</svg>
text
write text
<text x="100" y="100" font-size="40" font-family="Verdana" fill="white">hello</text>
monospace font (width:height = 3:5)
<text x="100" y="100" font-size="40" font-family="courier" fill="white">hello</text>
shapes
line
draw a line
<line x1="0" y1="80" x2="100" y2="20" stroke="black" />
change the thickness
<line x1="0" y1="80" x2="100" y2="20" stroke="black" stroke-width="3"/>
draw a dashed line
<line x1="0" y1="80" x2="100" y2="20" stroke="black" stroke-dasharray="2 2" />
draw a dashed line (wider gaps)
<line x1="0" y1="80" x2="100" y2="20" stroke="black" stroke-dasharray="2 5" />
circle
draw a circle
<circle cx="200" cy="200" r="100" stroke="black" fill="none" />
<circle cx="200" cy="200" r="100" stroke="black" fill="none" stroke-width="8" />
fill circle
<circle cx="200" cy="200" r="100" stroke="black" fill="red" />
ellipse
draw an ellipse
<ellipse cx="200" cy="200" rx="100" ry="50" stroke="black" fill="none" />
fill ellipe
<ellipse cx="200" cy="200" rx="100" ry="50" stroke="none" fill="red" />
rectangle
draw a rectangle
<rect x="100" y="100" width="100" height="100" stroke="black" fill="none" />
<rect x="100" y="100" width="100" height="100" stroke="yellow" fill="none" stroke-width="8" />
fill rectangle
<rect x="100" y="100" width="100" height="100" stroke="black" fill="red" />
rounded rectangle
<rect x="100" y="100" rx="10" ry="10" width="100" height="100" stroke="black" fill="none" />
polygon
draw a filled polygon
<polygon points="10,10 90,10 10,90 90,90"/>
paths
move to 10,10
M10 10 absolute coordinates
m10 10 relative coordinates
close path
Z
draw line
H20 horizontal[x] absolute
h20 horizontal[x] relative
V20 vertical[y] absolute
v20 vertical[y] relative
L20 20 line[x,y] absolute
l20 20 line[x,y] relative
bezier curve
Q x1 y1, x y angle, line end (absolute)
q x1 y1, x y angle, line end (relative)
C x1 y1, x2 y2, x y angle1, angle2, line end (absolute)
c dx1 dy1, dx2 dy2, dx dy angle1, angle2, line end (relative)
arc
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
rx = ellipse radius in x-direction
ry = ellipse radius in y-direction
x-axis-rotation = typically 0; rotate ellipse relative to current coordinate system
large-arc-flag = choose the larger of the two possible arcs (> 180°)
sweep-flag = draw in negative (0) direction or positive(1) direction
x,y,dx,dy = define end point of arc
example: drawing a triangle
<path d="M10 20 H20 L15 10 Z" stroke="black" fill="transparent" />
example: drawing a bezier curve
<path d="M10 10 Q15 0 20 10" stroke="black" fill="transparent" />
example: drawing a half circle around 100,100
<path d="M50 100 a-50 50 0 0 0 100 0" fill="none">
arc generator
https://sean.brunnock.com/SVG/ArcGenerator/
documentation arcs
http://apex.infogridpacific.com/SVG/svg-tutorial-lesson17-path-arcs.html
gradients
horizontal gradient
<defs>
<linearGradient id="bg">
<stop offset="0%" stop-color="green" />
<stop offset="100%" stop-color="darkgreen" />
</linearGradient>
</defs>
<rect x="0" y="0" width="1920" height="1080" stroke="none" fill="url(#bg)" />
vertical gradient
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="black" />
<stop offset="100%" stop-color="green" />
</linearGradient>
</defs>
<rect x="0" y="0" width="1000" height="1000" stroke="none" fill="url(#bg)" />
transform
applying transformations to svg objects
<text style="transform: translateX(25px) translateY(120px) rotate(270deg)" font-size="14" font-family="Verdana">pressure</text>
some of the available transformations
rotate(90deg)
rotate(0.75turn)
translateX(100px)
translateY(100px)
scale(2, 0.5)
skew(30deg, 20deg)
skewX(30deg)
skewY(1.07rad)
independent transforms
rotate: 10deg;
scale: 0.95;
translate: 10px 10px;
independent transforms are applied before the offset properties take place
<text style="translate:10px 120px; transform: rotate(270deg);">translate then rotate</text>
set the origin for applied transformations
transform-origin: center;
transform-origin: top left;
transform-origin: 100px 100 px;
documentation
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
https://www.danielcwilson.com/blog/2020/02/motion-path-transforms/
examples
example: chemical calculation with division lines
<svg viewbox="0 0 800 600" width="800" height="600">
<text x="2" y="20" font-size="14" font-family="courier" fill="white">0.0012m³ x</text>
<text x="100" y="13" font-size="14" font-family="courier" fill="white">1dm³</text>
<line x1="100" y1="16" x2="156" y2="16" stroke="white" />
<text x="100" y="27" font-size="14" font-family="courier" fill="white">0.001m³</text>
<text x="165" y="20" font-size="14" font-family="courier" fill="white">x</text>
<text x="180" y="13" font-size="14" font-family="courier" fill="white">1L</text>
<line x1="180" y1="16" x2="212" y2="16" stroke="white" />
<text x="180" y="27" font-size="14" font-family="courier" fill="white">1dm³</text>
<text x="220" y="20" font-size="14" font-family="courier" fill="white">= 1.2L</text>
</svg>
documentation
https://developer.mozilla.org/en-US/docs/Web/SVG