Most SVG editing stops at moving paths around in a GUI. The format itself has a set of features that solve real layout and performance problems, and almost nobody reaches for them. These are the ones worth learning.
Replace every fill="#333" in an icon with fill="currentColor" and the icon inherits the CSS color of whatever contains it. Hover states, dark mode and disabled states all work with no extra SVG variants. This one substitution eliminates the majority of duplicate icon files in a typical codebase.
Scale an SVG up and the strokes scale with it, which ruins hairline borders and diagram outlines. vector-effect="non-scaling-stroke" on a path keeps the stroke at a constant screen width no matter how the element is transformed. Essential for maps, charts and any zoomable diagram.
Line-draw animations use stroke-dasharray and stroke-dashoffset, which normally means measuring the path in JavaScript with getTotalLength(). Set pathLength="100" on the path and the browser rescales the dash units for you — now stroke-dasharray: 100 and stroke-dashoffset: 100 animate from empty to full on any path, no measurement code at all.
Wrap each icon in <symbol id="icon-x" viewBox="0 0 24 24"> inside one hidden SVG, then reference it anywhere with <svg><use href="#icon-x"/></svg>. One HTTP request, one parse, and each instance still styleable via currentColor. The catch worth knowing: use across documents needs the sprite inlined or same-origin, and shadow-DOM styling only reaches use content through inherited properties.
preserveAspectRatio="xMidYMid slice" makes an SVG behave like object-fit: cover — it fills the box and crops the overflow, anchored where you tell it. Change the alignment keyword to xMinYMin and it anchors top-left. Combined with a viewBox that is deliberately smaller than the artwork, this gives you responsive crops with no JavaScript and no media queries.
<textPath href="#curve"> flows live, selectable, accessible text along an arbitrary path. <clipPath> with clipPathUnits="objectBoundingBox" gives you a clip shape defined in 0-1 coordinates that scales with the element it clips — the reliable way to build non-rectangular section dividers.
Run svgo --multipass icon.svg -o icon.min.svg, but disable cleanupIds if you are using sprites or referencing IDs from CSS, and disable removeViewBox always — without a viewBox the SVG cannot scale. For inline data URIs, do not base64-encode; URL-encode instead and escape # as %23, which produces smaller output and stays readable in the stylesheet.
A decorative SVG needs aria-hidden="true" and focusable="false" (older Edge made SVGs focusable by default). A meaningful one needs role="img" and a <title> as the first child, referenced by aria-labelledby. Two attributes, and screen readers stop announcing your icon font as gibberish.