SVG is XML, which means you can open it in a text editor and fix most problems in a minute without launching a design tool. Knowing five things covers the majority of real edits.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">viewBox takes min-x, min-y, width and height in user units and defines the coordinate system the shapes are drawn in. Keep it and delete the fixed width and height attributes; the element then scales to whatever CSS you apply. This single change turns a rigid exported file into a responsive one. If an SVG refuses to scale, a missing viewBox is the reason nine times out of ten — and note that SVGO can strip it if removeViewBox is left enabled, which is the most common way people break their own icons.
preserveAspectRatio controls what happens when the container's aspect ratio differs. The default xMidYMid meet fits and centres; slice fills and crops, like object-fit: cover; none stretches.
The d attribute is a sequence of commands. Uppercase is absolute, lowercase is relative to the current point.
M x y move to, L x y line to, H x and V y horizontal and vertical linesC x1 y1 x2 y2 x y cubic Bézier with two control points; S is the smooth continuationQ and T are the quadratic equivalentsA rx ry rot large-arc sweep x y elliptical arc — the two flags are the ones that flip an arc to the wrong sideZ closes the subpathYou will not author complex paths by hand, but you will frequently nudge a coordinate, and knowing which numbers are control points versus endpoints is enough for that.
Exported icons carry hard-coded fill="#000000" on every shape. Replace it with fill="currentColor", or delete the attribute and set fill in CSS. The icon then follows the surrounding text colour, dark mode and hover states with no extra work. For multi-colour icons, expose the parts as CSS custom properties: fill="var(--icon-accent, #ff5f1f)".
npx svgo --multipass -f ./icons -o ./icons-min
npx svgo input.svg -o output.svg --pretty # readable output while debuggingDefault settings typically remove 20–50 percent by stripping editor metadata, comments, empty groups, default attribute values and excess decimal precision. Three configuration points matter: disable removeViewBox, disable cleanupIds if you reference IDs from a sprite or from CSS, and be careful with convertPathData precision on very small icons where rounding is visible. Put an svgo.config.js in the repository so everyone gets the same output.
Inkscape is the capable free editor and writes standards-compliant SVG; use "Save as Plain SVG" rather than "Inkscape SVG" to drop its private namespace. Figma and Illustrator export usable SVG but add wrapper groups, clip paths and IDs that SVGO should clean up afterward. SVGOMG is the browser front end for SVGO with a live preview, which is the fastest way to see what each optimisation does to your file. For path editing specifically, a browser-based path editor beats a full design tool because you can see the command list and the curve at the same time.
Decorative icon beside a text label: aria-hidden="true" plus focusable="false" — the second matters because some browsers put SVG in the tab order otherwise. Standalone meaningful graphic: role="img" and a <title> element as the first child, referenced with aria-labelledby. Icon-only button: put the accessible name on the button, not on the SVG.
SVG can contain <script>, event handlers and external references, so an uploaded SVG is executable content. Never serve user-supplied SVG from your own origin without sanitising it — DOMPurify with SVG profiles, or server-side sanitisation — and serve untrusted files from a separate domain with a restrictive Content-Security-Policy.