SVG
SVG in HTML
<svg width="30%" viewBox="0 0 300 200" preserveAspectRatio="xMidYMid meet">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
viewBox=“min-x min-y width height”
The bounds given to viewBox are not the same as the displayed image size, which needs to be set with width and/or height.
preserveAspectRatio="<align> [<meetOrSlice>]"
Basic Shapes
Text
Paths
<svg width="325" height="325">
<path d="M 80 80
A 45 45, 0, 0, 0, 125 125
L 125 80 Z" fill="green"/>
<path d="M 230 80
A 45 45, 0, 1, 0, 275 125
L 275 80 Z" fill="red"/>
<path d="M 80 230
A 45 45, 0, 0, 1, 125 275
L 125 230 Z" fill="purple"/>
<path d="M 230 230
A 45 45, 0, 1, 1, 275 275
L 275 230 Z" fill="blue"/>
</svg>
- M x y
- Move to x y
- L x y
- Line to x y from current position
- H x
- Horizontal line to x
- V y
- Vertical line to y
- Z
- Close shape by drawing line to start
- C x1 y1, x2 y2, x y
- Bézier Curve
- S x2 y2, x y
- Added Bézier Curve (x1 y1 is previous x y)
- Q x1 y1, x y
- Quadratic Bézier Curve
- T x y
- Added Quadratic Bézier Curve
- A rx ry x-axis-rotation large-arc-flag sweep-flag x y
- Arc