무료 온라인 SVG 편집기 — 도형·텍스트를 그리고 SVG로 다운로드

캔버스에 도형, 화살표, 자유 곡선, 텍스트를 그리고 깔끔한 SVG나 PNG로 다운로드하세요. 무료, 브라우저에서 실행, 가입 불필요.

도형을 클릭해 선택하고, 드래그해 이동하고, 핸들을 드래그해 크기를 조절하세요. 화살표 키로 미세 이동(Shift는 10px).

키보드 단축키
  • V 선택 / 이동
  • R 사각형
  • E 타원
  • G 삼각형
  • S 별
  • L 선
  • A 화살표
  • P 자유 펜
  • T 텍스트
  • Ctrl/⌘ Z 실행 취소, Shift로 다시 실행
  • Ctrl/⌘ D 복제
  • Del 선택 항목 삭제
  • 화살표 키 1px 이동, Shift 10px
  • 그리는 중 Shift: 정사각형, 원, 45° 선
  • Esc 선택 해제 또는 드래그 취소

모든 작업은 브라우저에서 이루어집니다. 아무것도 업로드되지 않으며, 그림은 로컬에 자동 저장되어 새로 고침해도 사라지지 않습니다. 간단한 스케치가 아니라 로고, 일러스트 다이어그램, 완전한 브랜드 시스템이 필요하신가요? 더 많은 무료 도구 보기.

문제를 발견하셨거나 개선할 점이 있나요? 모든 메시지를 읽고 빠르게 고칩니다.

이 무료 SVG 편집기로 브라우저에서 벡터 그래픽을 그리고, 계정도 업로드도 없이 깔끔한 SVG나 PNG로 다운로드할 수 있습니다. 도형 도구를 고르고 캔버스에서 드래그하고, 채우기와 선을 설정하고, 화살표와 라벨을 추가하면 파일이 완성됩니다. 슬라이드용 다이어그램, 간단한 아이콘, 임시 로고, 문서용 주석 상자처럼 30초짜리 작업을 위해 만들었습니다.

일부러 Illustrator를 따라 하지 않았습니다. 레이어 패널, 불리언 연산, 베지어 노드 편집이 없는데, 바로 그런 기능 때문에 본격적인 벡터 프로그램은 익히는 데 한나절이 걸립니다. 대신 빠른 드로잉에 필요한 모든 도구, 그 모두에 대한 키보드 단축키, 기대한 대로 작동하는 실행 취소, 그리고 내 도형만 담긴 내보내기를 제공합니다. 편집기 메타데이터도, 내장 글꼴도 없으니 다른 곳에서 열었을 때 놀랄 일도 없습니다.

사용 방법

  1. 프리셋(아이콘, 정사각형 게시물, Full HD)에서 캔버스 크기를 고르거나 직접 입력하고, 투명 또는 색상 배경을 선택하세요.
  2. 도구를 선택하세요: 사각형(R), 타원(E), 삼각형, 별, 선(L), 화살표(A), 자유 펜(P), 텍스트(T). 캔버스에서 드래그해 그리고, Shift를 누르고 있으면 정사각형, 정원, 45° 선이 됩니다.
  3. 선택 도구(V)로 도형을 클릭해 옮기고, 핸들을 드래그해 크기를 조절하고, 패널에서 채우기, 선, 불투명도, 모서리 반경을 편집하세요. 화살표 키는 1 px씩, Shift와 함께 누르면 10 px씩 이동합니다.
  4. Ctrl/⌘ D로 복제, Del로 삭제, 맨 앞 / 맨 뒤 버튼으로 순서 변경, Ctrl/⌘ Z로 무엇이든 실행 취소하세요.
  5. 확대해도 깨지지 않는 파일은 SVG 다운로드로, 비트맵은 PNG 다운로드(1×~3×)로 받거나, 코드 복사로 SVG를 HTML에 바로 붙여 넣으세요. 나중에 다시 작업할 수 있도록 그림은 이 브라우저에 자동 저장됩니다.

자주 묻는 질문

이 SVG 편집기는 정말 무료이고 가입이 필요 없나요?

네. 계정도, 워터마크도, 내보내기 제한도, 유료 전환 유도도 없습니다. 편집기는 전부 브라우저에서 실행되므로 페이지가 로드된 뒤에는 인터넷 연결을 끊어도 계속 작동합니다. 저희가 이런 도구를 만드는 이유는 사람들을 사이트로 불러오기 때문이며, 그중 일부는 나중에 저희가 고객을 위해 하는 디자인, 웹, 소프트웨어 작업이 필요해지기도 합니다.

