SVG toolkit

Optimise runs SVGO 3.3.2 (loaded from jsdelivr on first use) with its default preset. Toggles control the plugins that can change how the image behaves: keep the viewBox (needed to scale), keep IDs (needed if CSS or scripts refer to them), keep <title>/<desc> (needed for accessibility), merge paths, and convert shapes. Set the numeric precision and multipass. The before/after preview and byte counts — raw and Base64 — show what you gained. Check the preview: a precision of 0–1 can distort small icons.

Convert renders a PNG at any scale through a canvas, and builds the two data URI forms. The URL-encoded form escapes only what it must, so it is usually smaller than Base64 for SVG. It also builds a CSS background-image rule and a React component. The component converts attributes to camelCase (stroke-width → strokeWidth, class → className) and style strings to objects, and spreads {…​props} onto the root. It can emit TypeScript.

Sprite combines several SVGs into one file of <symbol> elements, prefixing internal IDs so gradients and clip paths from different icons don’t collide. Each icon is then used with <svg><use href="sprite.svg#icon-name"/></svg>.