SVG 편집 및 변환

SVG 코드를 편집하고 색상 변경, 최적화 및 React JSX/PNG 변환을 지원합니다.

SVG Preview ViewportWidth: 150px | Height: 150px
Drag SVG file inside or click Upload to select a file.

No color attributes detected in this SVG.

SVG 편집과 코드 변환

SVG는 텍스트로 된 벡터 이미지라 코드를 직접 고칠 수 있습니다. 색상을 바꾸거나 불필요한 메타데이터를 덜어 내 용량을 줄일 수 있고, React 컴포넌트(JSX)나 CSS에 그대로 넣는 Data URI, PNG 래스터 이미지로도 바꿀 수 있습니다.

사용 방법

  1. SVG 코드를 붙여넣거나 파일을 불러옵니다.
  2. 색상·크기를 조정하고 최적화를 적용합니다.
  3. JSX, Data URI, PNG 중 필요한 형태로 내보냅니다.

자주 묻는 질문

React에 붙여넣으면 오류가 납니다.
JSX는 stroke-width 같은 하이픈 속성을 strokeWidth로 써야 합니다. JSX 변환을 사용하면 속성 이름이 자동으로 바뀝니다.
SVG를 CSS 배경으로 쓰려면?
Data URI로 변환한 문자열을 background-image: url(...) 에 그대로 넣으면 추가 요청 없이 표시됩니다.