Does the converter run scripts or event handlers from my SVG?

No. Every input is sanitized first: script and foreignObject elements, on* event attributes, javascript: URLs, and external references are removed and listed. The preview shows only the sanitized markup as an image.

What is the difference between JSX and TSX output?

Both produce the same markup. TSX output with spread props imports the SVGProps type and types the props parameter as SVGProps , and the file downloads with a .tsx extension.

Which colors does the currentColor option replace?

Solid fill and stroke values in attributes or inline styles are replaced with currentColor. none, transparent, gradient or pattern references such as url(#id), and CSS variables are left unchanged.

Is the output optimized like SVGO?

No. The cleanup option removes comments and whitespace-only text between elements. Path data, precision, and element structure are not rewritten, so run a dedicated optimizer first if you need smaller paths.

SVG to JSX

Convert SVG markup into clean React JSX or TSX components

SVG 소스

.svg 파일을 여기에 놓으세요

최대 5 MB의 SVG 파일.

클립보드에서 붙여넣을 수도 있습니다.

변환 옵션

컴포넌트 이름

PascalCase, 예: ArrowRightIcon.

출력 형식

React 컴포넌트로 감싸기

width와 height 제거

fill과 stroke에 currentColor 사용

추가 옵션

공백 정리

요소 사이의 주석과 공백만 있는 텍스트를 제거합니다. 안전한 정리이며 완전한 SVG 최적화 도구는 아닙니다.

주석 제거

title 및 ARIA 속성 유지

장식용 아이콘이라면 끄세요. title, desc, role, ARIA 속성을 제거하고 aria-hidden을 추가합니다.

접근성 제목(선택 사항)

루트 title을 교체하고 role="img"를 추가합니다.

React 컴포넌트

생성된 컴포넌트가 여기에 표시됩니다.

정화된 미리보기

SVG 마크업을 붙여넣거나 파일을 업로드하면 미리보기가 표시됩니다.

SVG를 이미지로SVG를 원하는 크기의 선명한 PNG, JPEG, WebP, AVIF 이미지로 변환 블롭 생성기재현 가능한 시드로 유기적인 SVG 블롭 만들기 SVG 웨이브 생성기반응형 출력을 지원하는 단일·겹친 SVG 웨이브 구분선 만들기

SVG to JSX의 기능

SVG to JSX는 SVG 마크업을 React 컴포넌트 또는 일반 JSX 요소로 변환합니다. 속성은 React 이름으로 매핑되고(class → className, stroke-width → strokeWidth, fill-rule → fillRule, clip-path → clipPath, xlink:href → xlinkHref), 인라인 style 문자열은 style 객체가 되며, viewBox는 항상 유지되어 아이콘이 올바르게 확대·축소됩니다.

사용 방법

1.SVG 마크업을 붙여넣거나 .svg 파일을 놓거나 선택하거나 예제를 불러옵니다.
2.정화된 미리보기와 제거된 안전하지 않은 항목 목록을 확인합니다.
3.컴포넌트 이름을 정하고 JSX 또는 TSX 출력을 선택합니다.
4.필요에 따라 래퍼, props 전개, width/height 제거, currentColor를 켜거나 끕니다.
5.코드를 복사하거나 .jsx 또는 .tsx 파일로 다운로드합니다.

옵션 설명

props 전개는 className, 크기, 이벤트 props를 컴포넌트에서 루트 <svg>로 전달하며, TSX는 SVGProps<SVGSVGElement> 타입을 추가합니다. width와 height를 제거하면 viewBox를 통해 CSS가 크기를 제어합니다. currentColor는 단색 fill과 stroke를 교체해 아이콘이 텍스트 색을 따르게 하며, none, transparent, 그라디언트(url(...)), CSS 변수는 그대로 둡니다. 공백 정리는 요소 사이의 주석과 공백만 있는 텍스트를 제거하는 안전한 정리이며 완전한 SVG 최적화가 아닙니다. 장식용 아이콘은 접근성 속성을 꺼서 title, desc, role, ARIA를 제거하고 aria-hidden을 추가하거나, 의미 있는 아이콘에는 제목을 입력해 role="img"로 레이블을 지정하세요.

보안 및 제한

모든 입력은 미리보기와 변환 전에 정화됩니다. <script>, <foreignObject>, onclick 같은 이벤트 핸들러, javascript: URL, 외부 이미지나 리소스 참조, 지원되지 않는 요소는 제거되고 보고됩니다. DOCTYPE 선언과 XML 엔터티는 거부됩니다. 미리보기는 정화된 마크업만 이미지로 렌더링하므로 SVG 안의 어떤 것도 실행되지 않습니다. SVG 텍스트는 5 MB로 제한됩니다. 지원되지 않는 요소는 제거되므로 복잡한 일러스트는 미리보기를 원본과 비교하세요.

SVG to JSX

관련 도구