Convert SVG to HTML, CSS and JSX code

Paste SVG or choose an .svg file to get code for a web page or React project. Compare four output types in the tool, then copy the one you need.

Paste SVG markup

0 characters

HTML <img>

Inline SVG

CSS Background

React JSX

Get code from SVG in three steps

Paste markup or choose an .svg file

Paste markup starting with an <svg> element or choose an .svg file. Invalid SVG shows an error instead of code.

Choose code for where you will use it

You need	Choose tab	Check after copying
Embed an image in HTML	HTML <img>	Replace alt="SVG Image" with suitable text and check that the image renders.
Edit SVG colors or elements in a page	Inline SVG	Paste the markup into HTML and inspect attributes from the source SVG.
Use SVG as a background	CSS	Paste background-image into a CSS rule and check the display area.
Use SVG in React	React JSX	Paste the SVG into a component; adjust any incompatible JSX attributes or styles and test it.

If the snippet does not work

No output: Check the opening/closing <svg> tags and quoted attributes. Paste valid SVG or try another .svg file.
Image missing in HTML/CSS: Open the source SVG in a browser and check any external resources it references. A data URI does not embed those resources.
React reports a JSX error: The React tab converts only some attributes. Check class/style and hyphenated or namespaced attributes, including on child elements.

Review SVG before embedding it

The file content is read and converted in your browser. The tool does not remove scripts, links or external references from the source SVG; embed only SVG you trust and review the output before publishing it.