---
name: svg-engineering
description: Build editable, responsive and accessible SVG graphics and vector exports. Use for diagrams, illustrations, icons, SVG animation or SVG-owned chart layers.
---

# SVG engineering

Choose SVG when semantic groups, labels, crisp vector export, DOM events or manual editability matter. Define `viewBox`, stable IDs, title/description and keyboard behavior. Keep data separate from geometry. Render at mobile and desktop sizes, inspect clipping and text, then audit. Optimize with SVGO only after confirming semantics and IDs survive. Use `fixtures/svg-motion` as a runnable example and `schemas/visual-contract.schema.json` for the contract. Route dense rapidly updated marks to Canvas or WebGL.