이미지의 윤곽을 SVG로 따는 방법

짧은 답

이미지를 SVG로를 열고 이미지를 떨어뜨린 뒤 빨간 선을 보세요. 그 선이 지금의 윤곽선이고, 그것이 나온 픽셀 위에 겹쳐 그려집니다. 형태를 따라가고 있으면 파일을 받으면 됩니다. 있으면 안 되는 것이 들어 있으면 — 얼룩, 스테이플, 캡션, 그림자 — 그것을 클릭하세요. 사라집니다.

아래는 전부 이 일이 되느냐 마느냐를 가르는 두 질문에 관한 것입니다. 내 이미지가 형태인가, 사진인가, 그리고 형태를 찾는 두 방법 중 어느 쪽이 필요한가.

윤곽 따기는 변환이 아니고, 사진은 따지지 않습니다

JPEG를 PNG로 바꾸는 것은 변환입니다. 같은 이미지를 다른 방식으로 적을 뿐, 도중에 아무것도 결정되지 않습니다. 윤곽 따기는 그렇지 않습니다. 거의 전부를 버리고 한 가지 — 형태의 경계 — 만 남긴 다음, 그 경계를 곡선으로 적습니다. 이미지에 뚜렷한 형태 하나가 들어 있다면 정확히 원하던 것입니다. 방 사진이라면 남길 형태가 없고, 돌아오는 것은 비슷한 색의 덩어리 하나하나가 제각기 얼룩이 된 것입니다.

이건 언젠가 기술로 풀릴 한계가 아니므로, 숫자가 어떤지 솔직하게 말해 둘 만합니다. 선화 A4 한 장은 형태 세 개, 6킬로바이트로 따집니다. 손글씨 한 장은 형태 쉰 개, 150킬로바이트. 사진은 단 1메가픽셀이 형태 4천 개, 1.5메가바이트로 따집니다. JPEG보다 크고, 느리게 열리고, 사진처럼 보이지도 않습니다. 그 지점에서 도구는 그리기를 멈추고 그렇게 말합니다. 내려받은 뒤에 알게 두는 대신에요.

잘 따지는 것:

• 로고, 마크, 모노그램;
• 스텐실, 도장, 커팅 파일;
• 서명과 손글씨 레터링;
• 선화, 해칭, 만화 펜선;
• 실루엣, 그리고 이미 흰 바탕에 검은색인 모든 것.

사진으로 되는 일이 딱 하나 있는데, 그것은 다른 일입니다. 물건 하나를 배경에서 속이 찬 실루엣으로 오려 내는 것. 두 번째 설정이 바로 그 일을 위한 것입니다.

형태를 찾는 두 방법

윤곽 따기에는 픽셀당 1비트가 필요합니다 — 안이냐, 밖이냐 — 그리고 그것을 정하는 방법은 두 가지입니다.

밝고 어두움은 각 픽셀이 어떤 값보다 어두운지 묻고, 그 값은 대신 계산해 드립니다. 종이 위 잉크에는 딱 맞고, 모든 로고, 스캔, 스텐실에 원하는 방식입니다. 틀릴 때는 대개 눈에 보이게 틀립니다. 가는 선은 살아남고 종이는 같이 회색이 되지 않을 때까지 문턱값을 옮기세요.

피사체는 다른 질문을 던집니다. 사진에서는 첫 번째 질문에 답이 없기 때문입니다. 짙은 회색 돌 위에 선 짙은 붉은 상은 어두운 것 위의 어두운 것입니다. 둘을 가르는 밝기가 없으니 어떤 문턱값도 가르지 못합니다. 대신 이 방법은 이미지 가장자리를 따라 난 띠에서 배경이 무엇인지 배우고, 모든 픽셀을 거기에 견주어, 배경이 아닌 가장 큰 것을 남깁니다. 구석의 캡션은 가장 큰 것이 아니므로 따지는 대신 버려집니다.

