클릭해서 올리기, 또는 로고·아이콘·그림을 끌어다 놓으세요
PNG, JPG, WebP, GIF — 브라우저에서 처리되며 업로드되지 않습니다이미지를 SVG로 만든다는 것
PNG는 픽셀이 늘어선 격자입니다. 키우면 픽셀이 커질 뿐입니다. SVG는 수학으로 표현된 도형의 모음이라, 어떤 크기에서도 또렷합니다. 명함에서도, 옥외 광고판에서도, 아직 세상에 없는 화면에서도 마찬가지입니다.
문제는 SVG가 손에 없다는 것입니다. 누군가 400 px짜리 PNG로 보내 준 로고가 있을 뿐인데, 이제 그걸 간판에 올려야 합니다.
이 도구는 그림을 도형으로 따라 그립니다. 색과 색 사이의 경계를 찾아 그 위에 진짜 벡터 패스를 그립니다. 그래서 나오는 것은 제대로 된 SVG이고, 키우고 색을 바꾸고 어떤 디자인 프로그램으로든 열 수 있습니다.
따라 그리기로 되는 것과 안 되는 것
따라 그리기는 원본 파일을 되살리는 일이 아닙니다. 보이는 것의 둘레를 그리는 일이고, 결과는 무엇을 넣느냐에 전적으로 달려 있습니다.
잘 되는 것:
- 단색 면으로 된 로고와 워드마크
- 아이콘, 기호, 픽토그램
- 선 그림, 스케치, 펜화
- 도표, 지도, 평면도
- 스텐실, 실루엣, 도장
사진에는 맞지 않습니다. 사진에는 색과 색 사이의 깨끗한 경계가 없고, 서서히 변하는 경계만 수백만 개 있습니다. 그걸 따라 그리면 작은 색 덩어리 수천 개가 됩니다. 형식상 SVG이지만 보통 원본 사진보다 *크고*, 쓸 데가 없습니다. 이 도구는 사진으로 보이는 이미지를 알아채고, 쏟은 물감 같은 12 MB 파일을 건네는 대신 그 사실을 알려 줍니다.
설정
먼저 어떤 그림인지 고르세요. 로고 또는 아이콘, 선 그림, 세밀한 그림. 이는 세 개의 슬라이더를 알맞은 출발점에 놓아 줄 뿐이고, 이후에는 직접 조정할 수 있습니다.
- 색의 개수가 가장 중요합니다. 따라 그리기는 그림을 작은 팔레트로 줄인 뒤 각 영역의 둘레를 그리는 방식입니다. 두 가지 색 로고를 8색으로 따라 그리면 안티에일리어싱 테두리까지 별도의 도형으로 주워 옵니다. 2색으로 하면 깔끔하게 나옵니다. 색은 많은 것보다 적은 쪽이 거의 항상 낫습니다.
- 매끄러움은 안티에일리어싱이 가장자리에 남긴 울퉁불퉁함을 펴 줍니다. 윤곽이 너덜너덜하면 올리고, 진짜 세부가 뭉개지면 내리세요.
- 세부는 얼마나 작은 도형까지 버릴지를 정합니다. 점 같은 잡티와 노이즈를 버리려면 내리고, 복잡한 그림의 가는 특징을 남기려면 올리세요.
따라 그리고, 오른쪽 결과를 보고, 조정하고, 다시 따라 그리세요. 한 번에 몇 초면 됩니다.
배경 빼기
배경 빼기를 켜면 그림 뒤에 있는 커다란 단색 도형을 버리므로, SVG의 배경이 흰 사각형이 아니라 투명해집니다.
남의 페이지나 색이 있는 머리글 위에 올려야 하는 로고라면 이걸 쓰세요. 배경 자체가 디자인의 일부라면 꺼 두세요.
쓰기 전에 가장자리를 확인하세요
오른쪽 결과 화면을 확대해 보세요. 날카로워야 할 모서리, 매끄러워야 할 곡선, 그리고 작은 글자. 따라 그리기의 한계가 드러나는 곳은 바로 여기입니다.
거의 맞는데 어수선하다면 먼저 색의 개수를 줄여 보세요. 원본이 아주 작은 이미지라면, 애초에 없던 세부를 따라 그리기가 짐작할 수밖에 없습니다. 64 px 파비콘이 선명한 로고가 되지는 않습니다.
업로드는 없습니다
이미지는 여러분의 브라우저 안에서 읽히고 변환됩니다. 서버에 닿는 일이 없습니다. 아직 공개하지 않은 로고, 고객의 브랜드 마크, 비밀 유지 계약이 걸린 작업물이라면 중요한 부분입니다.
용량 제한도 대기 시간도 없다는 뜻이기도 합니다. 아주 큰 이미지는 변환 전에 줄입니다. 일정 지점을 넘으면 추가된 픽셀이 세부가 아니라 노이즈만 늘리기 때문입니다.
이럴 때 씁니다
- PNG로만 남아 있는 로고를 간판이나 인쇄에 써야 할 때
- 코드에서 색을 바꾸거나 크기를 조절해야 하는 아이콘
- 커팅, 각인, 자수를 위해 준비하는 스케치나 선 그림
- 커팅 플로터나 레이저용 스텐실이나 실루엣
- 도표를 편집할 수 있는 형태로 바꿀 때
- 어떤 화면에서도 선명한 웹사이트용 SVG가 필요할 때
알아두면 좋은 점
- SVG에 제대로 된 viewBox가 들어 있어, CSS나 HTML에서 너비를 지정해도 올바르게 확대·축소됩니다
- SVG 코드 복사를 누르면 마크업이 클립보드에 들어가, 페이지나 컴포넌트에 바로 붙여 넣을 수 있습니다
- 결과는 일러스트레이터, 잉크스케이프, 피그마, 어피니티에서 열리고 패스를 직접 손볼 수 있습니다
- 도형이 수천 개라는 것은 도구가 실패한 게 아니라 이 이미지에 설정이 맞지 않다는 뜻입니다. 색을 줄이세요
- 사진의 배경을 지우려는 것이라면 배경 지우기를 쓰세요
사용 방법
- 클릭해서 올리기를 누르거나, 로고나 그림을 상자에 끌어다 놓으세요
- 어떤 그림인지 고르세요: 로고 또는 아이콘, 선 그림, 세밀한 그림
- 따라 그리기를 누르고 오른쪽 결과를 보세요
- 가장자리가 지저분하면 색의 개수부터 조정한 뒤 다시 따라 그리세요
- 투명한 배경이 필요하면 배경 빼기에 체크하세요
- SVG 내려받기를 누르거나, SVG 코드 복사로 페이지에 바로 붙여 넣으세요
