How do I preview SVG code?

Paste the markup into SVG Input, or press one of the examples. The preview updates a moment after you stop typing and is drawn as an from a data URL of the sanitized markup. Copy, Download (image.svg) and the React export use the same sanitized markup.

What does the sanitizer remove from an SVG?

, event handlers such as onload, links (the shapes inside stay), , animation elements, feImage, href values other than #id (PNG, JPEG, GIF or WebP data URLs on are kept), data-* attributes, and any attribute that points to another file. The Sanitization panel lists each removed item with a count and the reason.

How do I convert SVG to a React component?

Press Export React. The tool writes TSX: export function SvgIcon(props: React.SVGAttributes ) returning the with its own attributes first and {...props} after them, so props you pass override them. Hyphenated names become camelCase (stroke-width is strokeWidth), class becomes className, and aria-* attributes stay as written. data-* attributes are not in the export, because the sanitizer has already removed them.

Are blocks and style attributes kept?

Yes, when every declaration passes a filter: no @import, no url() other than url(#id), no backslash, no expression(), behavior, javascript: or -moz-binding. So .a{fill:#00f} from Illustrator keeps its colors, while a with @import url(x.css) is removed as a whole and listed.

How do I convert SVG to PNG?

Paste the SVG, pick PNG at 1x, 2x, 3x or 4x and press Download PNG. The size is the SVG’s own width and height times the scale, so a 24 by 24 icon at 4x saves as 96 by 96 px. The longest side is capped at 8,192 px: 5,000 by 2,000 at 2x becomes 8,192 by 3,277. The PNG is drawn from the sanitized markup, and areas the SVG leaves empty stay transparent whatever preview background you chose.

Why did my filter="blur(5px)" disappear?

The paint and reference attributes (fill, stroke, filter, mask, clip-path, marker-*) keep only none, currentColor, a plain color, an rgb() or hsl() color or url(#id). A CSS function such as blur(5px) or circle() in those attributes is removed and listed; define the filter as a element and refer to it with url(#id).

SVG Code Viewer

Paste SVG code to preview it as an image with scripts, event handlers and outside links removed, list its colors and elements, minify it or export React TSX. How it works

SVG Input

Preview

Preview will appear here

Try an example:

About the SVG Code Viewer

Paste SVG markup and the viewer draws it as an image after removing scripts, event handlers such as onload, links, animation, foreignObject and references to other files, while plain <style> rules and filter primitives stay. It lists everything it removed, the viewBox, size, element counts and colors, and can minify the markup, export it as a React TSX component or save it as a PNG at 1x to 4x. The preview zooms to Fit, 100%, 200% or 400% on a theme, white, dark or checkerboard background.

What the sanitizer removes from a test file

Removed	Kind
onload	attribute
<script>	element
<a>	element
fill	attribute
<animate>	element
<foreignobject>	element
href	attribute
<style>	element

Test file: an <svg onload>, a <script>, an <a> link around a rect whose fill is url(https://...), an <animate>, a <foreignObject>, an <image href="https://..."> and a <style> with @import. Kept from the same file: a circle with style="fill:#0f0", a <style> with .a{fill:#00f} and a filter with feDropShadow.

SVG attributes in the React (TSX) export

SVG	React export
stroke-width	strokeWidth
class	className
xlink:href	xlinkHref
xml:space	xmlSpace
text-anchor	textAnchor
font-family	fontFamily
clip-path	clipPath
aria-label	aria-label
fill-rule	fillRule
style="fill:#fff;stroke-width:2"	style={{ fill: "#fff", strokeWidth: "2" }}

data-* attributes never reach the export: the sanitizer removes them first and lists them in the Sanitization panel.

The three examples on the page

Example	Colors listed	Responsive
Basic Circle	#6366f1, white, #4338ca	No
Gradient Star	#7c2d12, #f59e0b, #ef4444	No
Responsive Icon	#22c55e, white	Yes

Responsive means the SVG has a viewBox and no fixed width and height, so it scales to its container.

Frequently asked questions

How do I preview SVG code?: Paste the markup into SVG Input, or press one of the examples. The preview updates a moment after you stop typing and is drawn as an <img> from a data URL of the sanitized markup. Copy, Download (image.svg) and the React export use the same sanitized markup.
What does the sanitizer remove from an SVG?: <script>, event handlers such as onload, <a> links (the shapes inside stay), <foreignObject>, animation elements, feImage, href values other than #id (PNG, JPEG, GIF or WebP data URLs on <image> are kept), data-* attributes, and any attribute that points to another file. The Sanitization panel lists each removed item with a count and the reason.
How do I convert SVG to a React component?: Press Export React. The tool writes TSX: export function SvgIcon(props: React.SVGAttributes<SVGSVGElement>) returning the <svg> with its own attributes first and {...props} after them, so props you pass override them. Hyphenated names become camelCase (stroke-width is strokeWidth), class becomes className, and aria-* attributes stay as written. data-* attributes are not in the export, because the sanitizer has already removed them.
Are <style> blocks and style attributes kept?: Yes, when every declaration passes a filter: no @import, no url() other than url(#id), no backslash, no expression(), behavior, javascript: or -moz-binding. So .a{fill:#00f} from Illustrator keeps its colors, while a <style> with @import url(x.css) is removed as a whole and listed.
How do I convert SVG to PNG?: Paste the SVG, pick PNG at 1x, 2x, 3x or 4x and press Download PNG. The size is the SVG’s own width and height times the scale, so a 24 by 24 icon at 4x saves as 96 by 96 px. The longest side is capped at 8,192 px: 5,000 by 2,000 at 2x becomes 8,192 by 3,277. The PNG is drawn from the sanitized markup, and areas the SVG leaves empty stay transparent whatever preview background you chose.
Why did my filter="blur(5px)" disappear?: The paint and reference attributes (fill, stroke, filter, mask, clip-path, marker-*) keep only none, currentColor, a plain color, an rgb() or hsl() color or url(#id). A CSS function such as blur(5px) or circle() in those attributes is removed and listed; define the filter as a <filter> element and refer to it with url(#id).

Checking a pasted icon before it ships

Paste an icon exported from Figma, Illustrator or Inkscape to see what it holds before it goes into a project: the viewBox and size, whether it scales to its container, how many elements it has and every color it uses. The Sanitization panel shows what the file carried that a browser would act on, such as an onload handler or a link to an outside image, and Export React turns the cleaned markup into a TSX component. Zoom to 400% to check edges, and switch the background to white, dark or a checkerboard to see a light icon or a transparent area. Download PNG saves it at 1x to 4x its own size, up to 8,192 px on the longest side. Paste the code; there is no file upload, and three examples (Basic Circle, Gradient Star, Responsive Icon) show what each panel reports.

How the SVG is processed

The markup goes through DOMPurify with an allow-list of SVG elements and attributes and is written back as XML with xmlns. Removed and listed in the Sanitization panel: <script>, event handlers such as onload, <a> links, <foreignObject>, animation elements, feImage, href values other than #id (PNG, JPEG, GIF or WebP data URLs on <image> are kept), data-* attributes, and any attribute that points to another file. A <style> element or style attribute is kept when every declaration passes a filter (no @import, no url() except url(#id), no backslash, no expression()); otherwise the whole element or attribute goes. Filter primitives such as feGaussianBlur and feDropShadow stay. The preview is the sanitized markup drawn as an <img> from a data URL. Minify works on the sanitized markup: it removes comments, the white space between elements and the root's version, and keeps xmlns and the spaces inside text.

Example: in the React export stroke-width becomes strokeWidth, class becomes className and style="fill:#fff;stroke-width:2" becomes style={{ fill: "#fff", strokeWidth: "2" }}, inside export function SvgIcon(props: React.SVGAttributes<SVGSVGElement>). Limit: 100,000 characters.

Related Tools

View all tools

CSS

SVG Blob Generator

Make an organic SVG blob: set complexity, contrast and smoothness, pick a color, gradient or image fill, then copy SVG, CSS or React, or save a PNG.

CSS

SVG Wave Generator

Make an SVG wave divider for the top or bottom of a section: set points, amplitude, curve bend, size and color, then copy the SVG or download SVG or PNG.

CSS

SVG Pattern Generator

Make a seamless SVG pattern tile of dots, squares, plus signs, stripes, checkers, hexagons or triangles; copy CSS with background-size or save SVG or PNG.

Dev

React Component Boilerplate

Generate a React function or class component in TypeScript or JavaScript with the hooks you tick, typed props, React.memo or "use client", as a starting point.

Dev

CSS Minifier

Paste CSS to remove comments and unneeded whitespace while keeping descendant spaces, calc() operators and /*! */ license comments, with the characters saved.

Dev

HTML Minifier

Paste HTML to drop comments and collapse whitespace. The space between inline elements stays, pre and textarea are kept, and inline CSS and JS can be minified.