미리 알아 둘 만한 실패가 하나 있습니다. 피사체가 두세 변으로 잘려 나갈 만큼 바짝 자른 사진입니다. 그러면 가장자리가 대부분 피사체라서 모델은 피사체 자신의 색을 배우고, 답은 안팎이 뒤집혀 나옵니다. 슬라이더를 만져서 될 일이 아닙니다 — 틀린 것은 산수가 아니라 전제니까요. 가장자리에서 배경 배우기를 끄고, 클릭으로 '이건 배경'이라고 알려 주기에 표시한 뒤, 배경을 두세 번 클릭하세요.

틀린 곳은 가리켜서 고칩니다

문턱값은 이미지 전체에 대한 숫자 하나이고, 늘 어딘가에서는 틀립니다. 그림자가 잉크가 되고, 스테이플이 살아남고, O의 가운데가 메워집니다. 하나 하나가 국지적인 오류이고 국지적인 뻔한 해법이 있는데, 그 해법은 슬라이더 하나 더가 아니라 — 그것을 가리키는 것입니다.

그림에 있으면 안 되는 것을 클릭하면 사라지고, 다시 클릭하면 돌아옵니다. 클릭 한 번이 그 색의 덩어리 전체를 잡으니, 한 번에 픽셀 하나가 아니라 얼룩 하나나 도장 하나가 통째로 빠집니다. 둘러싸인 배경 조각을 클릭하면 대신 그곳이 채워지고, 구멍이면 안 되는 구멍은 그렇게 메웁니다. 그림 아래 줄이 클릭하기 전에 그것이 어느 쪽이고 얼마나 큰지 알려 주므로, 이미지 대부분을 가져갈 클릭이 뜻밖의 일이 되는 법은 없습니다.

수정은 문턱값과 따로 보관되므로 나중에 슬라이더를 움직여도 버려지지 않고, 이미지를 뒤집으면 수정도 같이 뒤집힙니다. 지운 얼룩은 배경에 뚫린 구멍으로 다시 나타나지 않고 지워진 채로 남습니다.

매끄러움을 정하는 두 숫자, 그리고 손댈 때

세부는 단순화하는 동안 선이 픽셀에서 얼마나 벗어나도 되는지입니다. 1 아래에서는 아무 일도 일어나지 않습니다 — 계단 한 칸이 원래 속한 선에서 꼬박 한 픽셀 떨어져 있으니, 그보다 작은 허용치는 모든 칸을 남기고 단순화할 것이 없어집니다. 2를 넘으면 진짜 곡선까지 깎아 먹기 시작합니다. 따로 정하지 않으면 형태별로 계산되는데, 숫자 하나로는 사람 전신과 글자의 2픽셀짜리 세로획을 동시에 감당할 수 없기 때문입니다.

모서리 날카로움은 굽이가 곡선으로 둥글려지지 않고 모서리로 남으려면 윤곽이 얼마나 꺾여야 하는지입니다. 이것은 결정의 절반일 뿐입니다 — 꼭짓점은 이웃에서 충분히 떨어져 있어도 모서리로 남는데, 그것만으로 뚜렷한 모서리는 전부 잡히므로 — 이 숫자가 정하는 것은 언제나 완만한 굽이뿐입니다. 20도쯤 아래에서는 모든 것이 모서리가 되고 원은 다각형으로 돌아옵니다.

대부분의 이미지는 둘 다 손댈 필요가 없습니다. 알아 둘 만한 것은 필요한 두 경우 때문입니다. 아주 작은 글씨의 스캔은 세부를 더 원하고, 기계로 자를 형태는 보통 덜 원합니다.

받는 것, 그리고 그것으로 할 일

<path> 하나가 든 파일 하나입니다. 바깥 윤곽은 한 방향으로, 그 안의 구멍은 반대 방향으로 돕니다. 그래서 구멍이 마흔 개인 형태도 채우기 규칙을 설정하지 않고 요소 하나가 될 수 있고 — Illustrator, Inkscape, Figma, 브라우저, 대부분의 커팅 소프트웨어가 똑같이 읽습니다.

반대 방향 — 이미 SVG가 있고 PNG가 필요한 경우 — 은 다른 일이고, 따로 안내가 있습니다. 윤곽 따기에는 되돌릴 수 있는 부분이 없습니다. 여기서 나오는 SVG는 그 형태를 새로 그린 그림이지, 그것이 나온 이미지가 아닙니다.