SVG shape-rendering crispEdges: 언제 도움이 될까요?
SVG crispEdges가 픽셀 격자 표식에 도움이 되는 때와 곡선을 거칠게 만드는 때를 살펴보세요. 렌더링 힌트를 해결책으로 여기기보다 두 크기에서 브라우저 테스트하는 이유를 설명합니다.
목차
의도적으로 선명한 직선 위주의 가장자리를 가진 SVG에서 최종 표시 크기로 테스트했을 때 더 나아 보이면 shape-rendering="crispEdges"를 사용하세요. 차이가 거의 없으면 기본 auto를 유지하세요. 곡선 그림에서는 힌트가 가장자리를 더 거칠게 보이게 할 수 있습니다. 도형 자체가 아니라 렌더러가 기존 도형을 그리는 방식을 바꿉니다. SVG 2 명세는 이를 힌트라고 부르며 렌더러가 안티앨리어싱을 줄이거나 일부 가장자리를 장치 픽셀에 맞출 수 있도록 합니다.
작은 아이콘이 흐릿하거나 로고를 내보낸 뒤 가장자리가 들쭉날쭉하면 이 차이가 중요합니다. crispEdges는 삽입 PNG를 경로로 바꾸거나 손상된 윤곽선을 고치거나 모든 브라우저에서 같은 픽셀을 보장하지 못합니다. 파일 전체를 바꾸기 전에 대표 도형 하나를 실제로 볼 크기에서 auto, crispEdges, geometricPrecision으로 비교하세요.
필요한 가장자리에 맞춰 선택하기
- 직사각형 픽셀 격자 그림: 관련 도형에
crispEdges를 테스트하고 작은 출력과 큰 출력 모두 확인하세요. - 곡선 또는 둥근 글자:
auto로 시작하고 렌더러에서 차이가 보이면geometricPrecision을 시도하세요. - 인접 도형 사이의 틈: 도형부터 확인하세요. 렌더링 힌트는 실제 구멍을 닫을 수 없습니다.
- SVG 안에서 크기를 조절한 PNG: 래스터 크기 조절을 사용하거나 편집 가능성이 목표라면 그림을 경로로 재구성하세요.
crispEdges가 렌더러에 요청하는 것
SVG에는 shape-rendering 값이 네 가지 있습니다. 네 내보내기 형식이 아니라 우선순위입니다. 기본 auto에서는 렌더러가 속도, 가장자리 대비와 도형 정확도의 균형을 잡습니다. crispEdges는 강한 가장자리 대비를 우선하며 안티앨리어싱을 억제할 수 있습니다. geometricPrecision은 도형 충실도를 우선합니다. MDN SVG 속성 참고 문서는 렌더러가 모든 가장자리 또는 수평·수직에 가까운 가장자리만 다르게 처리할 수 있다고 설명합니다. 반드시 적용해야 하는 선명화 필터는 없습니다.
| 값 | 요청 내용 | 유용한 첫 테스트 |
|---|---|---|
auto | 렌더러가 절충 선택 | 모든 SVG의 기준 |
crispEdges | 도형 가장자리의 대비 증가 | 정사각형 표식이나 격자형 세부 |
geometricPrecision | 더 충실한 도형 배치 | 곡선, 대각선과 섬세한 윤곽선 |
optimizeSpeed | 렌더링 속도 우선 | 특수한 문맥. 시각적 개선을 가정하지 말 것 |
부모 SVG의 속성은 자식 도형에 상속될 수 있어 루트에 적용하면 부드러워야 하는 원에도 영향을 줄 수 있습니다. 대신 직사각형이나 경로 하나를 대상으로 할 수 있습니다. SVG 표현 속성과 CSS shape-rendering 선언이 모두 적용되면 CSS 속성이 우선합니다.
같은 도형을 두 크기로 비교했습니다
직사각형 격자 표식 하나와 곡선 윤곽선 하나를 직접 SVG 도형으로 만들었습니다. 세 열의 마크업, 채우기와 viewBox는 같고 shape-rendering 값만 바뀌었습니다. 브라우저 확대 100%의 Chromium에서 각 도형을 63 및 111 CSS 픽셀로 렌더링했습니다. 그림은 상상한 결과의 일러스트가 아니라 해당 로컬 테스트의 브라우저 캡처입니다.
어느 모드도 경로를 바꾸지 않습니다. 이 캡처에서는 차이가 너무 작아 한 설정을 일반적인 최선이라고 할 수 없습니다. 이름은 수정 도구처럼 들리지만 특정 도형, 크기와 렌더러에서는 효과가 작을 수 있습니다. 추가 속성을 유지하기 전에 실제 대상에서 확인하세요.
이는 Chromium 렌더링 한 번이며 브라우저 호환성 연구가 아닙니다. PDF 뷰어, 디자인 편집기나 다른 장치 배율의 브라우저는 같은 경로를 다르게 래스터화할 수 있습니다. SVG 2 정의는 의도적으로 구현 선택을 열어 둡니다.
전체에 적용하기 전에 도형 하나에서 테스트하기
SVG 사본을 저장하고 대표 도형에 힌트를 넣으세요. 예를 들어 아이콘의 직사각형 부분에 적용하면서 곡선 세부는 auto로 유지합니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<rect x="4" y="4" width="16" height="8" fill="#154b67"
shape-rendering="crispEdges" />
<path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
stroke-width="2" shape-rendering="auto" />
</svg>실제 사용할 뷰어에서 작은 아이콘 크기와 큰 크기로 파일을 여세요. 대각선과 곡선을 포함해 저장한 원본과 비교하세요. 인라인 SVG에 CSS 스타일을 적용한다면 속성을 덮어쓰는 규칙이 있는지 확인하세요. 의미 있는 개선이 없으면 힌트를 제거하세요. 불필요한 속성은 이후 표시 차이의 진단을 어렵게 합니다.
실제 증상에 맞게 해결하기
| 증상 | 먼저 확인할 사항 | 더 나은 다음 단계 |
|---|---|---|
| 특정 크기에서 정사각형 표식이 흐릿함 | 해당 크기에서 auto와 crispEdges 비교 | 의도한 출력이 나아질 때만 힌트 유지 |
| 원이나 대각선이 들쭉날쭉함 | 도형에 crispEdges가 상속되거나 내보내졌는지 | 제거하거나 auto와 geometricPrecision 비교 |
| 맞닿은 채우기 사이에 얇은 선 | 확대, 배경과 경로 경계 비교 | SVG 경계선 진단 사용. 실제 틈일 때만 도형 수정 |
| 확대해도 사각 픽셀이 보임 | 삽입 래스터 이미지 확인 | shape-rendering 변경 대신 픽셀화된 SVG 체크리스트 사용 |
정확한 픽셀 격자가 디자인인 PNG 스프라이트는 래스터를 유지하는 것이 가장 깔끔할 수 있습니다. CSS image-rendering: pixelated는 확대 이미지의 샘플링을 제어하며 SVG shape-rendering과 다른 속성입니다. 픽셀 아트 변환 가이드는 격자 유지, 벡터 타일 구성 또는 의도적인 윤곽선 평활화가 적합한 때를 다룹니다.
PerfectVector가 적합한 때
유일한 원본이 작은 평면 PNG이고 편집 가능한 경로가 필요하다면 렌더링 힌트는 이를 제공하지 못합니다. PerfectVector는 앞 단계에 유용합니다. PNG를 SVG 후보로 변환하고 필요한 크기에서 도형을 확인하세요. 선택한 경로에 표시 힌트를 적용하기 전에 외곽선, 내부 구멍과 작은 세부를 확인하세요. 추적은 픽셀을 도형으로 재해석할 수 있지만 픽셀 아트 계단이 부드러운 곡선이 되어야 하는지 결정하지는 못합니다.
원래 격자가 최종 그림이라면 PNG를 유지하세요. 이미 깨끗한 SVG가 있고 브라우저 표시만 이상하면 표시나 도형을 직접 고치세요. 평면 PNG에 정말 편집 가능한 윤곽선이 필요하면 PerfectVector로 SVG 후보를 만들고 경로를 확인한 뒤 crispEdges를 추가하기 전에 최종 크기의 브라우저 렌더링을 비교하세요.
FAQ
crispEdges가 모든 SVG 도형의 안티앨리어싱을 제거하나요?
아닙니다. 렌더러에 가장자리 대비를 우선하도록 요청합니다. 명세는 수직·수평에 가까운 일부 가장자리만 바꾸는 등 다른 구현을 허용합니다. 사용할 뷰어에서 출력을 테스트하세요.
SVG 전체에 shape-rendering="crispEdges"를 넣어야 하나요?
모든 자식 도형에 도움이 될 때만 하세요. 루트 힌트는 곡선 자식에도 영향을 줄 수 있습니다. 직사각형 도형 하나에 속성을 적용하면 평가하기 쉽고 곡선을 거칠게 만들 가능성이 작습니다.
crispEdges가 흰 경계선이나 SVG 안의 흐릿한 PNG를 고치나요?
실제 틈을 닫거나 래스터 픽셀을 벡터 경로로 교체할 수는 없습니다. 먼저 경계선 주변의 경로 구조를 진단하세요. 확대 PNG에는 적합한 래스터 크기 조절을 사용하고 실제로 필요하다면 편집 가능한 벡터 경로를 만드세요.
Sources
- W3C — SVG 2 shape-rendering 속성 — 네 값을 렌더러 힌트로 정의하고 허용되는 절충을 설명합니다.
- MDN — SVG shape-rendering 속성 — 적용 가능한 SVG 도형, 상속과 CSS 우선순위를 설명합니다.
- MDN — CSS shape-rendering 속성 — 속성 동작과 곡선 렌더링이 달라질 수 있는 이유를 설명합니다.
- MDN — CSS image-rendering 속성 — 래스터 픽셀 크기 조절과 벡터 도형 가장자리 렌더링을 구분합니다.
