Tools 4 All
홈
이미지 도구

온라인 SVG 편집기

브라우저에서 쓰는 빠른 전문가용 벡터 편집기: 펜으로 그리고, 노드를 편집하고, 도형을 결합하고, 그레이디언트로 스타일을 입히고, 애니메이션을 만든 다음 최적화된 SVG나 PNG로 내보내세요. 아무것도 업로드되지 않습니다.

무료가입 불필요로컬에서 실행 — 파일이 기기 밖으로 나가지 않습니다

빠른 시작과 단축키

왼쪽에서 도구를 고르고(또는 해당 키를 누르고), 캔버스에서 끌어 그린 다음, 오른쪽의 디자인 패널로 선택 항목의 스타일을 지정하세요. 언제든 ?을(를) 누르면 전체 단축키 목록을 볼 수 있습니다.

  • 탐색: 스크롤하여 이동, Ctrl/⌘ + 스크롤 또는 핀치로 확대/축소, Space을(를) 누른 채 끌어서 이동. Shift+1는 화면에 맞게 확대/축소합니다.
  • 선택: 클릭, Shift-클릭 또는 영역을 끌어 선택하세요. 그룹을 더블클릭하면 안으로 들어가고, 패스는 노드 편집, 텍스트는 입력을 시작합니다.
  • 변형: 핸들을 끌어 크기 조절(Shift은(는) 비율 유지, Alt은(는) 중심에서 크기 조절), 둥근 손잡이를 끌어 회전, Ctrl/⌘-측면 핸들을 끌어 기울이기.
  • 펜: 클릭하면 모서리, 끌면 곡선, 첫 노드를 클릭하면 패스가 닫히고, Enter을(를) 누르면 끝납니다.
  • 파일: 편집기 아무 곳에나 SVG나 이미지를 놓고, SVG 코드나 스크린샷을 붙여넣으세요. 자동 저장이 작업을 지켜 줍니다.
Untitled
Guide, features and FAQ

SVG 편집기 사용 방법

  1. 열거나 그리기 시작

    캔버스에 SVG, PNG 또는 JPEG를 놓거나, 파일을 열거나, 빈 페이지로 시작하세요. 아무것도 업로드되지 않습니다. 편집기는 전적으로 브라우저에서 실행됩니다.

  2. 그리기와 편집

    펜, 연필, 도형 도구를 사용한 다음 노드 단위로 패스를 다듬고, 불리언 연산으로 도형을 결합하고, 칠, 선, 그레이디언트로 스타일을 지정하세요.

  3. 정리

    레이어 패널에서 개체를 그룹화하고, 순서를 바꾸고, 잠그고, 정렬 및 분포하고, 아트워크를 심볼로 재사용하고, SVG 코드를 직접 편집하세요.

  4. 내보내기

    최적화된 SVG, PNG, JPEG 또는 WebP를 원하는 배율로 다운로드하거나, 결과를 SVG 코드, 데이터 URI, React 컴포넌트 또는 CSS에서 색을 가져오는 Tailwind용 SVG로 복사하세요.

브라우저에서만 실행되는 전문가용 SVG 편집기

Tools 4 All의 SVG 편집기는 다운로드, 계정, 업로드 없이 즉시 열리는 완전한 벡터 그래픽 애플리케이션입니다. 로고, 아이콘, 일러스트, 다이어그램, UI 애셋을 그리거나, 이미 가진 SVG 파일을 정리하고 다듬는 데 사용하세요. SVG 형식 자체를 중심으로 만들어져 내보내는 파일이 편집한 바로 그 문서입니다. 독점 형식도, 숨겨진 변환도 없습니다.

