SVG Studio

Minify, prettify, fit the viewBox, and strip fixed width/height from SVG markup with a live sandboxed preview. Export as SVG, Data URI, React component, or CSS background — all locally, no SVGO server pipeline.

Paste SVG markup or upload a .svg file to start

Paste or upload an SVG to see live preview and size stats.

Live preview appears here

Why clean up SVG before shipping it?

What this tool does

SVG Studio is a lightweight cleanup and export workbench for SVG markup, with no SVGO dependency and no server round trip. Paste raw SVG or upload a .svg file, watch a live sandboxed preview update as you type, then minify, prettify, fit the viewBox, or strip fixed width/height in one click. When the markup is ready, export it as a downloadable file, a copy-pasteable Data URI, a React component, or a CSS background-image declaration. A running byte-size counter shows exactly how much you saved compared with the original paste or upload.

Why you need it

Icons exported from Figma, Illustrator, or Sketch usually carry more than the shape itself: editor comments, an XML prologue, redundant whitespace, and a hard-coded width/height pair that fights responsive layouts. None of that is wrong, exactly — it is just unnecessary weight and rigidity for markup that is going to live inside a design system, a component library, or a hand-written HTML page.

Design systems and icon libraries specifically want viewBox-first SVG: drop the fixed pixel size, keep the viewBox, and the icon scales cleanly to whatever the surrounding CSS says it should be. Frontend developers copying an icon into a React or Vue project want camelCase JSX attributes, not raw XML. And anyone shipping a few small vector graphics on a marketing page wants the smallest possible payload without installing a build pipeline just to run SVGO once.

Doing all of this by hand — deleting comments, renaming stroke-width to strokeWidth, computing a viewBox from a bounding box — is tedious and easy to get subtly wrong. This tool automates the repetitive parts while leaving you in full control of the source, visible and editable at every step in the textarea on the left.

How to use it

  1. Paste SVG markup into the source textarea, or upload a .svg file — the live preview renders instantly in a sandboxed frame.
  2. Click Minify to strip comments and collapse structural whitespace, or Prettify to re-indent for readability.
  3. Use Fit viewBox to add a viewBox derived from existing width/height (or a measured bounding box), then Remove width/height to make the icon fully responsive.
  4. Watch the stats line for original vs. current byte size and the percentage saved.
  5. Export with Download, Copy SVG, Copy Data URI, Copy React, or Copy CSS depending on where the icon is headed next.

Practical examples

  • Design-system icon set: Fit viewBox, remove width/height, then Copy React to paste a clean functional component straight into a component library.
  • Marketing page hero graphic: Minify to shrink an illustration exported from Illustrator, then Copy CSS to use it as a background image without a separate HTTP request.
  • Email-safe wordmark: Prettify a traced logo so you can hand-review every path before deciding whether it is safe to inline.
  • Quick favicon source: Clean up an exported SVG here first, then hand it to the Favicon Generator for multi-size export.
  • Sharing a snippet with a teammate: Copy as Data URI to paste a self-contained preview link into a chat message or design doc without attaching a file.

How it works

Minify removes XML comments and the optional <?xml ...?> prologue, then collapses only the whitespace that sits purely between tags — indentation and line breaks — leaving text content and path data untouched. Prettify and the viewBox tools parse the markup with DOMParser in XML mode (so case-sensitive attributes like viewBox and preserveAspectRatio survive) and re-serialize it with consistent two-space indentation.

Fit viewBox reads the root <svg> element's width and height attributes and derives viewBox="0 0 width height". If neither attribute is present, it briefly renders the markup off-screen and reads the browser's computed bounding box with getBBox() before removing the temporary element — no network access, no server involved. Remove width/height then strips the fixed size attributes once a viewBox exists, so the icon can be scaled purely through CSS. The live preview uses an <object> element pointed at a blob: URL, which browsers isolate on a unique origin separate from the page.

Common mistakes

  • Minifying then expecting comments back: Comment removal is one-way — keep an unminified copy if the comments document something important.
  • Removing width/height before a viewBox exists: Without a viewBox, the browser falls back to a default intrinsic size and the icon may render far too small or too large. Fit viewBox first.
  • Assuming Fit viewBox works on every file: An SVG with no width/height and content the browser cannot render (unsupported filters, external references) may have nothing to measure.
  • Pasting untrusted SVG into production without review: SVG can contain <script> tags and event handlers. This studio is for cleaning assets you already own, not for sanitizing third-party uploads.
  • Expecting deep vector optimization: Path simplification, plugin-based shape merging, and precision rounding are full-SVGO territory — this tool focuses on structural cleanup and export, not geometry rewriting.

FAQ

Is this a full SVGO replacement?

It covers the cleanup and export moves developers actually reach for — minify, prettify, viewBox fixes and format conversion. Advanced multi-plugin pipelines like full SVGO are not included by design.

Does Fit viewBox always work?

It uses an existing width/height pair, or measures the rendered bounding box if those are missing. Extremely unusual markup without any size hints may still need a manual viewBox.

Is my SVG uploaded to a server?

No. Parsing, transforms and export all run locally in your browser tab using DOMParser and string operations — nothing is sent anywhere.

What does Copy as React component produce?

A minimal functional component exporting your markup as JSX, with attributes like class, stroke-width and xlink:href converted to their camelCase React equivalents.

What happens to scripts inside a pasted SVG?

The live preview renders through a blob URL, which browsers treat as a separate, unique origin from the page. Still, only paste SVGs you trust — this studio is a cleanup tool, not a sanitizer.

Related tools