SVG Tools

SVG is text, which means most of what you need to do to an icon or illustration can be done by reading and rewriting that text in the browser. These tools take pasted markup or dropped files, do one job each, and hand back markup you can copy or a file you can download. Nothing is uploaded.

Every SVG tool

SVG Colour Replacer

List every colour in an SVG and swap one, all, or to currentColor.

SVG Formatter

Pretty-print SVG for reading or minify it to one line.

SVG Path Generator

Generate SVG path data for rectangles, stars, arrows and other shapes.

SVG Sprite Generator

Merge SVG icons into one symbol sprite with use snippets.

SVG ViewBox Fixer

Diagnose and repair the viewBox so an SVG scales properly.

SVG to CSS

Make a CSS icon class from an SVG, recolourable with currentColor.

Tidying markup

The formatter pretty-prints SVG with consistent indentation so it can be read and diffed, or minifies it to a single line for shipping. It sits alongside the optimizer, which goes further and strips editor metadata and rounds coordinates. Use the formatter when you want to look at a file, the optimizer when you want to make it smaller.

Fixing the frame

A surprising number of SVGs exported from design tools are missing a viewBox, carry fixed width and height attributes, or have a viewBox that no longer matches the drawing. The viewBox fixer diagnoses which of those applies and rewrites the root element so the image scales with CSS, fits its content, or keeps a chosen aspect ratio. It is the first thing to try when an icon refuses to resize.

Colour

The colour replacer lists every colour used in a file, whether in fill and stroke attributes, inline styles or a style block, and swaps one for another or for currentColor so the icon inherits the text colour of wherever it sits. The SVG to CSS tool takes that idea further and turns an icon into a CSS class using mask-image, which makes any single-colour icon recolourable with a plain background-color.

Generating shapes

The path generator writes the d attribute for the shapes people most often need but rarely remember the syntax for: rounded rectangles with independent corners, circles and ellipses as paths, regular polygons, stars and arrows. Each comes with a complete SVG element and a preview, and the path visualizer nearby will plot the anchors if you want to see how it is built.

Sprites

An SVG sprite bundles many icons into one file as symbol elements, so a page loads a single asset and draws each icon with a use element. The sprite generator takes a set of SVG files, gives each a symbol id derived from its filename, preserves the viewBox, and produces both the sprite and the markup for referencing every icon in it.

Privacy

Every tool here works on text in your browser. Pasted markup and dropped files are parsed with the browser's own XML parser and never sent anywhere; the pages make no network requests after they load.