Tiny SVG 최적화 설정 패널 마스터하기
Tiny SVG 구성 패널의 모든 최적화 설정 및 기능에 대한 종합 가이드
Tiny SVG 최적화 설정 패널 마스터하기
Tiny SVG의 최적화 설정 패널은 SVG 파일 최적화 방식을 완벽하게 제어할 수 있게 해줍니다. 이 종합 가이드에서는 모든 설정과 기능을 살펴보고 SVG 최적화 워크플로우를 최대한 활용하는 방법을 알려드립니다.
설정 패널 이해하기
설정 패널은 세 가지 주요 섹션으로 나뉩니다:
- 전역 설정 - 전반적인 최적화 동작 제어
- 기능 - 45개 이상의 개별 SVGO 플러그인 토글
- 내보내기 옵션 - PNG/JPEG 내보내기 크기 구성
각 섹션을 자세히 살펴보겠습니다.
전역 설정
원본 표시
목적: 원본 및 최적화된 SVG를 나란히 표시
사용 시기:
- 최적화 전후 시각적 차이 비교
- 최적화가 SVG를 손상시키지 않는지 확인
- 일괄 처리 중 품질 보증
// 활성화하면 다음과 같이 표시됩니다:
// 원본: 12.5 KB | 최적화됨: 4.2 KB (-66.4%)팁: 압축이 완료되면 패널이 자동으로 "최적화됨" 탭으로 전환되지만, 이 설정을 토글하여 두 보기를 모두 유지할 수 있습니다.
Gzip 압축 비교
목적: 원시 파일 크기 대신 gzip 압축된 크기 표시
중요한 이유: 웹 서버는 일반적으로 gzip 압축으로 파일을 제공하므로 실제 파일 크기를 더 정확하게 파악할 수 있습니다.
// gzip 없이:
원본: 12.5 KB → 최적화됨: 4.2 KB
// gzip 활성화:
원본: 3.8 KB → 최적화됨: 1.9 KB모범 사례: 프로덕션 배포 시 항상 gzip 압축된 크기를 확인하세요. HTTP를 통한 실제 전송 크기를 더 잘 나타냅니다.
마크업 정리
목적: 적절한 들여쓰기로 최적화된 SVG 코드 포맷
절충:
- ✅ 활성화: 가독성 향상, 디버깅 용이 (파일 크기 +5-10%)
- ❌ 비활성화: 압축됨, 파일 크기 작음, 읽기 어려움
<!-- 정리됨 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
</svg>
<!-- 압축됨 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/></svg>권장사항: 개발/디버깅 시 활성화, 프로덕션 빌드 시 비활성화.
다중 패스
목적: 더 이상 개선이 불가능할 때까지 최적화 프로세스를 여러 번 실행
작동 방식: 일부 최적화는 다른 최적화를 활성화할 수 있습니다. 예를 들어 빈 그룹을 제거하면 부모 그룹을 축소할 수 있게 됩니다.
// 단일 패스: 12.5 KB → 5.1 KB (-59.2%)
// 다중 패스: 12.5 KB → 4.2 KB (-66.4%)성능 참고: 복잡한 SVG의 경우 다중 패스가 2-3배 더 오래 걸릴 수 있지만 파일 크기 절감은 일반적으로 그만한 가치가 있습니다.
모범 사례: 수백 개의 파일을 최적화하고 더 빠른 처리가 필요한 경우가 아니면 활성화 상태를 유지하세요.
숫자 정밀도
목적: 숫자 값의 소수점 정밀도 제어 (0-10)
기본값: 2
예시:
<!-- 정밀도: 0 -->
<circle cx="12" cy="12" r="5"/>
<!-- 정밀도: 2 (기본값) -->
<circle cx="12.35" cy="12.47" r="5.18"/>
<!-- 정밀도: 5 -->
<circle cx="12.34567" cy="12.47234" r="5.18392"/>절충:
- 낮은 정밀도 (0-1): 파일 작음, 복잡한 경로에서 시각적 차이 가능
- 중간 정밀도 (2-3): 균형 잡힘, 대부분의 아이콘 및 일러스트에 적합
- 높은 정밀도 (4-10): 파일 큼, 복잡한 세부 사항 유지
권장사항: 아이콘은 2, 세부 일러스트는 3-4, 기술 다이어그램은 5+ 사용.
변환 정밀도
목적: 변환 작업(회전, 크기 조정, 이동)의 소수점 정밀도 제어
기본값: 4
숫자 정밀도와 분리된 이유: 변환은 반올림 오류에 더 민감합니다. 회전 각도의 작은 오류가 눈에 띄는 왜곡을 일으킬 수 있습니다.
<!-- 변환 정밀도: 2 -->
<g transform="translate(12.35, 8.47) rotate(45.12)">
<!-- 변환 정밀도: 4 (기본값) -->
<g transform="translate(12.3456, 8.4712) rotate(45.1234)">권장사항: 매우 간단한 변환(2 사용) 또는 서브픽셀 정확도가 필요한 경우(5-6 사용)가 아니면 4로 유지하세요.
기능 토글 (SVGO 플러그인)
Tiny SVG는 45개 이상의 SVGO 플러그인에 대한 액세스를 제공합니다. 가장 중요한 플러그인은 다음과 같습니다:
필수 플러그인 (일반적으로 활성화)
removeDoctype
브라우저가 인라인 SVG에 필요하지 않은 <!DOCTYPE> 선언을 제거합니다.
<!-- 이전 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "...">
<svg>...</svg>
<!-- 이후 -->
<svg>...</svg>절감: ~100-200 바이트
removeComments
모든 XML 주석을 제거합니다.
<!-- 이전 -->
<!-- Created with Figma -->
<!-- Icon: Home -->
<svg>...</svg>
<!-- 이후 -->
<svg>...</svg>비활성화 시기: 저작자 표시 주석이나 조건부 주석을 유지해야 하는 경우.
removeMetadata
편집기 정보가 포함된 <metadata> 태그를 제거합니다.
<!-- 이전 -->
<svg>
<metadata>
<rdf:RDF>...</rdf:RDF>
</metadata>
<path d="..."/>
</svg>
<!-- 이후 -->
<svg>
<path d="..."/>
</svg>절감: Adobe Illustrator에서 내보낸 파일에서 수 킬로바이트를 제거할 수 있습니다.
내보내기 옵션
배율 프리셋
Tiny SVG는 PNG/JPEG 내보내기를 위한 편리한 배율 프리셋을 제공합니다:
- 0.25x - 썸네일/미리보기 이미지
- 0.5x - 저해상도 디스플레이
- 1x - 원본 크기
- 2x - 레티나 디스플레이 (가장 일반적)
- 3x - 고 DPI Android 기기
- 4x-8x - 인쇄 품질 또는 초고해상도 디스플레이
예시 워크플로우:
// 원본 SVG: 24×24
// 2x 내보내기: 48×48 PNG (레티나 디스플레이용)
// 3x 내보내기: 72×72 PNG (고 DPI Android용)PNG vs JPEG
PNG 내보내기:
- 무손실 압축
- 투명도 지원
- 최적: 투명도가 있는 아이콘, 로고, 일러스트
- 일반적인 크기: JPEG보다 큼
JPEG 내보내기:
- 손실 압축 (기본 95% 품질)
- 투명도 없음 (흰색 배경)
- 최적: 투명도가 없는 복잡한 일러스트
- 일반적인 크기: PNG보다 40-60% 작음
// 동일한 512×512 내보내기:
PNG: 87 KB
JPEG: 34 KB (-61%)결론
Tiny SVG의 최적화 설정 패널은 SVG 최적화의 모든 측면을 세밀하게 제어할 수 있게 해줍니다. 각 설정과 플러그인을 이해하면 다음을 수행할 수 있습니다:
- 품질을 희생하지 않고 파일 크기 최적화
- 의미 있는 요소를 유지하여 접근성 유지
- 디자인 반복을 위한 편집 가능성 유지
- 다양한 장치 및 사용 사례에 맞게 모든 크기로 내보내기
권장 기본값으로 시작한 다음 특정 요구 사항에 따라 조정하세요. 최상의 설정은 파일 크기, 시각적 품질 및 워크플로우 요구 사항의 균형을 맞추는 설정입니다.
즐거운 최적화 되세요!