SVG

다른 뜻에 대해서는 SVG (동음이의) 문서를 참고하십시오.
스케일러블 벡터 그래픽스
Scalable Vector Graphics
파일 확장자.svg, .svgz
인터넷 미디어 타입
image/svg+xml
개발W3C
발표일2001년 9월 4일
최신 버전
1.1
(2011년 8월 16일)
포맷 종류벡터 이미지

스케일러블 벡터 그래픽스(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개의 경쟁 벡터 그래픽 제출물이 접수되었다.

당시 워킹 그룹은 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

버전 2

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

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를 사용하여 다른 문서에 대한 하이퍼링크를 포함할 수 있다. <view> 요소 또는 프래그먼트 식별자를 사용하여 URL은 문서의 가시 영역을 변경하는 SVG 파일에 링크할 수 있다. 이를 통해 특정 영역을 확대/축소하거나 보기를 특정 요소로 제한하는 데 사용되는 특정 보기 상태를 만들 수 있다. 이는 스프라이트를 만들 때 유용하다. XLink 지원과 <use> 요소의 조합은 내부 및 외부 요소를 링크하고 재사용하는 것도 허용한다. 이를 통해 코더는 더 적은 마크업으로 더 많은 작업을 수행하고 더 깔끔한 코드를 만들 수 있다.
스크립팅
SVG 문서의 모든 측면은 HTML과 유사한 방식으로 스크립트를 사용하여 접근하고 조작할 수 있다. 기본 스크립팅 언어는 자바스크립트이며, 모든 SVG 요소 및 속성에 대한 정의된 문서 객체 모델 (DOM) 객체가 있다. 스크립트는 <script> 요소 안에 포함된다. 필요에 따라 포인터 이벤트, 키보드 이벤트 및 문서 이벤트에 응답하여 실행될 수 있다.
애니메이션
SVG 콘텐츠는 <animate>, <animateMotion>, <animateColor>와 같은 내장 애니메이션 요소를 사용하여 애니메이션화할 수 있다. ECMAScript 및 스크립팅 언어의 내장 타이머를 사용하여 DOM을 조작하여 콘텐츠를 애니메이션화할 수 있다. SVG 애니메이션은 SMIL (Synchronized Multimedia Integration Language)의 현재 및 미래 버전과 호환되도록 설계되었다. 애니메이션은 연속적일 수 있으며, 루프 및 반복될 수 있고, 위에서 언급한 대로 사용자 이벤트에 반응할 수 있다.
글꼴
HTML 및 CSS와 마찬가지로 SVG의 텍스트는 시스템 글꼴과 같은 외부 글꼴 파일을 참조할 수 있다. SVG 파일이 렌더링되는 시스템에 필요한 글꼴 파일이 없으면 텍스트가 의도한 대로 표시되지 않을 수 있다. 이러한 제한을 극복하기 위해 텍스트는 SVG 글꼴로 표시될 수 있으며, 여기서 필요한 자체는 SVG에서 글꼴로 정의된 다음 <text> 요소에서 참조된다.
메타데이터
W3C의 시맨틱 웹 이니셔티브에 따라 SVG는 작성자가 SVG 콘텐츠에 대한 메타데이터를 제공할 수 있도록 한다. 주요 기능은 <metadata> 요소로, 더블린 코어 메타데이터 속성 (예: 제목, 생성자/저자, 주제, 설명 등)을 사용하여 문서를 설명할 수 있다. 다른 메타데이터 스키마도 사용될 수 있다. 또한 SVG는 작성자가 SVG 이미지 내에 일반 텍스트 설명 자료를 제공하여 다양한 수단으로 색인화, 검색 및 검색을 돕도록 <title> 및 <desc> 요소를 정의한다.

SVG 문서는 도형, 그라디언트 등 구성 요소를 정의하고 반복적으로 사용할 수 있다. SVG 이미지는 PNG 및 JPEG 이미지와 같은 래스터 그래픽스와 다른 SVG 이미지를 포함할 수도 있다.

이 코드는 그리드와 레이블을 제외한 이미지에 표시된 색상이 지정된 도형을 생성한다:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
<g opacity="0.8">
	<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
	<circle cx="125" cy="125" r="75" fill="orange" />
	<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
	<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</g>
</svg>

구현

웹에서 SVG 사용은 구형 인터넷 익스플로러 (IE) 버전의 지원 부족으로 제한되었다. SVG 이미지를 제공하는 많은 웹사이트는 HTTP 콘텐츠 협상을 통해 자동으로 또는 사용자가 직접 파일을 선택하도록 허용하여 이미지를 래스터 형식으로도 제공한다.

웹 브라우저

Konqueror는 2004년 2월 3.2 버전에서 처음으로 SVG를 지원한 브라우저이다. 2011년을 기준으로 모든 주요 데스크톱 브라우저와 많은 소규모 브라우저가 어느 정도 SVG를 지원한다. 다른 브라우저의 구현은 아직 완전하지 않다. 자세한 내용은 레이아웃 엔진 비교를 참조하라.

일부 이전 버전의 파이어폭스(예: 1.5에서 3.6 사이 버전) 및 기타 현재는 구형 웹 브라우저는 SVG 그래픽을 표시할 수 있지만, HTML 요소 <img>를 사용하여 이미지를 통합하는 표준 방식 대신 <object> 또는 <iframe>에 포함해야 HTML 웹페이지의 일부로 통합하여 표시할 수 있었다. 그러나 SVG 이미지는 XML 네임스페이스를 사용하여 XHTML 페이지에 포함될 수 있다.

월드 와이드 웹의 발명가인 팀 버너스리는 SVG를 지원하지 않는 초기 버전의 인터넷 익스플로러를 비판했다.

네이티브 및 전체 지원에는 여러 가지 장점이 있다. 플러그인이 필요하지 않고, SVG를 단일 문서의 다른 콘텐츠와 자유롭게 혼합할 수 있으며, 렌더링 및 스크립팅이 훨씬 더 안정적이다.

모바일 장치

SVG 지원은 구형 또는 더 제한적인 스마트폰에서 SVGT로 제한되거나 해당 운영 체제에 의해 주로 제한될 수 있다. 어도비 플래시 라이트는 버전 1.1부터 선택적으로 SVG Tiny를 지원했다. SVG Open 2005 컨퍼런스에서 썬은 Connected Limited Device Configuration (CLDC) 플랫폼을 위한 SVG Tiny 1.1의 모바일 구현을 시연했다.

오페라 모바일을 사용하는 휴대폰과 아이폰의 내장 브라우저도 SVG를 지원한다. 그러나 웹킷 엔진을 사용했음에도 불구하고 안드로이드 내장 브라우저는 3.0 (허니콤) 이전에는 SVG를 지원하지 않았다. 3.0 이전에는 안드로이드용 파이어폭스 모바일 4.0b2 (베타)가 기본적으로 SVG를 지원하는 안드로이드에서 실행되는 첫 번째 브라우저였다.

사용 가능한 SVG Tiny 지원 수준은 모바일 장치마다 다르며, 설치된 SVG 엔진에 따라 달라진다. 많은 최신 모바일 제품은 그라디언트 및 불투명도와 같은 SVG Tiny 1.1 이상의 추가 기능을 지원한다. 이는 때때로 "SVGT 1.1+"라고 불리지만, 그러한 표준은 없다.

RIM의 블랙베리는 버전 5.0부터 SVG Tiny 1.1을 내장 지원한다. OS 6 및 7의 웹킷 기반 블랙베리 토치 브라우저에서도 계속 지원된다.

노키아의 S60 플랫폼은 SVG를 내장 지원한다. 예를 들어, 아이콘은 일반적으로 플랫폼의 SVG 엔진을 사용하여 렌더링된다. 노키아는 또한 JSR 226: SVG 프리젠테이션 및 조작을 위한 자바 ME API를 정의하는 Scalable 2D Vector Graphics API 전문가 그룹을 이끌었다. 이 API는 S60 플랫폼 3rd Edition Feature Pack 1부터 구현되었다. 일부 Series 40 휴대폰도 SVG를 지원한다 (예: 노키아 6280).

소니 에릭슨 휴대폰 대부분은 K700 (출시일 기준)부터 SVG Tiny 1.1을 지원한다. K750부터의 휴대폰은 불투명도 및 그라디언트와 같은 기능도 지원한다. 소니 에릭슨 자바 플랫폼-8을 사용하는 휴대폰은 JSR 226을 지원한다.

윈도우 폰은 버전 7.5부터 SVG를 지원한다.

SVG는 모토로라, 삼성, LG, 지멘스 모바일/BenQ-지멘스의 다양한 모바일 장치에서도 지원된다. 임베디드 장치를 위해 주로 작성된 SVG 렌더링 라이브러리인 eSVG는 일부 모바일 플랫폼에서 사용할 수 있다.

작성

수동으로 코드를 입력하고 벡터 그래픽 편집기를 사용하는 것 외에도 사용자는 스프레드시트 프로그램의 concatenate 함수를 사용하여 숫자 셀 값과 텍스트 문자열을 연속으로 결합하여 완전한 SVG 선언을 생성할 수 있다.

SVG 이미지는 손으로 코딩하거나 잉크스케이프, 어도비 일러스트레이터, 어도비 애니메이트 또는 코렐드로와 같은 벡터 그래픽 편집기를 사용하여 제작할 수 있으며, 동일한 소프트웨어를 사용하여 PNG와 같은 일반적인 래스터 이미지 형식으로 렌더링할 수 있다. 또한 잉크스케이프 및 Boxy SVG와 같은 편집기는 일반적으로 포트레이스, autotrace 및 imagetracerjs와 같은 이미지 추적 백엔드를 사용하여 래스터 이미지를 베지에 곡선으로 추적하는 도구를 제공한다.

소프트웨어는 2000년부터 그놈이 사용하는 librsvg, 바틱, 그리고 경량 시스템을 위한 2020년부터 토르 벡터 그래픽스와 같은 라이브러리를 사용하여 SVG 이미지를 렌더링하도록 프로그래밍할 수 있다. SVG 이미지는 이미지매직, 무료 명령줄 유틸리티(내부적으로 librsvg를 사용함)를 사용하여 원하는 인기 이미지 형식으로 렌더링할 수도 있다.

웹 기반 애플리케이션의 경우 인라인 SVG라는 사용 모드를 통해 <svg> 태그를 사용하여 HTML 문서 내에 SVG 콘텐츠를 임베딩할 수 있다. SVG와 HTML이 컨텍스트, 이벤트 처리 및 CSS를 공유하므로 그래픽 기능을 사용하여 정교한 사용자 인터페이스를 만들 수 있다.

SVG의 다른 용도로는 워드 프로세싱 (예: 리브레오피스) 및 탁상출판 (예: 스크라이버스)에서 사용하기 위한 임베딩, 그누플롯과 같은 그래프 플로팅, 김프 또는 블렌더에서 사용하기 위한 경로 가져오기 등이 있다. 마이크로소프트 365 및 마이크로소프트 오피스 2019 애플리케이션 서비스는 SVG 이미지 내보내기, 가져오기 및 편집을 지원한다. 애플에서 사용하는 SVG의 통일형식식별자는 public.svg-image이며 public.image 및 public.xml을 준수한다.

보안

HTML 문서와 유사하게, SVG는 스크립트나 CSS를 호스팅할 수 있는 문서 형식이다. 이는 공격자가 SVG 파일을 웹사이트에 업로드할 수 있을 때 문제가 되는데, 예를 들어 프로필 사진처럼 파일이 일반 그림으로 처리되지만 악성 콘텐츠를 포함하고 있는 경우이다. 예를 들어, SVG 파일이 CSS 배경 이미지나 웹사이트의 로고, 또는 이미지 갤러리에 배포되면, 브라우저에서 이미지가 로드될 때 스크립트나 다른 콘텐츠를 활성화한다. 이는 브라우저를 잠그거나 (빌리언 래프스 공격) HTML 인젝션 및 사이트 간 스크립팅 공격으로 이어질 수 있다. 따라서 W3C는 SVG가 단순히 이미지로 사용될 때 특정 요구 사항을 규정한다: SVG 보안.

W3C는 인라인 SVG (웹사이트에 네이티브로 로드되는 SVG 파일)가 콘텐츠가 더 큰 문서의 일부이므로 스크립팅 및 CSS가 예상치 못한 것이 아니기 때문에 보안 위험이 적다고 본다.

관련 작업

MPEG-4 파트 20 표준 – 경량 애플리케이션 장면 표현 (LASeR) 및 단순 집계 형식 (SAF)은 SVG Tiny를 기반으로 한다. 이 표준은 MPEG (ISO/IEC JTC 1/SC29/WG11)에 의해 개발되었고 ISO/IEC 14496-20:2006으로 발행되었다. SVG 기능은 동적 업데이트, 이진 인코딩, 최신 글꼴 표현과 같은 모바일 서비스의 주요 기능으로 MPEG-4 파트 20에서 향상되었다. SVG는 XML을 사용하여 MPEG-4 멀티미디어 콘텐츠를 텍스트로 표현하는 Extensible MPEG-4 Textual (XMT) 형식으로 MPEG-4 파트 11에도 수용되었다.

같이 보기

각주

  1. 1 2 3 “Secret Origin of SVG”. World Wide Web Consortium. 2007년 12월 21일. 2020년 12월 24일에 원본 문서에서 보존된 문서. 2011년 1월 1일에 확인함.
  2. ↑ “Schematic Graphics”. 《W3C》. 2022년 1월 31일에 원본 문서에서 보존된 문서. 2019년 7월 19일에 확인함.
  3. ↑ Al-Shamma, Nabeel; Robert Ayers; Richard Cohn; Jon Ferraiolo; Martin Newell; Roger K. de Bry; Kevin McCluskey; Jerry Evans (1998년 4월 10일). “Precision Graphics Markup Language (PGML)”. W3C. 2021년 12월 16일에 원본 문서에서 보존된 문서. 2009년 5월 8일에 확인함.
  4. ↑ Mathews, Brian; Brian Dister; John Bowler; Howard Cooper stein; Ajay Jindal; Tuan Nguyen; Peter Wu; Troy Sandal (1998년 5월 13일). “Vector Markup Language (VML)”. W3C. 2021년 11월 6일에 원본 문서에서 보존된 문서. 2009년 5월 8일에 확인함.
  5. ↑ “Hyper Graphics Markup Language (HGML)”. 《W3C》. 2022년 4월 7일에 원본 문서에서 보존된 문서. 2019년 7월 19일에 확인함.
  6. ↑ “WebCGM Profile”. 《xml.coverpages.org》. 2022년 8월 14일에 원본 문서에서 보존된 문서. 2019년 3월 4일에 확인함.
  7. ↑ “Scalable Vector Graphics (SVG) 2”. W3C. 2017년 1월 27일에 원본 문서에서 보존된 문서. 2017년 1월 28일에 확인함.
  8. ↑ Ferraiolo, Jon (2001년 9월 4일). “Scalable Vector Graphics (SVG) 1.0 Specification”. World Wide Web Consortium. 2008년 5월 11일에 원본 문서에서 보존된 문서. 2010년 2월 24일에 확인함.
  9. 1 2 Ferraiolo, Jon (2011년 8월 16일). “Scalable Vector Graphics (SVG) 1.1 Specification”. World Wide Web Consortium. 2012년 9월 16일에 원본 문서에서 보존된 문서. 2016년 4월 14일에 확인함.
  10. ↑ Capin, Tolga (2009년 6월 15일). “Mobile SVG Profiles: SVG Tiny and SVG Basic”. World Wide Web Consortium. 2010년 10월 9일에 원본 문서에서 보존된 문서. 2010년 10월 24일에 확인함.
  11. ↑ Andersson, Ola (2008년 12월 22일). “Scalable Vector Graphics (SVG) Tiny 1.2 Specification”. World Wide Web Consortium. 2020년 12월 7일에 원본 문서에서 보존된 문서. 2010년 2월 24일에 확인함.
  12. ↑ Dengler, Patrick (2010년 7월 8일). “Getting to SVG 2.0: A report from the SVG Working Group Face-to-Face (May 24th – June 1st 2010)”. 《Microsoft Developer Network》. Microsoft. 2016년 5월 12일에 원본 문서에서 보존된 문서. 2010년 8월 26일에 확인함.
  13. 1 2 “Scalable Vector Graphics (SVG) 1.1 (Second Edition)”. W3C. 2011년 9월 24일에 원본 문서에서 보존된 문서. 2011년 8월 29일에 확인함.
  14. ↑ Brotman, Alex; Adams, J. Trent (2020년 7월 29일). 《SVG Tiny Portable/Secure》. 《Ietf Datatracker》. 2021년 2월 14일에 원본 문서에서 보존된 문서. 2021년 2월 9일에 확인함.
  15. ↑ “Implementation Guide”. 《BIMI Group》. 2021년 2월 28일에 원본 문서에서 보존된 문서. 2021년 2월 9일에 확인함.
  16. 1 2 “Appendix K: Changes from SVG 1.1”. World Wide Web Consortium. 2020년 5월 26일. 2021년 2월 4일에 원본 문서에서 보존된 문서. 2020년 12월 31일에 확인함.
  17. ↑ “Chapter 11: Text”. World Wide Web Consortium. 2020년 5월 26일. 2021년 4월 21일에 원본 문서에서 보존된 문서. 2020년 12월 31일에 확인함.
  18. ↑ “Scalable Vector Graphics (SVG) 2”. World Wide Web Consortium. 2016년 9월 15일. 2021년 9월 9일에 원본 문서에서 보존된 문서. 2021년 8월 17일에 확인함.
  19. ↑ “Scalable Vector Graphics (SVG) 2”. World Wide Web Consortium. 2018년 10월 4일. 2021년 7월 19일에 원본 문서에서 보존된 문서. 2021년 8월 17일에 확인함.
  20. ↑ “Scalable Vector Graphics (SVG) 2”. World Wide Web Consortium. 2023년 3월 8일. 2021년 2월 10일에 원본 문서에서 보존된 문서. 2024년 1월 7일에 확인함.
  21. ↑ Alex, Danilo; Fujisawa, Jun (2002). “SVG as a Page Description Language”. svgopen.org. 2010년 5월 29일에 원본 문서에서 보존된 문서. 2010년 2월 24일에 확인함.
  22. ↑ Paul, Festa (2003년 1월 9일). “W3C releases scripting standard, caveat”. CNet. 2011년 5월 17일에 원본 문서에서 보존된 문서. 2010년 2월 24일에 확인함.
  23. 1 2 “SVG Tiny 1.2”. 《Scalable Vector Graphics (SVG) Tiny 1.2 Specification》. W3C. 2008년 12월 22일. 2014년 1월 30일에 원본 문서에서 보존된 문서. 2014년 3월 5일에 확인함.
  24. ↑ “SVG in 3GPP Multimedia Messaging and Streaming Services (version March 2003)”. SVG Open. 2003. 2009년 6월 26일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  25. ↑ “3GPP Multimedia Messaging Service (MMS); Media formats and codecs (Release 5); 3GPP TS 26.140 V5.2.0 (2002-12); Technical Specification”. 3GPP. 2 January 2003. 8 February 2007에 원본 문서 (zipped doc)에서 보존된 문서. 25 February 2010에 확인함.
  26. ↑ “3rd Generation Partnership Project; Technical Specification Group Services and System Aspects; Multimedia Messaging Service (MMS); Media formats and codecs (Release 5)”. 《3GPP TS 26.140 V5.2.0 (2002-12)》. 3GPP. March 2003. 12 February 2007에 원본 문서 (zipped doc)에서 보존된 문서. 24 February 2010에 확인함.
  27. ↑ “3GPP Specification detail - 3GPP TS 26.141: IP Multimedia System (IMS) Messaging and Presence; Media formats and codecs”. 3GPP. 2009년 12월 10일. 2008년 10월 7일에 원본 문서에서 보존된 문서. 2010년 2월 24일에 확인함.
  28. ↑ “Listing of phones that support SVG”. Svg.org. 2010년 1월 8일에 원본 문서에서 보존된 문서. 2010년 10월 24일에 확인함.
  29. ↑ See www.w3.org/TR/SVG11/conform.html#ConformingSVGViewers which states, "SVG implementations must correctly support gzip-encoded [RFC 1952] and deflate-encoded [RFC 1951] data streams, for any content type (including SVG, script files, images)."
  30. ↑ “Saving compressed SVG (SVGZ)”. 《SVG Zone》. Adobe Systems. 2009년 7월 14일. 2010년 6월 1일에 원본 문서에서 보존된 문서. 2010년 2월 24일에 확인함.
  31. ↑ For example, dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/conform-viewers-01-t.html
  32. ↑ “SVG specification, "Paths"”. World Wide Web Consortium. 2003년 1월 14일. 2012년 6월 21일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  33. ↑ “SVG specification, "Basic Shapes"”. World Wide Web Consortium. 2003년 1월 14일. 2009년 10월 2일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  34. ↑ “SVG specification, "Text"”. World Wide Web Consortium. 2003년 1월 14일. 2009년 10월 6일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  35. ↑ “SVG specification, "Painting: Filling, Stroking and Marker Symbols"”. World Wide Web Consortium. 2003년 1월 14일. 2009년 9월 17일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  36. ↑ “SVG specification, "Color"”. World Wide Web Consortium. 2003년 1월 14일. 2009년 9월 7일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  37. ↑ “SVG specification, "Gradients and Patterns"”. World Wide Web Consortium. 2003년 1월 14일. 2009년 9월 21일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  38. ↑ “IRC log of svg on 2008-11-17”. W3C. 2008. 2016년 10월 10일에 원본 문서에서 보존된 문서. 2009년 5월 25일에 확인함. DS: Priorities should be layout, diffusion curves, 2.5D and make sure we work well with CSS on that
  39. ↑ “Propositions for the next SVG spec”. W3C. 2009년 3월 16일. 2011년 5월 14일에 원본 문서에서 보존된 문서. 2009년 5월 25일에 확인함. Indeed, we do plan to add new gradient capabilities to SVG in the next version, and we are looking into diffusion curves, which I think will meet your needs ... *Diffusion curves* seems really a great idea.
  40. ↑ Rusin, Zack (2008). “SVG in KDE: Freedom of Beauty”. SVG Open. 2009년 7월 22일에 원본 문서에서 보존된 문서. 2009년 5월 25일에 확인함.
  41. ↑ Orzan, Alexandrina; Bousseau, Adrien; Winnemöller, Holger; Barla, Pascal; Thollot, Joëlle; Salesin, David (2008). 《Diffusion Curves: A Vector Representation for Smooth-Shaded Images》 (PDF). 《ACM Transactions on Graphics》 27. doi:10.1145/1360612.1360691. 2009년 6월 18일에 원본 문서 (PDF)에서 보존된 문서. 2009년 5월 25일에 확인함.
  42. ↑ “Scalable Vector Graphics (SVG) 2, W3C Editor's Draft 13 June 2013”. SVG WG. 2013. 2013년 12월 4일에 원본 문서에서 보존된 문서. 2013년 9월 17일에 확인함.
  43. ↑ “SVG specification, "Clipping, Masking and Compositing"”. World Wide Web Consortium. 2003년 1월 14일. 2009년 12월 1일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  44. ↑ “SVG specification, "Filter Effects"”. World Wide Web Consortium. 2003년 1월 14일. 2006년 8월 28일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  45. ↑ “SVG specification, "Interactivity"”. World Wide Web Consortium. 2003년 1월 14일. 2019년 7월 5일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  46. ↑ “SVG specification, "Scripting"”. World Wide Web Consortium. 2003년 1월 14일. 2009년 10월 1일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  47. ↑ “SVG specification, "Animation"”. World Wide Web Consortium. 2003년 1월 14일. 2006년 8월 27일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  48. ↑ “SVG specification, "Fonts"”. World Wide Web Consortium. 2003년 1월 14일. 2009년 9월 26일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  49. ↑ “SVG specification, "Metadata"”. World Wide Web Consortium. 2009년 5월 3일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  50. ↑ Streichardt, Andreas (2003년 9월 16일). “KDE Conquers the Vectors with KSVG”. 《KDE News》. 2023년 6월 30일에 원본 문서에서 보존된 문서. 2012년 2월 11일에 확인함.
  51. ↑ “Bug 276431 - external SVG not loaded from img tag”. Mozilla. 2012년 10월 24일에 원본 문서에서 보존된 문서. 2011년 11월 9일에 확인함.틀:Inconsistent cite
  52. ↑ Lusotec (2009년 2월 25일). “SVG image not shown by Firefox”. 《mozilla.dev.tech.svg》. 구글 그룹스. 2011년 5월 14일에 원본 문서에서 보존된 문서. 2010년 2월 25일에 확인함.
  53. ↑ Brettz9 (2008년 8월 25일). “SVG In HTML Introduction”. 《Mozilla Developer Center》. 모질라. 2008년 12월 5일에 원본 문서에서 보존된 문서. 2010년 2월 25일에 확인함.
  54. ↑ Svensson, Peter (2008년 9월 10일). “Creator of Web spots a flaw in Internet Explorer”. NBC 뉴스. Associated Press. 2013년 11월 9일에 원본 문서에서 보존된 문서. 2010년 2월 25일에 확인함.
  55. ↑ “SVG in Firefox”. 《Mozilla Developer Center》. 모질라. 2009년 10월 23일. 2008년 6월 23일에 원본 문서에서 보존된 문서. 2010년 2월 25일에 확인함.
  56. ↑ “Mozilla SVG Status”. 모질라. 2010년 3월 5일에 원본 문서에서 보존된 문서. 2010년 2월 25일에 확인함.
  57. ↑ Mgjbot (2008년 1월 15일). “SVG improvements in Firefox 3”. 《Mozilla Developer Center》. 모질라. 2014년 2월 9일에 원본 문서에서 보존된 문서. 2010년 2월 25일에 확인함.
  58. ↑ “WebKit SVG Status”. 웹킷. 2010년 1월 5일. 2010년 2월 10일에 원본 문서에서 보존된 문서. 2010년 2월 25일에 확인함.
  59. ↑ “Windows Internet Explorer 8 Expert Zone Chat (19 June 2008)”. Microsoft. 2008년 6월 19일. 2010년 3월 17일에 원본 문서에서 보존된 문서. 2010년 10월 24일에 확인함.
  60. ↑ Schiller, Jeff (2010년 2월 13일). “SVG Support”. 2009년 2월 16일에 원본 문서에서 보존된 문서. 2010년 2월 25일에 확인함.
  61. ↑ “What's New in Internet Explorer 9”. 《마이크로소프트 개발자 네트워크》. 마이크로소프트. 2011년 3월 22일. 2011년 4월 5일에 원본 문서에서 보존된 문서. 2011년 3월 22일에 확인함.
  62. ↑ “SVG (Windows)”. 《Internet Explorer Dev Center》. 마이크로소프트. 2014년 3월 20일에 원본 문서에서 보존된 문서. 2014년 8월 27일에 확인함.
  63. ↑ “Microsoft Edge web platform features status and roadmap - Microsoft Edge Development”. 《developer.microsoft.com》. 2018년 4월 15일에 원본 문서에서 보존된 문서. 2018년 4월 19일에 확인함.
  64. ↑ “Get ready for plug-in free browsing”. MSDN. 2014. 2014년 12월 31일에 원본 문서에서 보존된 문서. 2014년 3월 5일에 확인함.
  65. ↑ “SVG Open 2005 Conference and Exhibition - Proceedings - Cartoon Oriented User Interfaces”. svgopen.org. 2010년 12월 3일에 원본 문서에서 보존된 문서. 2010년 8월 29일에 확인함.
  66. ↑ “Browser doesn't render SVG images”. 2011년 5월 20일에 원본 문서에서 보존된 문서. 2011년 1월 1일에 확인함.
  67. ↑ “Firefox Mobile 4.0b2 (beta) for Android supports SVG images”. 《안드로이드 Issue 1376》. 2010년 12월 16일. 2014년 8월 21일에 원본 문서에서 보존된 문서. 2014년 1월 29일에 확인함.
  68. ↑ “Support for SVG”. RIM. 2011년 10월 10일에 원본 문서에서 보존된 문서. 2011년 10월 6일에 확인함.
  69. ↑ “BlackBerry Torch The HTML5 Developer Scorecard”. 센차. 2014년 3월 5일에 원본 문서에서 보존된 문서. 2011년 10월 6일에 확인함.
  70. ↑ “S60 Product info”. S60.com. 2007년 10월 13일에 원본 문서에서 보존된 문서. 2009년 10월 19일에 확인함.
  71. ↑ “Nokia Releases Series 40 6th Edition Software Development Kit For World's Highest-Volume Mobile Developer Platform”. 《www.fieldtechnologiesonline.com》. 2025년 6월 12일에 확인함.
  72. ↑ Jezic, Damir (2002년 7월 17일). “SVG for Embedded Systems”. 《Zurich 2002》. svgopen.org. 2012년 3월 16일에 원본 문서에서 보존된 문서. 2012년 4월 5일에 확인함.
  73. ↑ “eSVG”. 《Intesis Intelligent Embedded Software》. 2010. 2012년 3월 3일에 원본 문서에서 보존된 문서. 2014년 1월 29일에 확인함.
  74. ↑ Selinger, Peter (2001–2013). “Potrace – Transforming bitmaps into vector graphics”. 《소스포지 project Potrace》. 2009년 9월 9일에 원본 문서에서 보존된 문서. 2014년 1월 29일에 확인함.
  75. ↑ “What's new in PowerPoint for Microsoft 365” (미국 영어). 《support.microsoft.com》. September 2019. 2021년 3월 13일에 원본 문서에서 보존된 문서. 2021년 4월 17일에 확인함.
  76. ↑ Nguyen, Thanh Nguyen (2019년 11월 7일). “Anatomy of Scalable Vector Graphics (SVG) Attack Surface on the Web”. 《Fortinet Blog》. 2023년 2월 21일에 원본 문서에서 보존된 문서. 2023년 2월 21일에 확인함.
  77. 1 2 “SVG Security - W3C Wiki”. 《W3C》. 2023년 2월 21일에 원본 문서에서 보존된 문서. 2023년 2월 21일에 확인함.
  78. ↑ Concolato, Cyril (July 2005). “MPEG-4 LASeR white paper”. 국제 표준화 기구. 2011년 7월 25일에 원본 문서에서 보존된 문서. 2010년 8월 29일에 확인함.
  79. ↑ “ISO/IEC 14496-20:2008 - Information technology – Coding of audio-visual objects – Part 20: Lightweight Application Scene Representation (LASeR) and Simple Aggregation Format (SAF)”. 국제 표준화 기구. 2011년 5월 14일에 원본 문서에서 보존된 문서. 2009년 10월 30일에 확인함.
  80. ↑ “LASeR - the MPEG standard for Rich Media Services” (PDF). 2011년 2월 21일에 원본 문서 (PDF)에서 보존된 문서. 2010년 4월 11일에 확인함.
  81. ↑ Chiariglione, Leonardo ( 8 March 2005). “Riding the media bits - Bits and bytes”. 25 September 2010에 원본 문서에서 보존된 문서. 30 October 2009에 확인함.

외부 링크