SVG 편집기이란?
비주얼 캔버스에서 도형, 패스, 텍스트를 그리고 선 색상과 채우기를 조정한 후 SVG 코드를 내보내세요. 데스크톱 소프트웨어가 필요 없습니다.
도구로는 사각형, 타원, 선, 자유 경로, 텍스트와 도형 라이브러리(삼각형, 육각형, 별, 화살표)가 있습니다. 텍스트는 캔버스에서 바로 편집합니다 — 텍스트 도구를 고른 뒤 입력하거나, 기존 텍스트를 더블 클릭해 바꿔 쓸 수 있습니다. 각 요소마다 채우기, 선 색상과 두께, 불투명도를 따로 가질 수 있고, 속성 패널에서 X, Y, 너비, 높이를 정확한 값으로 입력할 수 있습니다. 기존 SVG는 한 번의 클릭으로 가져오고, 10픽셀 격자에 그림을 맞추며, 최대 50단계까지 실행 취소·다시 실행을 사용할 수 있습니다. 완성한 그래픽은 HTML과 React JSX용 순수 SVG 코드로, 또는 SVG를 받지 않는 곳을 위한 래스터 PNG로 내보낼 수 있습니다.
사용 방법
- 그리기 도구(사각형, 타원, 선, 패스 또는 텍스트)를 선택하고 캔버스에 그리세요.
- 요소를 선택하여 이동, 크기 조절, 회전하거나 채우기, 선, 불투명도를 변경하세요.
- 완성된 그래픽을 SVG 파일로 내보내거나 SVG 마크업 코드를 복사하세요.
사용 시기
- 랜딩 페이지용 일회성 로고, 구분선, 히어로 도형을 그릴 때.
- 무거운 데스크톱 앱을 열지 않고 기존 SVG를 손으로 빠르게 손볼 때.
- 캔버스에 그릴 때마다 코드가 어떻게 바뀌는지 보여 주며 SVG 기초를 가르칠 때.
결과
웹 개발자가 간단한 로고 마크가 필요합니다 — 그래디언트 채우기가 적용된 겹치는 두 원. 캔버스에 도형을 그리고 색상을 적용한 후 SVG 코드를 HTML에 직접 복사합니다.
자주 묻는 질문
- 복사한 SVG를 React JSX에 그대로 붙여 넣어도 되나요?
- 대체로 괜찮지만 한 가지 주의가 있습니다. stroke-width, stop-color 같은 속성은 JSX에서 strokeWidth, stopColor로 카멜케이스로 바꿔야 합니다. 여기서 복사되는 SVG는 kebab-case라서 일반 HTML에는 바로 쓸 수 있고, 찾기·바꾸기 한 번이면 JSX로 옮길 수 있습니다.
- 기존 SVG 파일을 가져와서 이어 편집할 수 있나요?
- 네 — SVG 가져오기 버튼으로 기기에 있는 어떤 .svg 파일이든 불러올 수 있습니다. 사각형·타원·원·선·패스·텍스트는 캔버스 위에서 편집 가능한 요소로 바뀝니다. 그라데이션, 필터, 중첩된 그룹은 편집기가 각 도형을 단일 기본 도형으로 저장하기 때문에 건너뜁니다.
- 내보낸 SVG가 일러스트레이터나 피그마에서 다르게 보입니다. 왜 그런가요?
- 렌더러마다 선 정렬, 그라디언트, 필터를 다루는 방식이 조금씩 다릅니다. 이 도구의 출력은 최신 브라우저와 동일하게 그려지는 사양 그대로의 결과이므로 차이는 대개 다른 프로그램의 해석 때문입니다.
- 패스 도구가 베지어 제어점을 지원하나요?
- 자유 경로 도구는 그린 점을 기록해 폴리라인 형태로 내보냅니다. 진짜 큐빅 베지어 곡선이 필요하면 SVG를 내보낸 뒤 d 속성을 직접 편집하거나, 결과를 핸들이 보이는 벡터 도구에서 다시 다듬어 주세요.
- 캔버스가 느려지기 전까지 요소를 얼마나 추가할 수 있나요?
- 최신 기기에서는 수백 개 도형까지는 쾌적합니다. 복잡한 지도나 아이콘 격자처럼 수천 개에 이르면 드래그할 때마다 캔버스 전체가 다시 그려져 느려집니다. 그 정도가 되면 도형을 더 적은 합쳐진 경로로 묶으세요.