SVG

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 XML 기반의 벡터 그래픽스 형식으로, 2차원 그래픽스를 정의하며 상호작용 및 애니메이션을 지원한다. SVG 사양은 1999년부터 월드 와이드 웹 컨소시엄에 의해 개발된 개방형 표준이다.

SVG 이미지는 벡터 그래픽스 형식으로 정의되고 XML 텍스트 파일로 저장된다. 따라서 SVG 이미지는 품질 손실 없이 크기를 조정할 수 있으며, SVG 파일은 검색, 색인화, 스크립트 처리, 압축이 가능하다. XML 텍스트 파일은 문서 편집기 또는 벡터 드로잉 프로그램으로 생성 및 편집할 수 있으며, 대부분의 웹 브라우저에서 렌더링된다. SVG는 자바스크립트를 포함할 수 있으며, 이는 잠재적으로 사이트 간 스크립팅으로 이어질 수 있다.

 역사 
SVG는 1998년 동안 벡터 그래픽 언어에 대한 6개의 경쟁 제안이 컨소시엄에 제출된 후 (아래 참조), 1999년부터 월드 와이드 웹 컨소시엄 (W3C) 내에서 개발되어 왔다.

초기 SVG 워킹 그룹은 상업적 제출물 중 어떤 것도 개발하지 않고, 그것들로부터 정보를 얻었지만 실제로 기반을 두지는 않은 새로운 마크업 언어를 만들기로 결정했다.

SVG는 1998년부터 W3C SVG 워킹 그룹에 의해 개발되었으며, 그 해에 6개의 경쟁 벡터 그래픽 제출물이 접수되었다.
 CCLRC의 웹 스케마틱스
 어도비 시스템즈, IBM, 넷스케이프, 썬 마이크로시스템즈의 PGML
 오토데스크, 휴렛 팩커드, 매크로미디어, 마이크로소프트, 비전 코퍼레이션의 VML
 오렌지 UK와 PRP의 하이퍼 그래픽스 마크업 언어 (HGML)
 보잉, PTC, InterCAP Graphics Systems, Inso Corporation, CCLRC, 제록스의 WebCGM
 Excosoft AB의 DrawML
당시 워킹 그룹은 W3C의 크리스 릴리가 의장을 맡았다.

초기 채택은 구형 인터넷 익스플로러 버전의 지원 부족으로 제한적이었다. 그러나 2011년부터 모든 주요 데스크톱 브라우저가 SVG를 지원하기 시작했다. 네이티브 브라우저 지원은 플러그인이 필요 없고, SVG를 다른 콘텐츠와 혼합할 수 있으며, 렌더링 및 스크립트의 신뢰성을 향상시키는 등 다양한 장점을 제공한다. SVG에 대한 모바일 지원은 다양한 형태로 존재하며, 다양한 장치 및 브라우저에서 SVG Tiny 1.1 또는 1.2를 지원한다. SVG는 벡터 그래픽 편집기를 사용하여 생성하고 래스터 형식으로 렌더링할 수 있다. 웹 기반 애플리케이션에서 인라인 SVG는 HTML 문서 내에 SVG 콘텐츠를 임베딩할 수 있다.

SVG 사양은 2011년에 버전 1.1로 업데이트되었다. Scalable Vector Graphics 2는 2016년 9월 15일에 W3C 권고 후보가 되었다. SVG 2는 SVG 1.1 및 SVG Tiny 1.2 외에도 여러 새로운 기능을 포함한다.

 버전 1.x 

 SVG 1.0은 2001년 9월 4일에 W3C 권고안이 되었다.
 SVG 1.1은 2003년 1월 14일에 W3C 권고안이 되었다. SVG 1.1 사양은 부분 집합을 프로필로 정의할 수 있도록 모듈화되어 있다. 이 외에는 SVG 1.1과 SVG 1.0 사이에 거의 차이가 없다.
 SVG Tiny 및 SVG Basic (모바일 SVG 프로필)은 2003년 1월 14일에 W3C 권고안이 되었다. 이들은 SVG 1.1의 프로필로 설명된다.
 SVG Tiny 1.2는 2008년 12월 22일에 W3C 권고안이 되었다. 이전에 계획된 SVG Full 1.2 (이후 SVG 2로 대체됨)의 프로필로 초안이 작성되었지만, 나중에 독립형 사양으로 재구성되었다. 일반적으로 지원이 좋지 않다.
 SVG 1.1 Second Edition은 원본 SVG 1.1에 대한 모든 오류 및 설명이 포함되었지만 새로운 기능은 없으며 2011년 8월 16일에 출시되었다.
 SVG Tiny 1.2 Portable/Secure는 SVG Tiny 1.2 프로필의 더 안전한 부분 집합으로 2020년 7월 29일에 IETF 초안 표준으로 도입되었다. SVG Tiny P/S라고도 알려져 있다. SVG Tiny 1.2 Portable/Secure는 BIMI 초안 표준의 요구 사항이다.

 버전 2 

