2025년 무료 온라인 벡터 이미지 편집기: SVGEdit 사용법

 

2025년 무료 온라인 벡터 이미지 편집기: SVGEdit 사용법

포토샵이나 일러스트레이터처럼 복잡하고 무거운 프로그램 없이도 간단한 로고, 아이콘, 벡터 이미지를 편집하고 싶을 때가 있다. 특히 SVG(Scalable Vector Graphics)는 고해상도를 유지하면서도 파일 크기가 작고 웹 호환성이 높아 최근 점점 많이 쓰인다. 이때 유용한 도구가 바로 SVGEdit이다.

SVGEdit는 웹브라우저에서 실행되는 오픈소스 기반의 SVG 벡터 편집기로, 별도 설치 없이 바로 사용 가능하다. 무료이면서도 직관적인 인터페이스와 충분한 기능을 제공해, 간단한 로고 수정이나 벡터 그래픽 생성에 적합하다.

---

1. 접속 방법

• 주소: https://svg-edit.github.io/svgedit/releases/latest/editor/svg-editor.html
• 별도 회원가입이나 로그인 없이 곧바로 사용 가능

모바일보다는 데스크톱 브라우저(크롬, 파이어폭스 등)에서 사용할 때 UI가 안정적으로 작동한다.

---

반응형

2. 주요 기능 요약

• SVG, PNG 파일 불러오기 및 저장
• 펜 도구, 선, 사각형, 원, 다각형, 텍스트 등 벡터 도형 생성
• 색상, 선 두께, 채우기 색 등 스타일 설정
• 그룹/해제, 정렬, 순서 변경 등 레이어 기능
• 드래그 앤 드롭으로 위치 및 크기 조절
• HTML 내 SVG 코드 직접 편집 가능
• 완성된 SVG를 코드 형태로 추출 가능

---

3. 기본 사용법

1. 파일 열기
   • 메뉴 > File > Import SVG로 기존 SVG 파일 불러오기 가능
   • 혹은 새롭게 그리기를 시작하려면 빈 캔버스에서 시작
2. 도형 그리기
   • 왼쪽 툴바에서 사각형, 원, 텍스트 등 선택하여 클릭 후 드래그
   • 객체 선택 후 상단의 색상, 굵기, 투명도 조절 가능
3. 텍스트 삽입
   • A 아이콘을 클릭한 후 원하는 위치 클릭
   • 글자를 입력하고 크기, 폰트, 색상 설정
4. 객체 정렬 및 순서 변경
   • 여러 개의 객체를 Shift로 선택 후 상단 메뉴에서 정렬(Align) 가능
   • Send to back / Bring to front 기능으로 레이어 순서 조정 가능
5. 저장 및 내보내기
   • 메뉴 > File > Save as SVG 또는 Save as PNG
   • SVG로 저장하면 향후 재편집 가능, PNG는 비트맵 이미지로 다운로드됨
6. 코드 확인/수정
   • 메뉴 > Edit > SVG Source를 통해 XML 형식의 SVG 코드 직접 편집 가능
   • 간단한 애니메이션이나 클래스 부여도 가능함

---

4. 활용 예시

• 심플한 로고 제작
• 아이콘 디자인 또는 수정
• 인포그래픽 요소 편집
• 웹사이트용 일러스트 작업
• 유튜브 썸네일용 장식 SVG
• 기술 문서 내 벡터 도형 제작

---

5. 장점 및 한계

장점

• 100% 무료, 오픈소스
• 설치 필요 없음
• SVG 코드 수정까지 가능
• 익숙한 포토샵/일러스트와 유사한 UI

한계

• 고급 벡터 기능(메쉬, 브러시 등)은 없음
• 한글 텍스트 입력 시 일부 브라우저에서 폰트 깨질 수 있음
• 작업 중간에 저장 기능이 없으므로 수시로 내보내기 필요

---

6. 대안 도구 비교

도구	설치 필요	가격	기능 수준	특징
SVGEdit	X	무료	기본 수준	빠르고 가벼움, 오픈소스
Figma	X	무료/유료	중급 이상	협업 기능 강력
Inkscape	O	무료	고급	설치 필요, 강력한 기능
Vectr	X	무료	기본 수준	깔끔한 인터페이스, 온라인 저장

---

마무리

SVGEdit는 설치 없이 바로 쓸 수 있는 가볍고 직관적인 벡터 이미지 편집 도구다. 전문 디자이너에게는 다소 기능이 부족할 수 있으나, 간단한 작업이나 SVG 구조 파악, 코드 기반 벡터 다듬기에는 오히려 이상적이다. 로고나 아이콘 수정이 필요할 때, 일러스트레이터를 켜기 전에 SVGEdit를 먼저 한 번 열어보는 것을 추천한다.