SVG
SVG is markup for images, and it has no layout algorithm: every element sits where its own coordinates put it, in a user coordinate system that the root's viewBox, width, height and preserveAspectRatio map onto the screen, and later elements paint over earlier ones. Most surprises come from that mapping (transforms measured from the viewBox origin, units that resolve against the bounding box), from the line between attributes and CSS properties (which decides what CSS can style and animate), and from how the SVG is embedded (inline is part of the page DOM; an image runs no scripts and loads nothing external). Durations, curves and springs for interface motion are in ui-animation SKILL.md; SVG in code-made videos (glass, illustration, logos drawn from t) is in seek-engine SKILL.md.
Apply only the routes and checks for the selected job. Read a linked skill's named file from its installed folder when available, or from the linked source. Report an unavailable required reference instead of inventing it. [skill-authoring, DISTRIBUTION.md#composing-skills]
| The job | Read |
|---|---|
The root <svg>, xmlns, no layout, the coordinate system, viewBox, width/height, preserveAspectRatio, nested svg, painting order, a print sheet in millimeters and its PNG size |
BASICS.md |
Basic shapes, text, tspan, textPath, multi-line text, fill and stroke, line caps and joins, dashes, non-scaling-stroke, fill-rule, paint-order |
SHAPES-AND-TEXT.md |
Path data: the 20 commands, Béziers, arcs, compaction, parse errors, animating d, pathLength, a smoothed-corner (squircle) path generator |
PATHS.md |
g, defs, symbol, use, href vs xlink:href, the transform attribute and functions, transform-origin and transform-box |
REUSE-AND-TRANSFORMS.md |
Presentation attributes and the cascade, geometry properties in CSS, currentColor, custom properties through <use> |
STYLING.md |
Linear and radial gradients, stops, spreadMethod, gradient units, patterns |
GRADIENTS-AND-PATTERNS.md |
clipPath, mask, luminance vs alpha, units, CSS clip-path, mask-image and mask-mode on HTML |
CLIP-AND-MASK.md |
Filter regions, wiring primitives, every fe* primitive, feColorMatrix, worked shadows, the goo filter, glass refraction with feDisplacementMap and its Safari limits, CSS filter: url() |
FILTERS.md |
CSS transitions and keyframes on SVG, transform-box: fill-box, line drawing with dashes, techniques from transitions.dev (transitioned checks, chevron flips, one-axis blur, flowing dotted lines), morphing d with path(), acceleration |
CSS-ANIMATION.md |
SMIL: animate, set, animateTransform, animateMotion, pacing, timing and chaining, JavaScript control, support and whether to use it |
SMIL.md |
Namespace-aware DOM creation, WAAPI, requestAnimationFrame, path length and points, React and SVGR, Motion, Next.js setup, reduced motion and WCAG pause rules |
JS-AND-REACT.md |
| Three-line icons that morph into any other: collapsed lines, rotation groups, the icon table, the transition algorithm, the starter prompt | MORPHING-ICONS.md |
Inline vs <img> vs CSS vs <object>, image-mode restrictions, namespaces, data URIs, sprites with symbol and use, fragment views, currentColor icons, icons beside text (stroke by weight, size, outline and fill), a static SVG favicon, foreignObject, markers |
EMBEDDING-AND-ICONS.md |
Informative vs decorative SVG, role="img", title and desc, icon buttons, links, tooling that strips names |
ACCESSIBILITY.md |
| SVGO presets and risky plugins, SVGR's defaults, rendering cost, where scripts hide, serving headers, user uploads, DOMPurify | OPTIMIZING-AND-SECURITY.md |
The rules
- Give every reusable graphic a
viewBox, with positive width and height, and keep it through the build: check what your SVGO or SVGR config does withremoveViewBox(OPTIMIZING-AND-SECURITY.md). - Choose the embedding by the job: inline when page script or CSS must reach inside or animate it; an external image (
<img>, CSSurl()) when it is only displayed and cached, withxmlns="http://www.w3.org/2000/svg"on its root and nothing that needs script or external resources. - Every SVG is informative or decorative. Informative inline SVG gets
role="img"and a name (<title>first,aria-labelledbyoraria-label;alton<img>); decorative SVG getsaria-hidden="true"and no name anywhere inside. - Style with CSS and draw icons in
currentColor. Presentation attributes have specificity 0, so any CSS rule wins, and SVG 2 suggests style properties over presentation attributes;fill="currentColor"andstroke="currentColor"make an icon follow the text color. - Transforms start at the viewBox origin. To rotate or scale an element about its own center, set
transform-box: fill-boxwithtransform-origin: center, or give an explicit origin. - Animate with the engine that can reach the value. CSS and WAAPI only reach CSS properties, and
transformandopacitythrough them run off the main thread;viewBox,points, line endpoints and filter attributes need SMIL or a library such as Motion. CSSdhas no effect in Safari, and any morph needs the same structure on both ends. With reduced motion, tone animations down, and give anything autoplaying over five seconds a pause. - Size the filter region to the effect (pixels outside it are clipped) and keep blur off large elements that scroll or animate.
- Treat SVG you didn't write as active content: sanitize it (DOMPurify with the
svgprofile), validate the file type yourself, and serve uploads with a CSP that blocks scripts andContent-Disposition: attachment.
Prove it
Every reusable SVG scales to its container without clipping after SVGO or SVGR; every external one renders when opened directly; a screen reader announces each informative SVG once by its name and skips decorative ones; icons recolor when the parent's color changes; rotated parts spin in place; each animation runs in Chrome, Firefox and Safari and tones down under reduced motion; no filter edge is clipped; a test upload with <script>, onload and a javascript: link comes out clean; and every file's own Prove it checks pass for the parts you touched.