SVG 2는 SVG 1.1의 일부 기능을 제거하거나 사용을 중단하고 HTML5 및 웹 오픈 폰트 형식 (WOFF)의 새로운 기능을 통합한다.

 예를 들어, SVG 2는 `glyph` 및 `altGlyph`와 같은 여러 글꼴 요소를 제거한다 (WOFF로 대체).
 `xml:space` 속성은 CSS를 선호하여 사용이 중단되었다.
 `translate` 및 `data-*` 속성과 같은 HTML5 기능이 추가되었다.
 SVG Tiny 1.2의 텍스트 처리 기능은 포함될 것으로 주석 처리되어 있지만, 텍스트로 아직 공식화되지 않았다. 다른 1.2 기능 중 일부는 선별적으로 포함되지만, SVG 2는 일반적으로 SVG tiny 1.2의 상위 집합이 아니다.

SVG 2는 2016년 9월 15일에 권고 후보 단계에 도달했으며, 2018년 8월 7일과 2018년 10월 4일에 개정판이 발행되었다. 최신 초안은 2023년 3월 8일에 발표되었다.

 기능 
섬네일|이 이미지는 비트맵 이미지와 벡터 이미지의 차이를 보여준다. 비트맵 이미지는 고정된 픽셀 집합으로 구성되는 반면, 벡터 이미지는 고정된 모양 집합으로 구성된다. 그림에서 확대하면 비트맵은 픽셀이 드러나지만 벡터 이미지는 모양이 유지된다.

SVG는 상호작용성, 애니메이션 및 풍부한 그래픽 기능을 지원하여 웹 및 인쇄 애플리케이션 모두에 적합하다. SVG 이미지는 Gzip 알고리즘으로 압축할 수 있으며, 이로 인해 원본보다 일반적으로 20~50% 작은 SVGZ 파일이 생성된다. SVG는 또한 메타데이터를 지원하여 SVG 콘텐츠의 색인화, 검색 및 검색을 개선한다.

SVG는 세 가지 유형의 그래픽 객체를 허용한다: 벡터 그래픽 도형 (직선 및 곡선으로 구성된 경로 등), 비트맵 이미지, 그리고 텍스트. 그래픽 객체는 그룹화, 스타일 지정, 변환 및 이전에 렌더링된 객체로 합성될 수 있다. 기능 세트에는 중첩된 변환, 클리핑 패스, 알파 마스크, 필터 효과 및 템플릿 객체가 포함된다. SVG 도면은 대화형이며, SVG XML 요소 또는 SVG 문서 객체 모델 (DOM)에 접근하는 스크립팅을 통해 정의된 애니메이션을 포함할 수 있다.

SVG는 스타일링에 CSS를 사용하고 스크립팅에 자바스크립트를 사용한다. SVG DOM 내에서 일반 텍스트로 나타나는 국제화와 지역화를 포함한 텍스트는 SVG 그래픽의 접근성을 향상시킨다.

 인쇄 

SVG 사양은 주로 벡터 그래픽스 마크업 언어에 중점을 두지만, 페이지 기술 언어인 어도비의 PDF와 같은 기본 기능을 포함하도록 설계되었다. 풍부한 그래픽을 위한 조항을 포함하며, 스타일링 목적의 CSS와 호환된다. SVG는 인쇄 페이지의 선택된 위치에 각 자체 및 이미지를 배치하는 데 필요한 정보를 가지고 있다.

 스크립팅 및 애니메이션 

SVG 도면은 동적이고 상호작용적일 수 있다. 요소에 대한 시간 기반 수정은 SMIL에 설명되거나 스크립트 언어 (자바스크립트 등)로 프로그래밍될 수 있다. W3C는 SVG 애니메이션의 표준으로 SMIL을 명시적으로 권장한다.

"onmouseover" 및 "onclick"과 같은 풍부한 이벤트 핸들러 세트를 모든 SVG 그래픽 객체에 할당하여 작업 및 이벤트를 적용할 수 있다.

 모바일 프로필 