무엇을 그릴 수 있나요?

사각형(둥근 모서리 포함), 타원과 원, 삼각형, 오각별, 직선, 화살표, 자유 펜 획, 그리고 세 가지 글꼴 계열의 텍스트입니다. 모든 도형은 채우기, 선, 선 두께, 불투명도를 각각 가지며, 이동, 크기 조절, 복제, 순서 변경이 가능하고, 원하면 10 px 격자에 맞출 수 있습니다. 다이어그램, 간단한 아이콘, 주석, 임시 로고는 충분히 그릴 수 있습니다. 베지어 노드 편집, 그라디언트, 레이어, 불리언 연산은 지원하지 않으므로 그런 작업에는 Inkscape나 Figma가 필요합니다.

기존 SVG 파일을 열어 편집할 수 있나요?

부분적으로 가능하며, 편집기가 어디까지 가능한지 정확히 알려 줍니다. SVG 열기는 사각형, 원, 타원, 선, 폴리라인, 다각형, 패스, 텍스트를 색상과 위치를 유지한 채 가져옵니다. 충실하게 재현할 수 없는 요소는 망가뜨리는 대신 건너뛰고, 무엇을 건너뛰었는지 메시지로 알려 줍니다. transform 속성이 있는 요소, transform이 있는 그룹, <use>와 <image> 참조, 그라디언트 채우기, CSS 스타일시트가 해당됩니다. 간단한 아이콘과 다이어그램은 깔끔하게 열리지만 Illustrator에서 내보낸 복잡한 일러스트는 대개 그렇지 않으며, 저희는 그런 척하기보다 솔직하게 말씀드리겠습니다.

SVG와 PNG 중 무엇으로 다운로드해야 하나요?

그래픽의 크기를 바꾸거나, 나중에 편집하거나, 웹사이트에 쓸 거라면 SVG입니다. 어떤 크기에서도 선명하고, 보통 PNG보다 훨씬 작으며, CSS로 스타일을 지정할 수 있습니다. 고정된 비트맵이 필요하다면 PNG입니다. SVG를 잘 처리하지 못하는 문서나 슬라이드에 붙여 넣을 때, SVG를 거부하는 플랫폼에 올릴 때, 그냥 그림을 원하는 사람에게 보낼 때가 그렇습니다. 2×와 3× 옵션은 고해상도 화면용 선명한 PNG를 만들어 줍니다. 잘 모르겠다면 둘 다 다운로드하세요. 무료입니다.

내 그림이 어딘가에 업로드되나요?

아니요. 그리기, 편집, 내보내기 모두 표준 SVG와 Canvas API로 브라우저 안에서 이루어지며, 서버로 아무것도 보내지 않습니다. 새로 고침하거나 실수로 탭을 닫아도 잃어버리지 않도록 그림은 브라우저의 로컬 저장소에 자동 저장됩니다. 그 사본은 기기에만 남고 새로 만들기를 누르면 지워집니다.

SVG 파일을 상업적으로 사용해도 되나요?

네. 직접 그린 것은 여러분의 것이며, 개인용이든 상업용이든 라이선스 조건도 출처 표시 의무도 없습니다. 내보낸 파일에는 내 도형과 표준 SVG 마크업만 들어 있으므로 저희 쪽에서 라이선스를 줄 것이 아무것도 없습니다.

내보낸 파일이 캔버스와 약간 다르게 보이는 이유는 무엇인가요?

편집기는 브라우저가 렌더링할 것과 같은 SVG로 그리므로 도형은 정확히 일치합니다. 다를 수 있는 것은 두 가지입니다. 하나는 편집기 전용이라 내보내지 않는 격자이고, 다른 하나는 글꼴을 내장하지 않고도 어떤 기기에서나 같게 보이도록 일반 글꼴 계열(Arial, Georgia, Courier New)을 쓰는 텍스트입니다. 보는 환경에 그 글꼴이 없으면 비슷한 글꼴로 대체되어 텍스트 너비가 몇 픽셀 달라질 수 있습니다.

SVG와 PNG: 차이가 실제로 의미하는 것

