SVG Reference - Introduction to Web Technologies

Basic Shapes

SVG provides six built-in shape elements. All accept presentation attributes such as fill and stroke.

Element	Key attributes	Minimal example
`<rect>`	`x`, `y`, `width`, `height`, `rx`, `ry`	`<rect x="10" y="10" width="80" height="50" rx="6"/>`
`<circle>`	`cx`, `cy`, `r`	`<circle cx="50" cy="50" r="40"/>`
`<ellipse>`	`cx`, `cy`, `rx`, `ry`	`<ellipse cx="50" cy="50" rx="60" ry="30"/>`
`<line>`	`x1`, `y1`, `x2`, `y2`, `stroke`	`<line x1="0" y1="0" x2="100" y2="100" stroke="#333"/>`
`<polyline>`	`points`, `fill="none"`	`<polyline points="0,50 25,10 75,90 100,50" fill="none"/>`
`<polygon>`	`points` (auto-closed)	`<polygon points="50,5 95,80 5,80"/>`

See tutorial: Basic shapes

Path Commands

Uppercase commands use absolute coordinates; lowercase use relative coordinates (offset from the current point).

Command	Name	Meaning / parameters
`M / m`	Move to	Lift pen and move to `x,y`. Does not draw.
`L / l`	Line to	Draw a straight line to `x,y`.
`H / h`	Horizontal line	Draw a horizontal line to absolute/relative `x`.
`V / v`	Vertical line	Draw a vertical line to absolute/relative `y`.
`C / c`	Cubic Bézier	Curve to `x,y` using control points `x1,y1` and `x2,y2`.
`S / s`	Smooth cubic	Smooth cubic Bézier; first control point is reflected from previous `C/S`.
`Q / q`	Quadratic Bézier	Curve to `x,y` with single control point `x1,y1`.
`T / t`	Smooth quadratic	Smooth quadratic; control point reflected from previous `Q/T`.
`A / a`	Arc	`rx ry x-rotation large-arc-flag sweep-flag x,y` — elliptical arc to endpoint.
`Z`	Close path	Draw a straight line back to the path's start point.

See tutorial: Paths

Presentation & Styling Attributes

These attributes (or equivalent CSS properties) control the visual appearance of any SVG element.

fill: Interior color. Any CSS color value or url(#id) to reference a gradient/pattern. Use none for no fill.
fill-opacity: Opacity of the fill, 0–1.
stroke: Outline color. Requires a value other than none for the stroke to be visible.
stroke-width: Width of the stroke in user units (default: 1).
stroke-linecap: End style of open paths: butt (default), round, square.
stroke-linejoin: Corner style: miter (default), round, bevel.
stroke-dasharray: Dash pattern — a list of dash and gap lengths, e.g. 5 3 or 10 5 2 5.
opacity: Overall element opacity (fill + stroke), 0–1.
transform: Geometric transform: translate(), rotate(), scale(), etc. (see Transforms section).

See tutorial: Styling SVG with CSS

Transforms

Apply to any element via the transform attribute or the CSS transform property. Multiple transforms can be chained: transform="translate(50,50) rotate(45)".

Function	Parameters	Effect
`translate(tx, ty)`	`tx`, optional `ty` (default 0)	Moves the element by `tx` horizontally and `ty` vertically.
`rotate(deg [cx cy])`	Angle in degrees; optional center `cx,cy`	Rotates around the given point (or origin if omitted).
`scale(sx [, sy])`	`sx`; optional `sy` (defaults to `sx`)	Scales element. Uniform if one value; non-uniform if two.
`skewX(deg)`	Angle in degrees	Shears along the X axis.
`skewY(deg)`	Angle in degrees	Shears along the Y axis.

See tutorial: Groups & transforms

Gradients & Patterns

Define gradient and pattern elements inside <defs>, then reference them by ID using fill="url(#id)".

Linear gradient

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%"   stop-color="#d6452c"/>
    <stop offset="100%" stop-color="#e07b00"/>
  </linearGradient>
</defs>
<rect fill="url(#grad1)" width="200" height="80"/>

Radial gradient

<defs>
  <radialGradient id="grad2" cx="50%" cy="50%" r="50%">
    <stop offset="0%"   stop-color="#1f8a4c"/>
    <stop offset="100%" stop-color="#0f766e"/>
  </radialGradient>
</defs>
<circle fill="url(#grad2)" cx="50" cy="50" r="45"/>

Pattern

<defs>
  <pattern id="dots" patternUnits="userSpaceOnUse" width="20" height="20">
    <circle cx="5" cy="5" r="3" fill="#555"/>
  </pattern>
</defs>
<rect fill="url(#dots)" width="200" height="200"/>

patternUnits: userSpaceOnUse — pattern dimensions in the user coordinate system. objectBoundingBox — dimensions relative to the element's bounding box (0–1).
gradientUnits: Same two options as patternUnits; controls how x1/y1/x2/y2 (linear) or cx/cy/r (radial) are interpreted.

See tutorial: Gradients & patterns

viewBox & Responsive SVG

The viewBox attribute defines the internal coordinate system. Omit fixed width/height on the <svg> element and let CSS control the display size to get resolution-independent scaling.

Attribute / value	Meaning
`viewBox="minX minY width height"`	Sets up a coordinate grid. `viewBox="0 0 100 100"` means the viewport maps to a 100×100 unit space.
`preserveAspectRatio="xMidYMid meet"`	Scales uniformly; letterboxes if aspect ratios differ. Default value.
`preserveAspectRatio="xMidYMid slice"`	Scales uniformly to cover; crops the overflow.
`preserveAspectRatio="none"`	Stretches to fill; does not maintain aspect ratio.

Make an SVG fluid with CSS:

svg {
  width: 100%;
  height: auto;   /* preserves intrinsic ratio from viewBox */
}

See tutorial: viewBox & coordinate system

Scripting SVG with JavaScript

SVG elements live in the SVG namespace, so you must use createElementNS rather than createElement when creating them dynamically.

// SVG namespace URI — required for all SVG elements
const SVG_NS = 'http://www.w3.org/2000/svg';

// Create an <svg> container
const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('viewBox', '0 0 100 100');

// Create a <circle> inside it
const circle = document.createElementNS(SVG_NS, 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r',  '40');
circle.setAttribute('fill', '#1f8a4c');

svg.appendChild(circle);
document.body.appendChild(svg);

Key points: always pass the namespace URI as the first argument to createElementNS. Use setAttribute to set SVG attributes — do not use element.style for presentation attributes unless you intend CSS specificity to apply.

See tutorial: Scripting SVG with JavaScript

Common Patterns

Ready-to-copy snippets for frequently needed shapes.

Centered circle: <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#1f8a4c"/></svg>
Triangle: <polygon points="50,10 90,90 10,90" fill="#d6452c"/> — an equilateral-ish triangle pointing up.
5-point star: <path d="M50,10 L62,40 L92,40 L68,58 L80,90 L50,70 L20,90 L32,58 L8,40 L38,40 Z" fill="#e07b00"/>
Rounded rectangle: <rect x="10" y="10" width="80" height="60" rx="10" ry="10" fill="#0f766e"/> — rx/ry set corner radius.
Dashed stroke: <line x1="10" y1="50" x2="90" y2="50" stroke="#333" stroke-width="2" stroke-dasharray="6 3"/>
Inline SVG icon pattern: <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">…</svg> — use aria-hidden for decorative icons; add <title> for meaningful ones.

See tutorial: Reuse: defs, use, symbol & markers · Accessibility