SVG to HTML

Convert SVG to HTML online

Upload an SVG file or paste its markup to produce inline SVG for an HTML page. Preview the result, adjust optimization settings and copy the code. All parsing, optimization and conversion run locally in your browser without sending your SVG to a server.

Prepare responsive inline SVG

Keep the viewBox to preserve the SVG coordinate system. Remove fixed width and height when the SVG has a usable viewBox, then size it in your own CSS.

Understand SVG size and savings

Original size is the size of your input SVG. Optimized SVG size is its size after processing with your selected options, such as removing comments, rounding coordinates and minifying the code. Sizes are shown in kB, where 1 kB equals 1,000 bytes. Saved is the percentage reduction: going from 10 kB to 7 kB saves 30%. If the output is larger, for example because of readable formatting, Size increase is shown instead. These figures compare SVG markup, not the size of JSX, React, CSS Data URI or Base64 exports.

Decimal precision and indentation

Decimal precision controls how many digits are kept after the decimal point in coordinates and numeric attributes. With a precision of 2, 12.34567 becomes 12.35. Fewer decimal places can reduce file size but may alter fine details; the default of 3 is a starting point, so check the preview. Indentation uses 2 spaces, 4 spaces or tabs to make HTML and JSX code easier to read without changing the image. Minify SVG removes unnecessary formatting whitespace to compact the output, so indentation is disabled while minification is on.

HTML, JSX, React and SVG Data URIs

HTML output is inline SVG markup and downloads as an SVG file. JSX adapts attribute names and inline styles for React. React Component wraps it in a TypeScript function accepting standard SVG props. CSS Data URI produces a background-image declaration; Base64 produces an encoded SVG image URI. The size statistics describe the optimized SVG, not the larger encoded formats. Review IDs before using multiple inline copies on one page.

A static, local SVG workflow

The preview is an isolated image rather than executable page markup. Scripts, embedded HTML, animation, external images and style sheets are removed. Supported inline presentation styles and local fragment references are retained. This tool is intended for static artwork; unsupported features may change its appearance. currentColor changes solid fills and strokes and inherits its color when used inline; an image preview uses its own color context.