SVG는 도형을 설명하는 텍스트 파일입니다. 이 좌표에, 이 너비로, 이 색으로 된 사각형이라는 식입니다. PNG는 픽셀의 격자입니다. 이 한 가지 차이가 모든 실제 결과를 설명합니다. SVG는 어떤 크기로든 흐려지지 않고 확대되며, 간단한 다이어그램이라면 수백 바이트에 불과한 경우가 많고, 나중에 편집할 수 있으며, 웹 페이지에서 CSS로 색을 바꿀 수 있습니다. PNG는 내보낸 크기에 고정되고, 이미지가 커질수록 파일도 커지며, 픽셀 단위로밖에 편집할 수 없습니다.

로고, 아이콘, 다이어그램, 웹사이트에 들어가는 모든 것에는 SVG가 기본 선택입니다. 대상이 SVG를 처리하지 못하거나(많은 이메일 클라이언트, 일부 문서 도구, 대부분의 SNS 플랫폼), 받는 사람이 아무 데나 넣을 수 있는 이미지를 원할 때는 PNG가 맞습니다. 편집기는 같은 그림에서 둘 다 내보내므로 선택에 드는 비용은 없습니다.

이 편집기가 잘하는 것과 못하는 것

• 빠른 다이어그램: 슬라이드, README, 지원 티켓에 넣을 상자, 화살표, 라벨. 격자에 맞추기 덕분에 일일이 맞추지 않아도 정렬됩니다.

• 간단한 아이콘과 파비콘: 투명 배경의 256 × 256이나 512 × 512로 그려 SVG를 다운로드한 다음, 파비콘 생성기로 사이트에 필요한 모든 크기를 만드세요.

• 임시 로고와 마크: 도형 하나, 글자 하나, 색 하나. 프로토타입이나 피치 덱을 빈칸 단계에서 벗어나게 하기에는 충분합니다.

• 주석: 간단한 SVG 차트나 다이어그램을 열고, 이야기하려는 부분에 원과 화살표를 더한 뒤 내보내세요.

일러스트, 타이포그래피 중심 디자인, 점 하나하나 모양을 잡아야 하는 곡선이 있는 작업에는 맞지 않습니다. 자유 곡선 획은 자동으로 부드럽게 다듬어지지만 나중에 편집할 수 없습니다. 그런 작업에는 무료이면서 훌륭한 Inkscape가 있고, UI 그래픽이라면 Figma 무료 요금제로 충분합니다. 언제 더 큰 도구로 넘어갈지 아는 것도 작은 도구를 잘 쓰는 방법입니다.

깔끔한 SVG 파일을 위한 팁

의도한 크기로 그리세요. 1920 × 1080 캔버스에 그린 아이콘은 그 viewBox로 내보내지므로 쓰는 쪽에서 모두 크기를 조절해야 합니다. 먼저 캔버스를 의도한 크기로 설정하세요. 흔히 쓰는 크기는 프리셋에 있습니다.

선 그림에는 채우기보다 선을 쓰고, 선 두께는 일관되게 유지하세요. 두께가 제각각이면 다이어그램이 가장 빨리 아마추어처럼 보입니다. 색은 두세 가지면 거의 항상 충분하며, 패널의 색상 견본은 서로 잘 어울리도록 골라 두었습니다.

텍스트는 텍스트로 두세요. 이 편집기는 텍스트를 패스로 변환하지 않고 실제 <text> 요소로 내보내므로 파일이 아주 작고, 검색할 수 있으며, 나중에 문구를 바꿀 수 있습니다. 이후 단계의 도구가 윤곽선 변환을 요구한다면 마지막 단계에서 그 도구로 변환하세요.

특별히 색이 필요하지 않다면 배경을 투명하게 두세요. 투명한 SVG는 어떤 페이지나 슬라이드에도 자연스럽게 들어가지만, 로고 뒤에 흰 사각형이 있으면 그렇지 않습니다.

관련 무료 도구

  • ER 다이어그램 만들기 — 데이터베이스 스키마를 텍스트로 작성하면 ER 다이어그램이 실시간으로 그려집니다. PDF나 SVG로 내보내세요.
  • 마인드맵 만들기 — 들여쓰기한 개요를 입력하면 바로 마인드맵이 그려집니다. PDF나 SVG로 내보내세요. 계정도, 드래그 앤 드롭도 필요 없습니다.
  • 파비콘 생성기 — 어떤 로고든 클릭 한 번으로 favicon.ico, 모든 PNG 크기, Apple 터치 아이콘, webmanifest까지 갖춘 완전한 파비콘 패키지로 만드세요.
  • 이미지 변환기 — AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP, SVG 간에 변환하세요. 대부분의 변환은 브라우저 밖으로 나가지 않습니다.