래스터와 벡터

소개

래스터 이미지는 색상을 표본화한 픽셀 격자를 저장합니다. 벡터 그래픽은 브라우저가 필요한 크기로 그릴 도형을 설명합니다. 크기를 바꿀 때 기존 표본을 늘리는지, 도형을 다시 그리는지가 핵심 차이입니다.

이 문서는 하나의 원으로 확대와 트레이싱을 구분합니다. 변환기의 정확도를 측정하는 실험이 아닙니다. 변환 순서는 Image to SVG, 부적합한 결과의 판단은 When NOT to use SVG에서 다룹니다.

같은 도형을 두 가지 방식으로 표현하기

아래 SVG는 중심과 반지름으로 원을 정의합니다. SVGKIT이 학습용 도형을 직접 작성한 뒤 Chromium 캔버스로 32 x 32 PNG를 만들었습니다. PNG는 사진을 캡처한 것이 아니며, SVG도 PNG를 트레이싱한 결과가 아닙니다.

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><circle cx="144" cy="144" r="85" fill="#e74c3c"/></svg>

32 x 32 PNG

직접 작성한 SVG

래스터 크기

32 x 32

벡터 원 요소

1

32픽셀 PNG, 직접 작성한 SVG, 측정 기록을 열어볼 수 있습니다. 기록된 Chromium 실행에서 PNG는 695바이트, SVG는 143바이트입니다. 이 파일들의 크기이지 PNG와 SVG 인코더의 우열을 뜻하지 않습니다. 재현할 수 있도록 스크립트와 브라우저 버전을 기록했습니다.

확대 차이 재현하기

두 파일을 HTML 파일과 같은 폴더에 두고 동일한 크기로 표시합니다.

<img src="circle-raster-32.png" width="256" height="256" alt="확대한 래스터 원">
<img src="circle-authored.svg" width="256" height="256" alt="벡터 원">

먼저 두 이미지의 너비와 높이를 32로, 다음에는 256으로 바꿉니다. 기기 픽셀 비율이 1인 화면에서 256 CSS 픽셀로 표시하면 래스터 표본 하나가 보간 전 기준으로 각 축의 화면 픽셀 8개에 걸칩니다. 브라우저가 확대를 부드럽게 처리할 수는 있어도 원본에 없던 정밀한 경계를 복구하지는 못합니다. SVG는 목표 해상도에서 원을 래스터화합니다. 결국 둘 다 화면에서는 픽셀로 표시됩니다.

차이를 쉽게 관찰하도록 작은 입력을 사용했습니다. 충분한 해상도의 PNG는 의도한 크기에서 SVG만큼 선명할 수 있습니다. 브라우저 보간과 기기 픽셀 비율도 모습에 영향을 주므로 벡터라고 해서 안티앨리어싱이나 작은 크기의 정렬이 중요하지 않은 것은 아닙니다.

편집 차이 재현하기

SVG의 r="85"만 r="64"로 바꾸세요. 중심은 (144, 144)에 그대로 있고 반지름만 줄어듭니다. fill="#e74c3c"를 fill="#167544"로 바꾸면 원 전체의 색상이 바뀝니다.

내보낸 PNG에는 반지름이나 fill 속성이 없습니다. 비트맵 편집기로 픽셀을 다시 칠할 수 있지만 원래 매개변수가 명시적으로 남아 있지는 않습니다. PNG를 트레이싱해도 원 하나를 복구하기보다 부드러운 경계 주변에 여러 경로가 만들어질 수 있습니다.

흔히 하는 실수

SVG에는 벡터 도형만 있다고 생각하기

SVG는 image 요소로 래스터 이미지를 포함할 수 있습니다. 내부 사진의 픽셀 해상도는 그대로입니다. PNG를 SVG로 감싼다고 내용이 벡터로 바뀌지 않습니다. SVG image 요소를 참고하세요.

트레이싱을 편집 가능한 원본과 혼동하기

경로가 의도한 객체가 아니라 경계 조각을 설명할 수도 있습니다. 좌표를 편집할 수 있다는 것과 의미 있는 원, 레이어, 글자, 제약 조건이 있다는 것은 다릅니다.

글자를 트레이싱해도 검색할 수 있다고 생각하기

글자 윤곽은 도형이지 문자 데이터가 아닙니다. 선택 가능한 글자가 필요하면 스크린샷을 트레이싱하지 말고 적절한 문서나 HTML 구조에 실제 텍스트를 유지하세요.

권장 사항

• -편집 원본과 배포용 출력을 따로 보관합니다.
• -미리보기뿐 아니라 필요한 최대 표시 크기에서도 확인합니다.
• -SVG에 도형, 내장 이미지 또는 둘 다 있는지 확인합니다.
• -나중에 바꿔야 할 객체를 기준으로 편집 방식을 선택합니다.

실무 작업 순서

1. 1
   지원해야 할 크기와 변경할 속성을 정합니다.
2. 2
   원본이 픽셀, 명시적 도형, 혼합 표현 중 무엇인지 확인합니다.
3. 3
   래스터와 벡터 후보를 같은 크기로 표시합니다.
4. 4
   반지름이나 색상 변경처럼 실제로 필요한 편집을 해봅니다.
5. 5
   요구하는 모습과 편집을 지원하는 표현을 선택합니다.

자주 묻는 질문

벡터 그래픽에는 픽셀이 전혀 관여하지 않나요?

아닙니다. 브라우저는 결국 화면에 픽셀을 그립니다. 벡터는 고정된 원본 격자를 늘리는 대신 요청된 해상도에 맞춰 픽셀을 계산할 수 있게 합니다.

고해상도 PNG도 SVG만큼 선명할 수 있나요?

네. 해당 표시 크기에 충분한 원본 픽셀이 있으면 가능합니다. 이 예시는 확대의 한계를 보이기 위해 의도적으로 32픽셀 출력을 사용했습니다.

트레이싱하면 원래 반지름이 복구되나요?

신뢰할 수 있게 복구되는 것은 아닙니다. 표본에서 도형을 추정하기 때문입니다. 예시의 반지름을 아는 이유는 PNG를 만들기 전에 직접 정의했기 때문입니다.