개발자·4 분 분량·2026년 10월 16일

How to Use an SVG in React, CSS or HTML

Convert SVG code into a React component, a data URI, a CSS background or an img tag, and learn the limits of each.

Four ways to use an SVG

You can drop the SVG into React as a component, embed it as a data URI, use it as a CSS background, or reference it from an img tag. The SVG to Code tool generates all four from the same pasted code, with a live preview.

React component

The tool converts attribute names for React, such as stroke-width to strokeWidth and class to className, and spreads props onto the svg element so you can set size and color. Inline style strings and xlink:href attributes are not converted, so change those by hand.

Data URI, CSS and img

The data URI, CSS background-image rule and img tag all embed the SVG without a separate file. An SVG used this way works as an image, so it cannot inherit currentColor from the surrounding text the way an inline SVG in React can.

Use trusted SVGs

The preview is shown as an image, so scripts inside a pasted SVG do not run on the page. Still, only use SVG from sources you trust in your own projects. Because the preview is an image, currentColor appears black there, while the generated React code inherits the color of the surrounding text.

도구 열기: SVG를 코드로