할 수 있는 일

  • 정밀하게 그리기: 베지어 곡선 펜 도구, 매끄럽게 다듬는 자유형 연필, 모서리별로 둥글게·모따기·안쪽으로 만들 수 있는 사각형, 타원, 선, 블롭 브러시, 지우개, 칼과 가위, 그리고 편집 가능한 도형: 다각형, 별, 삼각형, 십자, 프레임, 링, 파이, 초승달, 화살표, 말풍선, 톱니바퀴, 하트, 구름, 꽃, 나선, 텍스트.
  • 노드 단위로 패스 편집: 노드와 핸들 이동, 모서리·부드러운·대칭 노드 간 변환, 노드 추가 및 삭제, 패스 연결 및 끊기, 세그먼트 직접 구부리기, 핸들을 접선에 스냅.
  • 도형 결합: 합치기, 빼기, 교차, 제외, 나누기, 그리고 선 윤곽선, 패스 오프셋, 단순화, 방향 반전. 모두 백그라운드 워커에서 곡선을 유지하는 자체 기하 엔진으로 계산합니다.
  • 모든 것에 스타일 적용: 단색, 캔버스 위 핸들이 있는 선형 및 방사형 그레이디언트, 패턴, 칠과 선별 불투명도, 대시, 끝 모양, 연결, 화살촉 마커, 블렌드 모드, 흐림 및 그림자 효과, 클리핑 패스와 마스크.
  • 정리하기: 끌어서 순서 바꾸기, 이름 바꾸기, 중첩이 가능한 레이어 패널, 잠금 및 숨기기, 그룹 및 그룹 해제, 선택 영역·아트보드·기준 개체에 맞춘 정렬 및 분포, 문서 견본과 재사용 가능한 심볼.
  • 프로처럼 작업: 거리 레이블과 등간격 힌트가 있는 스마트 안내선, 격자·픽셀·눈금자 안내선·노드·패스에 스냅, 숫자 X/Y/W/H/회전 필드, 무제한 실행 취소, Figma 및 Illustrator 스타일 단축키.
  • 코드와 내보내기: 양방향 SVG 코드 보기, 크기가 표시되는 최적화된 SVG 내보내기, 모든 배율의 PNG/JPEG/WebP, 그리고 SVG, 데이터 URI, React(JSX 또는 TSX), Tailwind SVG 또는 CSS 배경으로 복사.
  • 웹 제작용: 클릭 한 번으로 바꾸고 currentColor로 변환할 수 있는 문서 색상, 텍스트를 윤곽선으로, 선 윤곽선, 변형 병합 및 그룹 해제, 캔버스를 내용에 맞추기, 지저분한 패스 단순화.
  • 진짜 작업 공간: 각각 실행 취소 기록이 있는 여러 탭의 그림, 하위 메뉴가 있는 짧은 메뉴, 접을 수 있는 사이드 패널(Ctrl/⌘+B), 휴대폰과 데스크톱에서 전체 화면 편집.

SVG 네이티브 편집기가 중요한 이유

많은 디자인 도구는 SVG를 내보내기 형식으로 취급합니다. 자체 모델에서 그리고, 마지막에 SVG를 생성하죠. 간단한 아이콘에는 괜찮습니다. 하지만 기존 파일을 편집하거나, CSS나 JavaScript가 의존하는 id를 유지하거나, 파일이 왜 열 배나 큰지 알아야 할 때는 무너집니다. 이 편집기는 SVG 문서를 직접 다룹니다. 그룹은 그룹으로, 그레이디언트는 그레이디언트로 남고, 다섯 번 사용된 <symbol>은(는) 하나의 심볼로 유지됩니다. 레이어 이름을 바꾸면 요소의 id을(를) 설정하는 것입니다.

큰 파일에서도 빠름

속도는 첫 코드 줄부터 설계 목표였습니다. 그림은 격리된 레이어 안에서 브라우저가 네이티브로 렌더링합니다. 선택 핸들, 호버 윤곽선, 안내선은 별도 오버레이에 그려지므로 마우스를 움직여도 문서는 건드리지 않습니다. 공간 인덱스(R-tree)가 수만 개의 도형이 있어도 마이크로초 만에 포인터 아래의 것을 찾습니다. 무거운 문서에서는 이동과 확대/축소를 GPU 컴포지터에 맡기고, 멈추면 벡터를 선명하게 다시 렌더링합니다. 불리언 연산, 패스 오프셋, SVG 최적화 같은 무거운 작업은 Web Worker에서 실행되어 인터페이스가 계속 반응합니다.

벡터 작업을 위한 정밀 도구

펜 도구로 클릭하여 모서리를, 끌어서 부드러운 곡선을 만드세요. Shift을(를) 누르면 45° 각도를 유지하고 Alt을(를) 누르면 핸들을 끊습니다. 노드 도구로 세그먼트를 끌어 구부리거나, 더블클릭하여 노드를 추가하거나, 여러 노드를 선택해 정렬할 수 있습니다. 스마트 안내선은 개체가 이웃의 가장자리나 중심과 맞을 때, 그리고 개체 간 간격이 같을 때 표시됩니다. 눈금자에서 안내선을 끌어낼 수도 있습니다. 정확한 값은 디자인 패널에 X, Y, 너비, 높이, 회전을 입력하세요. 필드에는 120+16이나 200/3 같은 계산식도 입력할 수 있습니다.

깔끔하고 작은 내보내기

