🟢 svg는 벡터 이미지 형식으로, 크기를 조정해도 퀄리티를 잃지 않는 파일이다.
🟢 벡터는 크기와 방향을 모두 가진 양이다, 예를들어 힘, 가속도.
🟧 svg의 기본 개념
🔸 SVG(Scalable Vector Graphics)
🔸 벡터 그래픽 형식으로, XML 기반의 텍스트 파일로 저장
🔸 이미지의 경로, 모양, 색상을 수학적 공식으로 정의하여, 크기 조정 시에도 품질 손실 없음
🟧 svg의 활용처
🔸 웹 디자인: 스케일 가능한 아이콘, 로고, 그래픽 제작.
🔸 인쇄: T-셔츠 등 스케일이 중요한 템플릿 제작.
🔸 대화형 그래픽: JavaScript를 통해 애니메이션 및 동적 그래픽 구현.
🟧 svg의 장단점
🔸 장점
- 크기 조정 시 품질 유지 가능
- 압축 시 파일 크기 감소 가능, 품질 저하 없음
- 스크린 리더로 텍스트 읽기 가능
- JavaScript로 인터랙티브 가능
🔹 단점
- 사진이나 복잡한 이미지에는 부적합(예: 원화)
- 오래된 브라우저(예: IE 8 이하)에서 호환성 문제
🟧 svg, JPG와 PNG와의 비교
| 측면 | SVG | JPG | PNG |
|---|---|---|---|
| 유형 | 벡터 (수학적 공식 기반) | 라스터 (픽셀 기반, 손실 압축) | 라스터 (픽셀 기반, 손실없는 압축) |
| 확장성 | 무한 확장 가능, 품질 손실 없음 | 확대 시 품질 손실 | 확대 시 픽셀화 가능 |
| 사용 사례 | 로고, 아이콘, 웹 그래픽 | 사진, 복잡한 이미지 | 텍스트, 배경 없는 이미지 |
| 파일 크기 | 압축 시 작음 (SVGZ 20-50% 감소) | 중간, 손실 압축으로 크기 줄임 | 크기 큼, 손실없는 압축 |
| 기타 기능 | 검색/인덱싱 가능, JavaScript로 인터랙티브 | 정적 이미지, 메타데이터 제한 | 정적 이미지, 투명도 지원 |
