SVG Toolkit
Optimise a file, turn it into a React component or a data URI, and generate the patterns and waves you were going to download from somewhere else — all four in the tab, none of it uploaded
What ran
493 B → 267 B−46%
- Removed the XML prolog and doctype−38 B
- Removed comments−64 B
- Removed editor metadata−20 B
- Removed default attributes−14 B
- Removed width and height from the root×2−23 B
- Removed unreferenced ids−13 B
- Rounded numbers to 2 decimals−37 B
- Collapsed whitespace×6−17 B
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#0f172a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Bookmark</title><g><path d="M19 21 L12 16.33 L5 21 L5 5 A2 2 0 0 1 7 3 L17 3 A2 2 0 0 1 19 5 Z"/></g></svg>Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
Decimal places kept on path and transform data. Two is invisible at any normal size and is where most of the saving in an exported icon lives; go below one and curves start to visibly kink.
Leaves the viewBox to define the aspect ratio, so the SVG fills whatever box you put it in. Skipped automatically when there is no viewBox to fall back on.
Layer names from the editor, kept only when a url(), a <use> or an animation names them. Skipped entirely if the file has its own <style>, where a selector could reach an id in ways this cannot see.
Makes the icon inherit the colour of the text around it — one file for both themes. fill="none" is left alone, because on a stroked icon that is structure and not colour.
An SVG is a document and can carry script. On by default; the preview above sanitises regardless, but the copied output is exactly what this switch says it is.
Off, unlike most optimisers. A <title> is the accessible name of an inline SVG — deleting it to save nine bytes turns a labelled control into 'graphic'.
Keep this SVG setup. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
- HTML to JSXPaste markup and a stylesheet, take away a component — React, Vue, Svelte, styled-components or Tailwind. The same engine the catalog exports through, pointed at your own code, and it says what changed on the way through rather than leaving you to find out.
- PlaceholdersPlaceholder images and initial avatars as SVG data URIs. No third-party request, works offline, and the avatar colour is derived from the name so it is stable everywhere.
- Clip-path, Blob & Shape MagicEleven classic polygon() shapes — chevrons, stars, arrows, speech bubbles — each with its own tunable parameters, plus a seeded organic blob generator with 3–12 control points and a randomness dial. Shape Magic merges draggable circles into one organic outline and leaves as a React component, SVG, PNG or CSS clip-path.