편집기는 저장하는 파일에 메타데이터, 사용하지 않는 정의, 불필요한 그룹, 지나치게 정밀한 숫자를 남기는 경우가 많습니다. 내보내기 대화 상자는 백그라운드에서 SVGO 방식 최적화 도구를 실행합니다. 숫자를 선택한 정밀도로 반올림하고, 패스 데이터를 가장 짧은 형태로 변환하고, 편집기 메타데이터와 사용하지 않는 정의를 제거하고, id와 색상을 줄이고, 쓸모없는 그룹을 없앱니다. 각 최적화는 끌 수 있으며, 대화 상자에 전후 파일 크기가 표시됩니다. 래스터 출력은 PNG, JPEG 또는 WebP를 1×, 2×, 4× 또는 정확한 픽셀 크기로, 투명 배경 포함 여부를 선택해 내보낼 수 있습니다.

웹 제작을 위해 설계

웹사이트와 앱에 들어가는 SVG는 인쇄용 아트워크와 다른 것이 필요합니다. 문서 색상 목록에는 파일이 사용하는 모든 색상이 표시됩니다. 하나를 바꾸면 그 색을 공유하는 모든 것이 따라 바뀌고, currentColor(으)로 변환하면 React나 Tailwind 아이콘이 CSS에서 색을 가져옵니다. 가져온 파일에는 패스를 편집하기 어렵게 만드는 중첩 그룹과 변형이 있는 경우가 많습니다. 변형 병합 및 그룹 해제는 한 번에 이를 좌표에 반영하고, 내용에 맞추기는 viewBox를 선을 포함한 아트워크에 맞게 자릅니다. 텍스트를 윤곽선으로와 선 윤곽선은 글자와 선 두께를 어디서나 똑같이 보이는 일반 패스로 바꾸고, 단순화는 따라 그리거나 손으로 그린 도형에서 수백 개의 점을 줄여 줍니다.

파일은 기기에 그대로 남습니다

편집기 뒤에는 서버가 없습니다. 파일을 열면 디스크에서 페이지로 읽어 들이고, 내보내기는 기기에서 파일을 생성합니다. 자동 저장은 브라우저의 비공개 IndexedDB 저장소에 기록되며, 최근 파일 목록도 여기에 보관됩니다. 실수로 탭을 닫아도 다음에 방문하면 마지막 문서가 복원됩니다.

더 많은 이미지 도구 살펴보기

자주 묻는 질문

