Pasting the SVG into React throws an error.

JSX needs camelCase attributes — strokeWidth rather than stroke-width. The JSX export renames the attributes for you.

How do I use an SVG as a CSS background?

Convert it to a Data URI and drop the string straight into background-image: url(...); no extra network request is made.

SVG Editor & Converter

Edit SVG code, change colors, optimize, and convert to React JSX or PNG.

SVG Preview ViewportWidth: 150px | Height: 150px

Drag SVG file inside or click Upload to select a file.

Dimensions & viewBox

Width (px)

Height (px)

viewBox (min-x, min-y, width, height)

Extracted Colors (0)

No color attributes detected in this SVG.

Editing SVG and converting the code

An SVG is a vector image written as text, so you can edit it directly. Recolour it, strip metadata to shrink the file, and export it as a React component (JSX), a Data URI you can drop into CSS, or a rasterised PNG.

How to use it

Paste the SVG code or load a file.
Adjust colours and size, then apply optimisation.
Export as JSX, a Data URI or PNG.

Frequently asked questions

Pasting the SVG into React throws an error.: JSX needs camelCase attributes — strokeWidth rather than stroke-width. The JSX export renames the attributes for you.
How do I use an SVG as a CSS background?: Convert it to a Data URI and drop the string straight into background-image: url(...); no extra network request is made.