HTML 그래픽 – SVG 튜토리얼

SVG

SVG는 “Scalable Vector Graphics”의 약자로 웹에서 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다.
JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장한다.
따라서 SVG와 같은 벡터 파일은 품질을 그대로 유지하면서 크기를 마음대로 조정할 수 있으므로 로고와 복잡한 온라인 그래픽에 아주 적합하다.

1. SVG는 벡터 그래픽 형식이기 때문에 크기를 조절해도 해상도가 떨어지지 않는다.
2. 기본 SVG 파일은 많은 컬러 픽셀로 생성되는 래스터 이미지보다는 크기가 작다.
3. SVG 파일은 XML 형식으로 작성되어 있어, 텍스트 편집기로 쉽게 수정할 수 있다.
4. SVG는 CSS나 JavaScript를 사용하여 애니메이션 효과를 추가할 수 있다.
5. SVG는 사용자가 클릭하거나 호버할 수 있는 인터랙티브한 요소를 포함할 수 있다.
6. SVG 파일은 로고, 차트 등 웹 그래픽에 적합하다.
7. 픽셀이 부족하므로 고품질 디지털 사진을 표현하기 어렵기 때문에, 디테일이 많은 사진에는 JPEG 파일이 더 좋다.

W3C 권장사항

SVG는 W3C 권장사항이다.

SVG 1.0은 2001년 9월 4일에 W3C 권장사항이 되었다.

SVG 1.1은 2003년 1월 14일에 W3C 권장사항이 되었다.

SVG 1.1(2판)은 2011년 8월 16일에 W3C 권장사항이 되었다.

작동 방법

SVG에는 사각형, 원, 타원, 선, 다각형, 곡선 등에 대한 요소와 속성이 있다.

SVG는 또한 필터 및 흐림 효과, 그라데이션, 회전, 애니메이션, JavaScript와의 상호 작용 등을 지원한다.

간단한 SVG 문서는 <svg> 루트 요소와 그래픽을 구성하는 여러 가지 기본 모양 요소로 구성된다.

SVG 이미지 생성

SVG 이미지는 텍스트 편집기나 Inkscape와 같은 그림 그리기 프로그램을 사용하여 만들 수 있다.