클릭해서 올리기, 또는 SVG를 끌어다 놓으세요
SVG 한 개 — 브라우저에서 읽고 다시 자르며, 업로드하지 않습니다SVG를 자른다는 것
SVG는 테두리가 있는 그림이 아닙니다. 그림에 viewBox가 더해진 것입니다. viewBox란 좌표 공간의 어느 부분을 보여 줄지 알려 주는 네 개의 숫자입니다.
여백은 바로 그 네 숫자에서 나옵니다. 512 × 512로 내보냈고 모양이 가운데 있는 아이콘은 사방이 비어 있고, 크기를 아무리 바꿔도 그 여백은 사라지지 않습니다. 파일을 줄이면 여백도 같이 줄어들 뿐입니다. 로고는 여전히 제 상자 한가운데에 떠 있고, 여전히 옆의 글자와 줄을 맞춰 주지 않습니다.
이 도구는 viewBox만 바꿉니다. 그림이 실제로 어디서 시작해서 어디서 끝나는지 알아내고, 거기에 딱 맞게 상자를 조인 뒤 SVG로 돌려줍니다. 같은 패스, 같은 그러데이션, 같은 그룹이, 몸에 맞는 상자에 담겨 나옵니다.
코드가 아니라 그림을 봅니다
SVG의 가장자리를 찾는 가장 뻔한 방법은 모든 도형의 경계 상자를 브라우저에 물어보는 것입니다. 그런데 그 방법은 아주 흔한 두 가지 경우에 틀립니다. 그리고 사람들이 이런 도구를 찾아오는 이유가 바로 그 두 가지입니다.
- 흰 배경 사각형. 그것도 도형이니 계산에 들어가고, 그래서 경계 상자는 캔버스 전체가 되며, 아무것도 잘리지 않습니다.
- 흐림과 그림자. 필터는 그것을 만든 도형보다 훨씬 바깥까지 그리므로, 기하학적 경계 상자는 부드러운 가장자리를 잘라 냅니다.
그래서 이 도구는 SVG를 먼저 그린 다음 그 결과를 봅니다. 여러분의 눈이 하는 것과 같은 방식입니다. 흰 사각형은 비어 있는 것으로 읽고, 그림자는 내용으로 읽어 남깁니다. 보이는 것이 곧 재는 대상입니다.
투명 또는 흰색
- 투명 또는 흰색 *(보통 이것)* — 여러분이 「비어 있다」고 말할 만한 것은 모두 사라집니다. 완전히 투명한 픽셀도, 흰 픽셀도 마찬가지입니다. 흰 아트보드에서 내보낸 아이콘이나, 뒤에 흰 판이 깔린 로고에 알맞습니다.
- 투명만 — 흰색을 그림의 일부로 다룹니다. 흰색이 정말로 디자인일 때 쓰세요. 흰색 워드마크, 반드시 남아야 하는 흰 배경, 어두운 페이지에 올릴 그림 같은 경우입니다.
허용치는 얼마나 비어 있는 것에 가까워야 비어 있다고 볼지를 정합니다. 내보낸 파일이 순수한 경우는 드뭅니다. 배경이 #fefefe일 수도 있고, 가장자리가 아주 살짝 비칠 수도 있습니다. 아무것도 잘리지 않으면 허용치를 올리고, 그림의 옅은 부분이 잘렸다면 내리세요.
여백에 대하여
남길 여백은 고른 만큼의 공간을 네 방향에 되돌려 줍니다. 단위는 SVG 자체의 단위, 곧 viewBox가 쓰는 것과 같은 숫자입니다.
0으로 두면 가장 빈틈없는 상자가 됩니다. 버튼 속 아이콘이나 격자에 놓는 로고처럼, 간격은 레이아웃이 정해야 하는 경우에 알맞습니다. 여백을 조금 더할 만한 경우는 두 가지입니다. 그림에 선 두께가 있어 바짝 자르면 깎여 나갈 때, 그리고 이 파일이 또 한 번 잘릴 곳으로 갈 때입니다.
너비와 높이도 따라옵니다
SVG에 width와 height 속성이 있었다면, 상자와 같은 비율로, 적혀 있던 단위 그대로 조절됩니다. 100 mm 캔버스 안에서 너비가 40 mm였던 그림은 그대로 40 mm로 나옵니다.
이것이 중요합니다. 즉 잘라도 그림의 크기는 달라지지 않습니다. 사라지는 것은 주위의 빈 공간뿐입니다. width와 height가 없던 SVG는 없는 채로 남아, 담기는 곳에 맞춰 계속 늘어나고 줄어듭니다.
업로드는 없습니다
파일은 여러분의 브라우저 안에서 읽히고, 그려지고, 다시 쓰입니다. 서버에 닿는 일이 없습니다. 아직 공개하지 않은 로고, 고객의 브랜드 마크, 비밀 유지 계약이 걸린 작업물이라면 바로 이 점이 핵심입니다.
업로드 대기도 용량 제한도 없고, 페이지만 열렸다면 오프라인에서도 동작합니다.
이럴 때 씁니다
- 고정된 아트보드로 내보내서 버튼 안에서 줄이 맞지 않는 아이콘
- 뒤에 흰 판이 있는데 색이 있는 머리글 위에 올려야 하는 로고
- 피그마, 일러스트레이터, 잉크스케이프에서 캔버스째로 나온 작업물
- 글리프마다 빈틈없는 상자가 필요한 스프라이트 시트나 아이콘 폰트용 SVG
- 파일의 상자가 곧 재료가 되는 커팅 기기나 레이저용 도면
- 각각을 제 내용에 맞춰 잘라 아이콘 세트의 줄을 맞출 때
알아두면 좋은 점
- 자르기는 그려진 결과에서 재므로 정밀도는 대략 그려진 픽셀 하나만큼입니다. 깎여 나가지 않도록 상자를 아주 조금 넓혀 둡니다
- 원래 viewBox 바깥에 그려져 있던 것은 이미 보이지 않던 것이고, 그대로 바깥에 남습니다
- 살아 있는 텍스트는 브라우저에 있는 글꼴로 잽니다. 정확히 맞아야 한다면 먼저 패스로 바꾸세요
- 다른 파일을 가리키는 <image>나 참조는 여기서 그릴 수 없으므로 계산에 들어가지 않습니다
- 주석, <defs>, 메타데이터, id가 모두 살아남습니다 — 이것은 다시 자르는 일이지 정리하는 일이 아닙니다
- 비트맵을 자르려면 이미지 자르기를 쓰세요. 여백 자동 제거도 됩니다
- 결과를 PNG로 만들려면 SVG를 PNG로를 쓰세요
사용 방법
- 클릭해서 올리기를 누르거나, SVG를 상자에 끌어다 놓으세요
- 자르기는 바로 계산됩니다 — 왼쪽의 점선 테두리가 남길 범위입니다
- 흰색이 디자인의 일부가 아니라면 투명 또는 흰색을 그대로 두세요
- 아무것도 잘리지 않으면 허용치를 올리고, 옅은 부분이 잘렸다면 내리세요
- 네 방향에 공간을 남기고 싶다면 여백을 정하세요
- SVG 내려받기를 누르거나, SVG 코드 복사로 페이지에 바로 붙여 넣으세요
