벡터 그래픽은 일련의 도형, 좌표 및 경로를 렌더링 컨텍스트에 전달하는 방법입니다. 이미지를 그리는 방법에 관한 일련의 지침입니다. 이미지의 크기를 확대하거나 축소하면 이미지가 나타내는 점과 선의 집합이 배율에 맞게 다시 그려집니다. 두 점 사이의 매끄러운 곡선은 HTML 요소에서 CSS에서 정의한 테두리가 표시 영역에서 요소의 크기를 조정할 때처럼 다시 그리는 것과 마찬가지로 모든 크기에서 부드럽게 다시 그려집니다.
Scalable Vector Graphics (SVG)는 W3C에서 개발한 XML 기반 마크업 언어입니다. 이는 최신 웹에 맞게 설계된 벡터 이미지 형식입니다.
벡터 아트워크 편집 전용 디자인 소프트웨어를 사용하면 이미지를 SVG로 내보낼 수 있습니다. 하지만 사람이 읽을 수 있는 표준화된 마크업 언어인 SVG는 텍스트 편집 소프트웨어를 만드는 데 사용된 소프트웨어와 관계없이 모든 텍스트 편집 소프트웨어로 만들고 수정할 수 있지만, 실제로 복잡한 이미지에서는 빠르게 비현실적으로 변합니다. SVG는 CSS로 스타일을 지정하거나 이미지 자체에 동작 및 상호작용을 빌드하는 자바스크립트를 포함할 수 있습니다.
SVG는 디자이너와 개발자에게 명백한 매력을 발휘할 뿐만 아니라 최종 사용자 경험 측면에서도 매우 강력한 형식입니다. 간단한 도형의 경우 SVG 소스에 포함된 설명 정보는 래스터 이미지 형식의 보다 처방적인 픽셀 그리드 기반 정보에 비해 매우 간소한 경우가 많습니다. 비교적 지나치게 단순화하기 위해, 브라우저에 '1x1과 1x5 사이에 1픽셀의 빨간색 선을 그리세요'와 '1x1은 빨간색 픽셀입니다. 1x2는 빨간색 픽셀입니다. 1x3은 빨간색 픽셀입니다. 1x4는 빨간색 픽셀입니다. 1x5는 빨간색 픽셀입니다." 반면 SVG의 설명적 특성은 브라우저의 더 많은 해석, 즉 더 많은 '생각'이 필요하다는 점입니다. 따라서 복잡한 SVG는 렌더링에 더 많은 부담이 될 수 있습니다. 같은 맥락에서, 매우 복잡한 이미지는 상세한 지침과 큰 전송 크기를 의미할 수 있습니다.
약간의 시행착오를 거쳐 이미지 소스 후보를 기존의 래스터 형식이 아닌 SVG에서 더 잘 제공되는 것으로 즉시 인식할 수 있습니다. 몇 가지 가이드라인이 있습니다. 아이콘과 같은 인터페이스 요소는 대부분 SVG에서 잘 지원됩니다. 선명한 선, 단색, 명확히 정의된 도형을 사용한 아트워크가 SVG에 적합한 후보가 될 수 있습니다.
SVG는 광범위한 주제입니다. HTML과 함께 공존하도록 만들어진 전체 마크업 언어이며, 고유한 스타일 지정 옵션과 기능을 제공합니다. SVG에 관한 자세한 내용은 MDN SVG 튜토리얼을 참고하세요.