이 SVG 편집기는 정말 무료이고 비공개인가요?
네. 무료이고, 계정이 필요 없으며, 100% 브라우저에서 실행됩니다. 그림은 절대 업로드되지 않습니다. 파일은 로컬에서 읽고, 자동 저장은 브라우저 자체 저장소(IndexedDB)에 하며, 내보내기는 기기에서 생성됩니다.
Illustrator, Inkscape, Figma 또는 아이콘 라이브러리의 SVG 파일을 열 수 있나요?
네. 편집기는 SVG 문서를 직접 다루므로 실제 파일의 구조, id, 스타일, 그레이디언트, 심볼, 클립 패스, 마스크가 유지됩니다. 지저분하거나 잘못된 파일은 열면서 복구되고, 편집하는 동안 스크립트는 비활성화되며, .svgz 파일은 자동으로 압축 해제됩니다.
Illustrator처럼 펜 도구와 불리언 연산이 있나요?
네. 펜 도구는 모서리, 부드러운, 대칭 노드로 베지어 패스를 그리고, 노드 도구로 노드를 추가, 삭제, 변환, 연결, 끊기, 정렬할 수 있습니다. 합치기, 빼기, 교차, 제외, 나누기는 곡선에서 작동하며 곡선을 그대로 유지하고, 선 윤곽선, 오프셋, 패스 단순화도 할 수 있습니다.
SVG에 애니메이션을 넣을 수 있나요?
네. 애니메이션 작업 공간을 열고, 재생 헤드를 움직이고, 개체의 위치, 회전, 크기, 불투명도, 색상을 바꾸세요. 변경할 때마다 이징 곡선이 있는 키프레임이 되고, 이미 애니메이션된 속성에는 새 키프레임이 자동으로 추가됩니다. 애니메이션은 표준 SVG(SMIL)로 저장되어 스크립트 없이 모든 브라우저에서 재생됩니다.
SVG 코드를 직접 편집할 수 있나요?
네. 코드 패널에 구문 강조된 실시간 SVG 소스가 표시됩니다. 코드를 편집하면 그림이, 그림을 편집하면 코드가 업데이트됩니다. 어느 쪽에서 한 변경이든 실행 취소할 수 있습니다.
어떤 내보내기 형식을 지원하나요?
내장된 SVGO 방식 최적화 도구가 전후 크기를 표시하며 만드는 최적화된 SVG, 그리고 1×, 2×, 4× 또는 사용자 지정 크기의 PNG, JPEG, WebP(투명도 선택 가능). 선택 항목을 SVG 코드, 데이터 URI 또는 React용 JSX로 복사할 수도 있습니다.
브라우저가 닫히면 작업을 잃나요?
아니요. 문서는 변경할 때마다 잠시 후 브라우저 로컬 저장소에 자동 저장됩니다. 다음에 편집기를 열면 마지막 세션이 복원되고, 이전 문서는 파일 → 최근 파일에서 계속 사용할 수 있습니다.
React나 Tailwind용으로 아이콘이 currentColor를 쓰게 할 수 있나요?
네. 문서 색상 섹션에 그림의 모든 색상이 나열됩니다(같은 색의 각 표기는 한 번만 셉니다). 견본을 클릭하면 그 색을 쓰는 모든 것을 선택해 한 번에 바꿀 수 있고, currentColor로 변환을 선택하면 아이콘이 Tailwind text-… 클래스 같은 CSS에서 색을 가져오면서 편집기에서는 모양을 유지합니다. 편집 메뉴나 컨텍스트 메뉴에서 React 컴포넌트나 Tailwind SVG로 복사하세요.
텍스트를 패스로, 선을 칠한 도형으로 변환하려면 어떻게 하나요?
텍스트를 선택하고 텍스트를 윤곽선으로(Ctrl/⌘+Shift+O)를 선택하세요. 패스 위 텍스트와 스타일이 적용된 범위를 포함해 모든 글리프가 브라우저가 그린 바로 그 자리에서 패스가 됩니다. 선의 경우 선 윤곽선이 너비, 끝 모양, 연결, 대시에 맞는 칠한 도형으로 바꿔 주어 로고가 어떤 크기에서도 두께를 유지합니다.
변형과 중첩 그룹이 있는 가져온 SVG를 정리할 수 있나요?
네. 변형 병합 및 그룹 해제는 모든 변형을 패스 좌표에 기록하고 한 번의 실행 취소 단계로 그룹을 해체하며, 모양이 바뀌는 경우(클립, 마스크 또는 참조된 그룹)만 남깁니다. 내용에 맞추기는 캔버스(viewBox, 너비, 높이)를 선을 포함한 아트워크에 맞게 자르며 여백을 선택할 수 있고, 단순화는 지저분한 패스의 점 수를 줄입니다.
여러 그림을 동시에 작업할 수 있나요?
네. 각 그림은 캔버스 위의 자체 탭에서 열리며, 각각 실행 취소 기록, 선택, 확대/축소가 있습니다. 자유롭게 전환하세요. 탭을 닫아도 파일은 파일 → 최근 파일에 남고, 열린 탭은 다음에 방문할 때 돌아옵니다.
명령은 다 어디 있나요? 메뉴가 짧은데요.
관련 명령은 하위 메뉴(정돈, 변형, 패스, 클립 및 마스크, 다른 형식으로 복사, 정렬 및 분포…)에 있습니다. 마우스를 올리거나 탭하거나 화살표 키를 사용하세요. 모든 명령에는 단축키도 있습니다. ?를 누르면 전체 목록을 볼 수 있습니다. 데스크톱에서는 Ctrl/⌘+B로 사이드 패널을 접어 캔버스 공간을 넓힐 수 있습니다.
휴대폰과 태블릿에서도 작동하나요?
네. 작은 화면에서는 도구가 하단 도구 모음으로 이동하고 패널은 시트로 열립니다. 핀치로 확대/축소, 두 손가락으로 끌어 이동, 길게 눌러 컨텍스트 메뉴를 엽니다.
그림은 얼마나 커도 되나요?
편집기는 무거운 파일을 위해 만들어졌습니다. 적중 테스트와 선택을 위한 공간 인덱스, 핸들과 안내선을 위한 별도 오버레이 레이어, 큰 문서에서 컴포지터만 사용하는 이동 및 확대/축소, 기하와 최적화를 위한 Web Worker를 사용합니다. 수만 개의 요소가 있는 문서도 반응성을 유지합니다.
모든 이미지 도구 →
이미지 압축기 시각적 품질을 유지하면서 이미지 파일 크기를 줄입니다. 이미지 변환기 PNG, JPEG, WebP, GIF, BMP, ICO, TIFF 등의 형식 간에 이미지를 변환합니다. 이미지 크기 조절기 이미지를 정확한 크기로 조절하세요. 여권 사진에 적합합니다. 이미지를 PDF로 하나 이상의 이미지를 하나의 PDF 문서로 합칩니다.