SVG(Scalable Vector Graphics)란 확장 가능한 벡터 그래픽을 표현하기 위한 XML 기반의 벡터 그래픽 파일 포맷입니다. XML 코드로 작성되므로 SVG 이미지는 텍스트로 이루어져 있어서 수정, 압축, 검색이 용이하며, 다른 문서와 쉽게 통합할 수 있습니다. SVG 파일의 확장자는 .svg입니다.
SVG는 다양한 그래픽 요소를 포함할 수 있습니다. 선, 원, 사각형, 패스 등의 기본 도형뿐만 아니라, 텍스트, 이미지, 비디오 등 다양한 형식의 콘텐츠도 포함될 수 있습니다. 각 요소의 위치, 크기, 색상 등의 스타일 속성도 지정할 수 있습니다.
또한, SVG는 CSS와 JavaScript를 이용하여 인터랙티브한 그래픽 요소를 만들 수 있습니다. 예를 들어, 마우스 이벤트나 터치 이벤트에 반응하여 동적인 애니메이션을 만들 수 있습니다.
밑에는 SVG 파일의 간단한 예시입니다. 설명한 것과 같이 SVG 파일은 텍스트로 이루어져 있으며, 각 요소의 스타일을 변경하기 위해서는 해당 속성의 값을 변경하면 됩니다. 또한, CSS나 JavaScript를 사용하여 해당 속성에 접근하여 원하는 효과를 줄 수도 있습니다. 예시로 제공된 예제 1-2-1은 그림 1-2-1을 나타내는 코드이며, 해당 코드에서 스타일을 변경함으로써 그래픽 요소의 외형을 변경할 수 있습니다.
그림 1-2-1
<svg width="132" height="132" viewBox="0 0 132 132" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<rect width="44" height="132" fill="#8469B9"/>
<rect x="44" width="44" height="132" fill="#F0645C"/>
<rect x="88" width="44" height="132" fill="#30A4A4"/>
</svg>
현재 대부분의 최신 브라우저에서는 SVG 1.1과 2 버전을 모두 지원하고 있으며, 모바일 브라우저에서도 대부분 잘 작동합니다. 그러나 오래된 버전의 인터넷 익스플로러와 같은 일부 구형 브라우저에서는 완전한 지원이 보장되지 않을 수 있습니다. 특히 Internet Explorer 8 이하 버전에서는 SVG를 지원하지 않기 때문에 대안으로 이미지 형식을 사용해야 합니다.
대부분의 웹 사이트에서는 모던 브라우저를 대상으로 하므로, 모든 브라우저에서 완벽하게 작동하는 것보다 최신 브라우저에서 더 좋은 성능을 내는 것이 더 중요하다고 생각된다면 SVG의 브라우저 호환성 문제는 크게 문제가 되지 않습니다.