업계 수요로 인해 SVG 1.1에 두 가지 모바일 프로필인 SVG Tiny (SVGT)와 SVG Basic (SVGB)이 도입되었다.

이들은 전체 SVG 표준의 부분 집합이며, 주로 제한된 기능을 가진 사용자 에이전트를 위해 고안되었다. 특히 SVG Tiny는 휴대폰과 같이 고도로 제한된 모바일 장치를 위해 정의되었으며, 스타일링이나 스크립팅을 지원하지 않는다. SVG Basic은 스마트폰과 같은 상위 수준 모바일 장치를 위해 정의되었다.

2003년, 국제 통신 표준 그룹인 3GPP는 SVG Tiny를 차세대 전화의 필수 벡터 그래픽 미디어 형식으로 채택했다. SVGT는 필수 벡터 그래픽 형식이며, 멀티미디어 메시지 서비스 (MMS) 및 패킷 교환 스트리밍 서비스에 대한 SVGB 지원은 선택 사항이다. 나중에 IP 멀티미디어 서브시스템 (IMS)의 벡터 그래픽스 필수 형식으로 추가되었다.

어떤 모바일 프로필도 전체 문서 객체 모델 (DOM) 지원을 포함하지 않으며, SVG Basic만 스크립팅에 대한 선택적 지원을 제공하지만, 전체 표준과 완벽하게 호환되는 부분 집합이기 때문에 대부분의 SVG 그래픽은 모바일 프로필만 지원하는 장치에서도 렌더링될 수 있다.

SVGT 1.2는 마이크로 DOM (μDOM), 스타일링 및 스크립팅을 추가한다. SVGT 1.2는 또한 Opera, Firefox 및 WebKit과 같은 일부 SVG 1.1 구현에서 지원되는 비확대 스트로크를 포함하여 SVG 1.1에서는 찾을 수 없는 일부 기능을 포함한다. 데스크톱 및 모바일 브라우저 간의 공유 코드 베이스가 증가함에 따라 SVGT 1.2 대신 SVG 1.1의 사용도 증가했다.

 압축 

SVG 이미지는 XML이기 때문에 반복되는 많은 텍스트 조각을 포함하므로 무손실 데이터 압축 알고리즘에 매우 적합하다. SVG 이미지가 Gzip 알고리즘으로 압축되면 "SVGZ" 이미지라고 하며 해당 `.svgz` 파일 이름 확장자를 사용한다. SVG 1.1 호환 뷰어는 압축된 이미지를 표시한다. SVGZ 파일은 일반적으로 원본 크기의 20~50퍼센트이다. W3C는 적합성을 테스트하기 위해 SVGZ 파일을 제공한다.

 디자인 

SVG 1.1 사양은 14개의 기능 영역 또는 기능 세트를 정의한다.

