도형과 별 그리기
사각형, 원, 직선, 자유 곡선을 그려요. 별과 다각형을 넣고, 선 끝에 화살표를 달고, 도형 라이브러리에서 기호를 골라 쓸 수도 있어요.
무료 온라인 SVG 편집기
온라인 벡터 편집기
SVG 파일을 열어 도형을 고치고, 색을 바꾸고, 텍스트를 한 줄 넣어 보세요. SVG 편집 도구를 설치할 필요 없이 브라우저에서 바로 쓸 수 있어요.
무료, 회원가입 없음파일은 내 기기에워터마크 없음
나만의 벡터 작업 공간
파일은 내 기기에 그대로 보관돼요
정밀하게 편집하려면 큰 화면이 좋아요. 여기서는 작업 공간을 가로로 스크롤할 수 있어요.
작업 공간을 준비하고 있어요…
SVG-Edit 메뉴에서 파일을 열거나 저장하세요. 도구를 고르면 바로 그릴 수 있어요.
SVG-Edit 기반사용 방법
온라인 벡터 편집기로 SVG 편집하는 방법
이 페이지 안에서 세 단계면 끝나요. 회원가입은 필요 없어요.
01
SVG 파일 열기
편집기 메인 메뉴에서 "Open SVG"를 눌러 컴퓨터에 있는 파일을 고르세요. 아직 파일이 없다면 예제를 불러오거나 800 × 600 빈 캔버스에서 시작하면 돼요.
02
원하는 대로 고치기
객체를 클릭해 선택하세요. 채우기나 선 색을 새로 고르고, 노드를 끌어 곡선 모양을 바꾸고, 텍스트를 클릭해 내용을 고치면 돼요. 실수했다면 Ctrl+Z(Mac은 Cmd+Z)를 누르세요.
03
SVG로 저장하기
같은 메뉴에서 "Save SVG"로 저장하면 파일이 다운로드돼요. 도형, 패스, 텍스트는 계속 편집할 수 있고, 크기를 키워도 가장자리가 선명해요.
할 수 있는 일
무료 SVG 편집기에 들어 있는 도구
로고, 아이콘, 다이어그램을 만들 때 쓰세요. 이미 있는 파일을 잠깐 손볼 때도 좋아요.
패스 노드 편집
패스 도구로 곡선을 그린 다음 노드와 핸들을 하나씩 움직여 보세요. 노드를 추가하거나 지울 수 있고, 어떤 도형이든 패스로 바꿀 수 있어요.
색은 채우기와 선을 따로
채우기 색과 선 색을 따로 정하고, 그라데이션, 선 두께, 점선, 불투명도도 바꿔요. 스포이트를 쓰면 한 객체의 스타일이 다른 객체로 그대로 복사돼요.
언제든 고칠 수 있는 텍스트
텍스트를 넣고 크기, 굵기, 정렬, 간격을 바꿔요. 글꼴은 내 기기에 설치된 것을 쓰기 때문에 다른 컴퓨터에서는 다르게 보일 수 있어요.
레이어로 정리하기
그림을 부분별로 레이어에 나눠 두세요. 객체를 묶거나 정렬하고, 간격을 고르게 맞추고, 앞으로 가져오거나 뒤로 보낼 수 있어요.
크기와 각도 바꾸기
객체를 끌어 옮기고, 핸들을 끌어 크기와 각도를 바꾸거나 X, Y, 너비, 각도 값을 직접 입력하세요. 뒤집기도 돼요. 마음에 안 들면 실행 취소로 되돌리고, 다시 실행으로 되살리면 그만이에요.
SVG 코드 직접 고치기
소스 보기를 열면 SVG 코드를 읽고 손으로 바꿀 수 있어요. ID나 viewBox처럼 화면 도구로는 손대기 어려운 부분도 여기서는 고쳐져요.
그리드와 확대
그리드를 켜면 간격 맞추기가 쉬워지고, 확대하면 작은 부분까지 보여요. 연결선은 두 도형을 이어 주는데, 도형을 옮겨도 떨어지지 않아요.
다른 파일 가져오기
다른 디자인 프로그램에서 저장한 SVG도 열려요. 필터와 효과는 저장하기 전에 한 번 확인하세요. "Import"를 쓰면 다른 SVG나 PNG, JPG를 지금 작업 중인 그림 안에 넣을 수 있어요.
SVG 파일이란 무엇이고, 왜 벡터로 편집할까요?
SVG는 Scalable Vector Graphics의 줄임말이에요. 픽셀을 저장하는 대신 도형, 선, 곡선, 텍스트를 명령어 형태로 담고 있어서, 브라우저가 필요한 크기에 맞춰 매번 새로 그려요.
그래서 SVG로 저장한 카페 로고는 휴대폰 화면에서도, 매장 앞 현수막에서도 선명해요. 나중에 색 하나, 곡선 하나만 바꾸기도 쉽고요. JPG였다면 픽셀 위에 덧칠해야 했을 거예요.
프로그램을 따로 설치하지 않아도 온라인 벡터 편집기에서 이런 수정을 바로 할 수 있어요. 파일을 열고 고칠 곳만 고친 뒤 다시 SVG로 저장하면 끝이에요.
키워도 선명해요
16px 아이콘을 배너 크기로 키워도 흐려지지 않아요.
속은 텍스트예요
SVG는 메모장 같은 텍스트 편집기로도 열리는 코드예요.
나중에 고치기 쉬워요
도형, 색, 텍스트 하나하나가 따로 남아 있어요.
이런 분들이 써요
누가 쓰는 편집기인가요?
아이콘과 로고를 다듬는 디자이너
어두운 배경에 맞게 로고 색을 바꾸거나, 얇은 선을 두껍게 하거나, 아이콘에 남은 쓸데없는 도형을 지운 뒤 넘겨주세요.
웹용 SVG를 정리하는 개발자
숨은 레이어를 지우고, 소스 보기에서 viewBox와 ID를 확인하고 고친 뒤 SVG로 저장하세요.
커팅기 도안을 만드는 공예인
커팅기 프로그램에 넣기 전에 색깔별로 레이어를 나누고, 칼날로 자르기엔 너무 작은 부분을 지우고, 크기를 맞춰 두세요.
학생과 선생님
발표 자료나 학습지에 들어갈 다이어그램, 라벨, 간단한 그림을 그릴 수 있어요. 프로그램을 설치할 수 없는 학교 컴퓨터에서도 돼요.
이 온라인 SVG 편집기로 할 수 있는 것과 없는 것
시작하기 전에 되는 것과 안 되는 것을 먼저 확인하세요.
되는 작업
- SVG 파일 열기, 편집, 저장
- 아이콘, 로고, 배지, 다이어그램, 간단한 일러스트
- 색상, 선, 텍스트, 패스 모양 바꾸기
- SVG 소스 코드 직접 고치기
안 되는 작업
- PNG, JPG, PDF로 저장하기. 이 페이지는 SVG로만 저장해요.
- AI, EPS, PDF 파일 바로 열기. 먼저 SVG로 내보내 주세요.
- 사진을 벡터 도형으로 바꾸기. 이건 이미지 벡터화 도구에서 하세요.
- 자동 저장. 탭을 닫기 전에 SVG로 저장해 두세요.
아직 SVG 파일이 없나요?
이미지나 아이디어에서 먼저 SVG를 만든 다음, 결과물을 여기서 열어 고치세요.