Skip to content
SVGtoReact

What the sanitizer removes

Every SVG is treated as untrusted. The sanitizer runs before preview, before SVGR, before SVGO, before a PNG is drawn, and before a data URI is encoded. If sanitizing fails, the converter does not emit a component and the optimizer does not return the original markup. The limit is 500 KB per file, 10,000 elements, and 200 attributes on one element. Output larger than 2 MB after sanitizing is rejected.

Whole elements that are removed

These tags are dropped, and the result carries a warning:

animate, animateTransform, and animateMotion stay when they do not aim at href, src, xlink:href, or an event-handler name, and when their from, to, values, and by values are not scripts. An animation that points href at a javascript: URL is removed.

Attributes

An attribute whose name starts with on, such as onclick or onload, is removed. The warning is "Removed event handlers." The path or shape the handler was attached to stays, so the icon can still convert.

href, src, and xlink:href may point at a fragment in the same file (#keep, with a letter or underscore after the hash) or at a raster data URI whose type is PNG, JPEG, GIF, or WebP and whose payload is base64. Other references are removed with the warning "Removed unsafe URLs." That includes https:// URLs, javascript: URLs, and data:image/svg+xml. An SVG data URI is not treated as a safe image, because it could carry another document.

A style attribute or a <style> element is removed when it contains javascript:, vbscript:, CSS expression(), @import, -moz-binding, behavior:, or a url() that does not start with #. The warning is "Removed unsafe CSS." A style that only sets fill and stroke stays.

Comments and processing instructions are dropped. They are not part of the painted tree. A document type or an entity declaration rejects the file instead of being stripped. The error says the document type or entity declaration is not allowed, and the original source is not returned.

What is kept

Ordinary drawing elements stay: path, rect, circle, g, defs, gradients, and use pointing at an internal fragment. viewBox, width, and height are kept and are also read so the component can default its props. Text nodes stay, including text that mentions attribute names. Null bytes and most other disallowed XML control characters reject the file rather than being skipped.

After a successful sanitize

The serialized SVG is checked once more for a script tag or a javascript: URL. If either is still present, the file is rejected. The preview document then wraps that sanitized SVG in a frame with sandbox="" and a content security policy of default-src 'none'. The preview does not execute the generated React component. Copy and download give you source to read in your own project.

Optimize and currentColor run on the sanitized SVG and the result is sanitized again. Those passes are described in What Optimize keeps and What currentColor changes. Optional AI tools that return an SVG run this same sanitizer in the browser before the editor, the preview, or a download can use that SVG.