경로
곡선 또는 직선으로 구성된 단순하거나 복합적인 모양의 윤곽은 채우거나 윤곽을 그리거나 클리핑 패스로 사용할 수 있다. 경로는 간결한 코딩을 갖는다.
예를 들어, M ("이동"을 의미)은 초기 숫자 x 및 y 좌표 앞에 오고, L ("선 그리기"를 의미)은 선을 그릴 점 앞에 온다. 추가 명령 문자(C, S, Q, T, 및 A)는 다양한 베지에 및 타원형 곡선을 그리는 데 사용되는 데이터 앞에 온다. Z는 경로를 닫는 데 사용된다.
모든 경우에 대문자 명령 뒤에는 절대 좌표가 오고, 해당 소문자 뒤에는 상대 좌표가 사용된다.
기본 도형
직선 경로와 일련의 연결된 직선 세그먼트(폴리라인)로 구성된 경로뿐만 아니라 닫힌 다각형, 원, 타원을 그릴 수 있다. 직사각형과 둥근 모서리 직사각형도 표준 요소이다.
텍스트
SVG 파일에 포함된 유니코드 문자 텍스트는 XML 문자 데이터로 표현된다. 많은 시각 효과가 가능하며, SVG 사양은 자동으로 양방향 텍스트(예: 영어와 아랍어 텍스트의 조합 구성), 세로 텍스트(예: 중국어 또는 일본어 쓰기) 및 곡선 경로를 따라 있는 문자(예: 미국의 국장 가장자리의 텍스트)를 처리한다.
그리기
SVG 도형은 채워지거나 윤곽이 그려질 수 있다 (색상, 그라디언트 또는 패턴으로 채색). 채우기는 불투명하거나 투명도를 가질 수 있다.
"마커"는 화살촉과 같은 선 끝 기능 또는 다각형의 꼭짓점에 나타날 수 있는 기호이다.
색상
색상은 모든 가시적인 SVG 요소에 직접 또는 fill, stroke 및 기타 속성을 통해 적용될 수 있다. 색상은 CSS2와 동일한 방식으로 지정된다. 즉, black 또는 blue와 같은 이름, #2f0 또는 #22ff00와 같은 십육진법 값, rgb(255,255,127)와 같은 십진법 값 또는 rgb(100%,100%,50%)와 같은 백분율 형식으로 지정한다.
그라디언트 및 패턴
SVG 도형은 위와 같이 단색으로 채워지거나 윤곽이 그려질 수 있으며, 색상 그라디언트 또는 반복 패턴으로도 가능하다. 색상 그라디언트는 선형 또는 방사형(원형)일 수 있으며, 임의의 수의 색상과 반복을 포함할 수 있다. 불투명도 그라디언트도 지정할 수 있다. 패턴은 미리 정의된 래스터 또는 벡터 그래픽 객체를 기반으로 하며, x 및 y 방향으로 반복될 수 있다. 그라디언트와 패턴은 애니메이션 및 스크립트 처리될 수 있다.
2008년부터 SVG의 전문 사용자들 사이에서 그라디언트 메시 또는 바람직하게는 확산 곡선을 SVG 사양에 유용하게 추가할 수 있다는 논의가 있었다. "확산 곡선을 사용한 간단한 표현이 매우 미묘한 음영 효과까지 표현할 수 있다"고 한다. 또한 "확산 곡선 이미지는 품질과 코딩 효율성 모두에서 그라디언트 메시와 유사하지만 (여러 아티스트들이 두 도구를 사용해 본 결과) 생성하기가 더 간단하며, 비트맵에서 완전 자동화로 캡처할 수 있다." SVG 2의 현재 초안에는 그라디언트 메시가 포함되어 있다.
클리핑, 마스킹 및 합성
텍스트, 경로, 기본 도형 및 이들의 조합을 포함한 그래픽 요소는 내부 및 외부 영역을 정의하는 윤곽선으로 사용될 수 있으며, 이 영역들은 독립적으로 채색될 수 있다 (색상, 그라디언트 및 패턴 사용). 완전 불투명 클리핑 경로와 반투명 마스크는 함께 합성되어 알파 블렌딩을 사용하여 최종 이미지의 각 픽셀의 색상과 불투명도를 계산한다.
필터 효과

필터 효과는 주어진 원본 벡터 그래픽에 일련의 그래픽 연산을 적용하여 수정된 비트맵 결과를 생성하는 것으로 구성된다.
상호작용성
SVG 이미지는 다양한 방식으로 사용자와 상호작용할 수 있다. 아래에서 언급된 하이퍼링크 외에도 SVG 이미지의 어떤 부분도 포커스 변경, 마우스 클릭, 이미지 스크롤 또는 확대/축소 및 기타 포인터, 키보드 및 문서 이벤트와 같은 사용자 인터페이스 이벤트에 반응하도록 만들 수 있다. 이벤트 핸들러는 이러한 이벤트에 대한 응답으로 애니메이션을 시작, 중지 또는 변경하거나 스크립트를 트리거할 수 있다.
링크
SVG 이미지는 XLink를 사용하여 다른 문서에 대한 하이퍼링크를 포함할 수 있다. 
 요소 또는 프래그먼트 식별자를 사용하여 URL은 문서의 가시 영역을 변경하는 SVG 파일에 링크할 수 있다. 이를 통해 특정 영역을 확대/축소하거나 보기를 특정 요소로 제한하는 데 사용되는 특정 보기 상태를 만들 수 있다. 이는 스프라이트를 만들 때 유용하다. XLink 지원과 
 요소의 조합은 내부 및 외부 요소를 링크하고 재사용하는 것도 허용한다. 이를 통해 코더는 더 적은 마크업으로 더 많은 작업을 수행하고 더 깔끔한 코드를 만들 수 있다.
스크립팅
SVG 문서의 모든 측면은 HTML과 유사한 방식으로 스크립트를 사용하여 접근하고 조작할 수 있다. 기본 스크립팅 언어는 자바스크립트이며, 모든 SVG 요소 및 속성에 대한 정의된 문서 객체 모델 (DOM) 객체가 있다. 스크립트는