SVG graphics

Good hand-made SVG is built from a grid and simple shapes, with few colors and consistent strokes.

1. Set up the canvas

• Always a viewBox; let CSS control the size. Icons: viewBox="0 0 24 24". Logos/illustrations:
  a round number such as 0 0 200 200 or 0 0 1200 600. Draw within the box with 1–2 units of padding.
• xmlns="http://www.w3.org/2000/svg" is required in files; optional inline in HTML.
• Coordinates on whole or half numbers; keep the design on a grid (2 or 4 units).

2. Construct from primitives

Prefer rect, circle, ellipse, line, polyline, polygon before free paths. Path commands:
M move, L line, H/V horizontal/vertical, C cubic curve, Q quadratic, A arc, Z close
(lowercase = relative). Compose a logo from 2–4 geometric shapes, aligned to the grid, with consistent
radii and stroke widths. Use <g transform="translate(...) rotate(...)"> to position groups.

3. Icons: stroke style (Lucide-compatible)

<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <rect x="3" y="5" width="18" height="16" rx="2"/>
  <path d="M3 10h18M8 3v4M16 3v4"/>
</svg>

• currentColor so the icon takes the text color. Same stroke width (1.5 or 2) across the whole set.
• Optical size: the main shape fills about 18–20 of 24 units.
• Stroke vs fill: stroke icons for UI (light, consistent); filled for small sizes (12–16px), active
  states and logos. Do not mix styles in one set.

4. Logos

• Mark + wordmark. Mark must work at 16px (favicon) and in one color. Test it as a solid silhouette.
• For text in a logo, use a web font in HTML next to the SVG mark, or convert to paths in a design tool;
  SVG <text> depends on installed fonts.
• Provide variants: color, one-color (currentColor), and a square favicon (favicon.svg).

5. Gradients, patterns, filters

<svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#0f172a"/><stop offset="1" stop-color="#1e3a8a"/>
    </linearGradient>
    <pattern id="dots" width="24" height="24" patternUnits="userSpaceOnUse">
      <circle cx="2" cy="2" r="1.5" fill="#ffffff" fill-opacity=".12"/>
    </pattern>
    <radialGradient id="glow"><stop offset="0" stop-color="#60a5fa" stop-opacity=".6"/><stop offset="1" stop-color="#60a5fa" stop-opacity="0"/></radialGradient>
  </defs>
  <rect width="1200" height="600" fill="url(#bg)"/>
  <rect width="1200" height="600" fill="url(#dots)"/>
  <circle cx="900" cy="150" r="320" fill="url(#glow)"/>
  <path d="M0 520 C 300 460, 600 600, 1200 500 V600 H0 Z" fill="#ffffff"/>
</svg>

• Ids must be unique per page; prefix them (hero-bg) when several inline SVGs exist.
• Filters (feGaussianBlur, feTurbulence for grain) are expensive on large areas; use sparingly.
• Section dividers: a single wave path with preserveAspectRatio="none" stretched to full width.

6. Inline vs file

• Inline <svg> when it needs CSS styling, currentColor, or animation.
• <img src="logo.svg" alt="Acme"> for static images (cacheable, no id clashes).
• CSS background: url("data:image/svg+xml,...") (URL-encode # as %23) for small patterns.
• Accessibility: decorative aria-hidden="true"; meaningful inline SVG gets role="img" and <title>.

7. Optimize

npx svgo input.svg -o output.svg removes metadata and editor junk. Keep precision to 1–2 decimals,
remove empty groups and unused defs. A hand-made icon should be under 1KB.

8. Animate with CSS

.spin{animation:spin 1s linear infinite;transform-origin:center;transform-box:fill-box}
@keyframes spin{to{transform:rotate(360deg)}}
.draw path{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 1.2s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.spin,.draw path{animation:none;stroke-dashoffset:0}}

Add pathLength="100" to a path so dasharray 100 equals its full length. Animate transform and
opacity; set transform-box: fill-box so rotation centers on the shape.

Check before you finish

1. Open the page (open_preview / run_app) and inspect_preview: renders crisp at small (16–24px) and large sizes.
2. Icons recolor with color; logo legible at favicon size and in one color.
3. No duplicate ids across inline SVGs; no console errors.
4. File sizes reasonable after svgo.

Common mistakes

• Missing viewBox (cannot scale) or hard-coded width/height fighting CSS.
• Off-grid coordinates with many decimals giving blurry edges.
• Mixed stroke widths and corner styles in one icon set.
• Relying on <text> with fonts the viewer does not have.