SVG

다른 뜻 종류 = 벡터 이미지 **스케일러블 벡터 그래픽스**(Scalable Vector Graphics, **SVG**)는 XML 기반의 벡터 그래픽스 형식으로, 2차원 그래픽스를 정의하며 상호작용 및 애니메이션을 지원한다. SVG 사양은 1999년부터 월드 와이드 웹 컨소시엄에 의해 개발된 개방형 표준이다. SVG 이미지는 벡터 그래픽스 형식으로 정의되고 XML 텍스트 파일로 저장된다. 따라서 SVG 이미지는 품질 손실 없이 크기를 조정할 수 있으며, SVG 파일은 검색, 색인화, 스크립트 처리, 압축이 가능하다. XML 텍스트 파일은 문서 편집기 또는 벡터 드로잉 프로그램으로 생성 및 편집할 수 있으며, 대부분의 웹 브라우저에서 렌더링된다. SVG는 자바스크립트를 포함할 수 있으며, 이는 잠재적으로 사이트 간 스크립팅으로 이어질 수 있다.
# 역사
SVG는 1998년 동안 벡터 그래픽 언어에 대한 6개의 경쟁 제안이 컨소시엄에 제출된 후 (아래 참조), 1999년부터 월드 와이드 웹 컨소시엄 (W3C) 내에서 개발되어 왔다. 초기 SVG 워킹 그룹은 상업적 제출물 중 어떤 것도 개발하지 않고, 그것들로부터 정보를 얻었지만 실제로 기반을 두지는 않은 새로운 마크업 언어를 만들기로 결정했다.url-status=live SVG는 1998년부터 W3C SVG 워킹 그룹에 의해 개발되었으며, 그 해에 6개의 경쟁 벡터 그래픽 제출물이 접수되었다. * CCLRC의 웹 스케마틱스url-status=live * 어도비 시스템즈, IBM, 넷스케이프, 썬 마이크로시스템즈의 PGMLurl-status=live * 오토데스크, 휴렛 팩커드, 매크로미디어, 마이크로소프트, 비전 코퍼레이션의 VMLurl-status=live * 오렌지 UK와 PRP의 하이퍼 그래픽스 마크업 언어 (HGML)url-status=live * 보잉, PTC, InterCAP Graphics Systems, Inso Corporation, CCLRC, 제록스의 WebCGMurl-status=live * 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 외에도 여러 새로운 기능을 포함한다.url-status=live
## 버전 1.x
* SVG 1.0은 2001년 9월 4일에 W3C 권고안이 되었다.url-status=live * SVG 1.1은 2003년 1월 14일에 W3C 권고안이 되었다.url-status=live SVG 1.1 사양은 부분 집합을 프로필로 정의할 수 있도록 모듈화되어 있다. 이 외에는 SVG 1.1과 SVG 1.0 사이에 거의 차이가 없다. ** SVG Tiny 및 SVG Basic (모바일 SVG 프로필)은 2003년 1월 14일에 W3C 권고안이 되었다. 이들은 SVG 1.1의 프로필로 설명된다.url-status=live * SVG Tiny 1.2는 2008년 12월 22일에 W3C 권고안이 되었다.url-status=live 이전에 계획된 SVG Full 1.2 (이후 SVG 2로 대체됨)의 프로필로 초안이 작성되었지만,url-status=live 나중에 독립형 사양으로 재구성되었다. 일반적으로 지원이 좋지 않다. * SVG 1.1 Second Edition은 원본 SVG 1.1에 대한 모든 오류 및 설명이 포함되었지만 새로운 기능은 없으며 2011년 8월 16일에 출시되었다.url-status=live * SVG Tiny 1.2 Portable/Secure는 SVG Tiny 1.2 프로필의 더 안전한 부분 집합으로 2020년 7월 29일에 IETF 초안 표준으로 도입되었다.url-status=live SVG Tiny P/S라고도 알려져 있다. SVG Tiny 1.2 Portable/Secure는 BIMI 초안 표준의 요구 사항이다.url-status=live
## 버전 2
SVG 2는 SVG 1.1의 일부 기능을 제거하거나 사용을 중단하고 HTML5 및 웹 오픈 폰트 형식 (WOFF)의 새로운 기능을 통합한다. * 예를 들어, SVG 2는 `glyph` 및 `altGlyph`와 같은 여러 글꼴 요소를 제거한다 (WOFF로 대체). * `xml:space` 속성은 CSS를 선호하여 사용이 중단되었다. * `translate` 및 `data-*` 속성과 같은 HTML5 기능이 추가되었다. * SVG Tiny 1.2의 텍스트 처리 기능은 포함될 것으로 주석 처리되어 있지만, 텍스트로 아직 공식화되지 않았다.url-status=live 다른 1.2 기능 중 일부는 선별적으로 포함되지만,url-status=live SVG 2는 일반적으로 SVG tiny 1.2의 상위 집합이 아니다. SVG 2는 2016년 9월 15일에 권고 후보 단계에 도달했으며,url-status=live 2018년 8월 7일과 2018년 10월 4일에 개정판이 발행되었다.url-status=live 최신 초안은 2023년 3월 8일에 발표되었다.url-status=live
# 기능
확대하면 비트맵은 픽셀이 드러나지만 벡터 이미지는 모양이 유지된다.]] SVG는 상호작용성, 애니메이션 및 풍부한 그래픽 기능을 지원하여 웹 및 인쇄 애플리케이션 모두에 적합하다. SVG 이미지는 Gzip 알고리즘으로 압축할 수 있으며, 이로 인해 원본보다 일반적으로 20~50% 작은 SVGZ 파일이 생성된다. SVG는 또한 메타데이터를 지원하여 SVG 콘텐츠의 색인화, 검색 및 검색을 개선한다. SVG는 세 가지 유형의 그래픽 객체를 허용한다: 벡터 그래픽 도형 (직선 및 곡선으로 구성된 경로 등), 비트맵 이미지, 그리고 텍스트. 그래픽 객체는 그룹화, 스타일 지정, 변환 및 이전에 렌더링된 객체로 합성될 수 있다. 기능 세트에는 중첩된 변환, 클리핑 패스, 알파 마스크, 필터 효과 및 템플릿 객체가 포함된다. SVG 도면은 대화형이며, SVG XML 요소 또는 SVG 문서 객체 모델 (DOM)에 접근하는 스크립팅을 통해 정의된 애니메이션을 포함할 수 있다. SVG는 스타일링에 CSS를 사용하고 스크립팅에 자바스크립트를 사용한다. SVG DOM 내에서 일반 텍스트로 나타나는 국제화와 지역화를 포함한 텍스트는 SVG 그래픽의 접근성을 향상시킨다.
## 인쇄
SVG 사양은 주로 벡터 그래픽스 마크업 언어에 중점을 두지만, 페이지 기술 언어인 어도비의 PDF와 같은 기본 기능을 포함하도록 설계되었다. 풍부한 그래픽을 위한 조항을 포함하며, 스타일링 목적의 CSS와 호환된다. SVG는 인쇄 페이지의 선택된 위치에 각 자체 및 이미지를 배치하는 데 필요한 정보를 가지고 있다.url-status=live
## 스크립팅 및 애니메이션
SVG 애니메이션 SVG 도면은 동적이고 상호작용적일 수 있다. 요소에 대한 시간 기반 수정은 SMIL에 설명되거나 스크립트 언어 (자바스크립트 등)로 프로그래밍될 수 있다. W3C는 SVG 애니메이션의 표준으로 SMIL을 명시적으로 권장한다.url-status=live "onmouseover" 및 "onclick"과 같은 풍부한 이벤트 핸들러 세트를 모든 SVG 그래픽 객체에 할당하여 작업 및 이벤트를 적용할 수 있다.
## 모바일 프로필
업계 수요로 인해 SVG 1.1에 두 가지 모바일 프로필인 SVG Tiny (SVGT)와 SVG Basic (SVGB)이 도입되었다. 이들은 전체 SVG 표준의 부분 집합이며, 주로 제한된 기능을 가진 사용자 에이전트를 위해 고안되었다. 특히 SVG Tiny는 휴대폰과 같이 고도로 제한된 모바일 장치를 위해 정의되었으며, 스타일링이나 스크립팅을 지원하지 않는다.url-status=live SVG Basic은 스마트폰과 같은 상위 수준 모바일 장치를 위해 정의되었다. 2003년, 국제 통신 표준 그룹인 3GPP는 SVG Tiny를 차세대 전화의 필수 벡터 그래픽 미디어 형식으로 채택했다. SVGT는 필수 벡터 그래픽 형식이며, 멀티미디어 메시지 서비스 (MMS) 및 패킷 교환 스트리밍 서비스에 대한 SVGB 지원은 선택 사항이다.url-status=liveurl-status=liveurl-status=live 나중에 IP 멀티미디어 서브시스템 (IMS)의 벡터 그래픽스 필수 형식으로 추가되었다.url-status=live 어떤 모바일 프로필도 전체 문서 객체 모델 (DOM) 지원을 포함하지 않으며, SVG Basic만 스크립팅에 대한 선택적 지원을 제공하지만, 전체 표준과 완벽하게 호환되는 부분 집합이기 때문에 대부분의 SVG 그래픽은 모바일 프로필만 지원하는 장치에서도 렌더링될 수 있다.archive-date=8 January 2010 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 호환 뷰어는 압축된 이미지를 표시한다.See http://www.w3.org/TR/SVG11/conform.html#ConformingSVGViewers which states, "SVG implementations must correctly support gzip-encoded [1952] and deflate-encoded [1951] data streams, for any content type (including SVG, script files, images)." SVGZ 파일은 일반적으로 원본 크기의 20~50퍼센트이다.publisher=Adobe Systems W3C는 적합성을 테스트하기 위해 SVGZ 파일을 제공한다.For example, http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/conform-viewers-01-t.html
# 디자인
SVG 1.1 사양은 14개의 기능 영역 또는 기능 세트를 정의한다. ;경로 :곡선 또는 직선으로 구성된 단순하거나 복합적인 모양의 윤곽은 채우거나 윤곽을 그리거나 클리핑 패스로 사용할 수 있다. 경로는 간결한 코딩을 갖는다. :예를 들어, `M` ("이동"을 의미)은 초기 숫자 x 및 y 좌표 앞에 오고, `L` ("선 그리기"를 의미)은 선을 그릴 점 앞에 온다. 추가 명령 문자(`C`, `S`, `Q`, `T`, 및 `A`)는 다양한 베지에 및 타원형 곡선을 그리는 데 사용되는 데이터 앞에 온다. `Z`는 경로를 닫는 데 사용된다. :모든 경우에 대문자 명령 뒤에는 절대 좌표가 오고, 해당 소문자 뒤에는 상대 좌표가 사용된다.url-status=live ;기본 도형 :직선 경로와 일련의 연결된 직선 세그먼트(폴리라인)로 구성된 경로뿐만 아니라 닫힌 다각형, 원, 타원을 그릴 수 있다. 직사각형과 둥근 모서리 직사각형도 표준 요소이다.url-status=live ;텍스트 :SVG 파일에 포함된 유니코드 문자 텍스트는 XML 문자 데이터로 표현된다. 많은 시각 효과가 가능하며, SVG 사양은 자동으로 양방향 텍스트(예: 영어와 아랍어 텍스트의 조합 구성), 세로 텍스트(예: 중국어 또는 일본어 쓰기) 및 곡선 경로를 따라 있는 문자(예: 미국의 국장 가장자리의 텍스트)를 처리한다.url-status=live ;그리기 :SVG 도형은 채워지거나 윤곽이 그려질 수 있다 (색상, 그라디언트 또는 패턴으로 채색). 채우기는 불투명하거나 투명도를 가질 수 있다. :"마커"는 화살촉과 같은 선 끝 기능 또는 다각형의 꼭짓점에 나타날 수 있는 기호이다.url-status=live ;색상 :색상은 모든 가시적인 SVG 요소에 직접 또는 `fill`, `stroke` 및 기타 속성을 통해 적용될 수 있다. 색상은 CSS2와 동일한 방식으로 지정된다. 즉, `black` 또는 `blue`와 같은 이름, `#2f0` 또는 `#22ff00`와 같은 십육진법 값, `rgb(255,255,127)`와 같은 십진법 값 또는 `rgb(100%,100%,50%)`와 같은 백분율 형식으로 지정한다.url-status=live ;그라디언트 및 패턴 :SVG 도형은 위와 같이 단색으로 채워지거나 윤곽이 그려질 수 있으며, 색상 그라디언트 또는 반복 패턴으로도 가능하다. 색상 그라디언트는 선형 또는 방사형(원형)일 수 있으며, 임의의 수의 색상과 반복을 포함할 수 있다. 불투명도 그라디언트도 지정할 수 있다. 패턴은 미리 정의된 래스터 또는 벡터 그래픽 객체를 기반으로 하며, x 및 y 방향으로 반복될 수 있다. 그라디언트와 패턴은 애니메이션 및 스크립트 처리될 수 있다.url-status=live :2008년부터 SVG의 전문 사용자들 사이에서 그라디언트 메시 또는 바람직하게는 확산 곡선을 SVG 사양에 유용하게 추가할 수 있다는 논의가 있었다.url-status=liveurl-status=live "확산 곡선을 사용한 간단한 표현이 매우 미묘한 음영 효과까지 표현할 수 있다"고 한다.url-status=live 또한 "확산 곡선 이미지는 품질과 코딩 효율성 모두에서 그라디언트 메시와 유사하지만 (여러 아티스트들이 두 도구를 사용해 본 결과) 생성하기가 더 간단하며, 비트맵에서 완전 자동화로 캡처할 수 있다."url-status=live SVG 2의 현재 초안에는 그라디언트 메시가 포함되어 있다.url-status=live ;클리핑, 마스킹 및 합성 :텍스트, 경로, 기본 도형 및 이들의 조합을 포함한 그래픽 요소는 내부 및 외부 영역을 정의하는 윤곽선으로 사용될 수 있으며, 이 영역들은 독립적으로 채색될 수 있다 (색상, 그라디언트 및 패턴 사용). 완전 불투명 클리핑 경로와 반투명 마스크는 함께 합성되어 알파 블렌딩을 사용하여 최종 이미지의 각 픽셀의 색상과 불투명도를 계산한다.url-status=live ;필터 효과url-status=live :SVG 필터 효과 :필터 효과는 주어진 원본 벡터 그래픽에 일련의 그래픽 연산을 적용하여 수정된 비트맵 결과를 생성하는 것으로 구성된다. ;상호작용성 :SVG 이미지는 다양한 방식으로 사용자와 상호작용할 수 있다. 아래에서 언급된 하이퍼링크 외에도 SVG 이미지의 어떤 부분도 포커스 변경, 마우스 클릭, 이미지 스크롤 또는 확대/축소 및 기타 포인터, 키보드 및 문서 이벤트와 같은 사용자 인터페이스 이벤트에 반응하도록 만들 수 있다. 이벤트 핸들러는 이러한 이벤트에 대한 응답으로 애니메이션을 시작, 중지 또는 변경하거나 스크립트를 트리거할 수 있다.url-status=live ;링크 :SVG 이미지는 XLink를 사용하여 다른 문서에 대한 하이퍼링크를 포함할 수 있다. `` 요소 또는 프래그먼트 식별자를 사용하여 URL은 문서의 가시 영역을 변경하는 SVG 파일에 링크할 수 있다. 이를 통해 특정 영역을 확대/축소하거나 보기를 특정 요소로 제한하는 데 사용되는 특정 보기 상태를 만들 수 있다. 이는 스프라이트를 만들 때 유용하다. XLink 지원과 `` 요소의 조합은 내부 및 외부 요소를 링크하고 재사용하는 것도 허용한다. 이를 통해 코더는 더 적은 마크업으로 더 많은 작업을 수행하고 더 깔끔한 코드를 만들 수 있다.url-status=live ;스크립팅 :SVG 문서의 모든 측면은 HTML과 유사한 방식으로 스크립트를 사용하여 접근하고 조작할 수 있다. 기본 스크립팅 언어는 자바스크립트이며, 모든 SVG 요소 및 속성에 대한 정의된 문서 객체 모델 (DOM) 객체가 있다. 스크립트는 `` 요소 안에 포함된다. 필요에 따라 포인터 이벤트, 키보드 이벤트 및 문서 이벤트에 응답하여 실행될 수 있다.url-status=live ;애니메이션 :SVG 애니메이션 : SVG 콘텐츠는 ``, ``, ``와 같은 내장 애니메이션 요소를 사용하여 애니메이션화할 수 있다. ECMAScript 및 스크립팅 언어의 내장 타이머를 사용하여 DOM을 조작하여 콘텐츠를 애니메이션화할 수 있다. SVG 애니메이션은 SMIL (Synchronized Multimedia Integration Language)의 현재 및 미래 버전과 호환되도록 설계되었다. 애니메이션은 연속적일 수 있으며, 루프 및 반복될 수 있고, 위에서 언급한 대로 사용자 이벤트에 반응할 수 있다.url-status=live ;글꼴 :HTML 및 CSS와 마찬가지로 SVG의 텍스트는 시스템 글꼴과 같은 외부 글꼴 파일을 참조할 수 있다. SVG 파일이 렌더링되는 시스템에 필요한 글꼴 파일이 없으면 텍스트가 의도한 대로 표시되지 않을 수 있다. 이러한 제한을 극복하기 위해 텍스트는 SVG 글꼴로 표시될 수 있으며, 여기서 필요한 자체는 SVG에서 글꼴로 정의된 다음 `` 요소에서 참조된다.url-status=live ;메타데이터 :W3C의 시맨틱 웹 이니셔티브에 따라 SVG는 작성자가 SVG 콘텐츠에 대한 메타데이터를 제공할 수 있도록 한다. 주요 기능은 `` 요소로, 더블린 코어 메타데이터 속성 (예: 제목, 생성자/저자, 주제, 설명 등)을 사용하여 문서를 설명할 수 있다. 다른 메타데이터 스키마도 사용될 수 있다. 또한 SVG는 작성자가 SVG 이미지 내에 일반 텍스트 설명 자료를 제공하여 다양한 수단으로 색인화, 검색 및 검색을 돕도록 `` 및 `` 요소를 정의한다.url-status=live SVG 문서는 도형, 그라디언트 등 구성 요소를 정의하고 반복적으로 사용할 수 있다. SVG 이미지는 PNG 및 JPEG 이미지와 같은 래스터 그래픽스와 다른 SVG 이미지를 포함할 수도 있다. 파일:SVG example markup 이 코드는 그리드와 레이블을 제외한 이미지에 표시된 색상이 지정된 도형을 생성한다:
# 구현
웹에서 SVG 사용은 구형 인터넷 익스플로러 (IE) 버전의 지원 부족으로 제한되었다. SVG 이미지를 제공하는 많은 웹사이트는 HTTP 콘텐츠 협상을 통해 자동으로 또는 사용자가 직접 파일을 선택하도록 허용하여 이미지를 래스터 형식으로도 제공한다.
## 웹 브라우저
Konqueror는 2004년 2월 3.2 버전에서 처음으로 SVG를 지원한 브라우저이다.url-status=live 2011년을 기준으로 모든 주요 데스크톱 브라우저와 많은 소규모 브라우저가 어느 정도 SVG를 지원한다. 다른 브라우저의 구현은 아직 완전하지 않다. 자세한 내용은 레이아웃 엔진 비교를 참조하라. 일부 이전 버전의 파이어폭스(예: 1.5에서 3.6 사이 버전url-status=livedate=February 2023) 및 기타 현재는 구형 웹 브라우저는 SVG 그래픽을 표시할 수 있지만, HTML 요소 ``를 사용하여 이미지를 통합하는 표준 방식 대신 `` 또는 ``에 포함해야 HTML 웹페이지의 일부로 통합하여 표시할 수 있었다.url-status=live 그러나 SVG 이미지는 XML 네임스페이스를 사용하여 XHTML 페이지에 포함될 수 있다.url-status=dead 월드 와이드 웹의 발명가인 팀 버너스리는 SVG를 지원하지 않는 초기 버전의 인터넷 익스플로러를 비판했다.url-status=live * 오페라 (8.0부터)는 SVG 1.1 Tiny 사양을 지원하며, 오페라 9는 SVG 1.1 Basic 지원 및 SVG 1.1 Full의 일부를 포함한다. 오페라 9.5는 SVG Tiny 1.2를 부분적으로 지원한다. 또한 SVGZ (압축 SVG)도 지원한다. * 게코 레이아웃 엔진 기반 브라우저(예: 모질라 파이어폭스, 플로크, 카미노, 시몽키)는 모두 2005년부터 SVG 1.1 Full 사양을 불완전하게 지원했다. 모질라 사이트에는 파이어폭스에서 지원되는 모듈에 대한 개요url-status=dead와 개발 중인 모듈에 대한 개요가 있다.url-status=live 파이어폭스 3.0에 포함된 게코 1.9는 SVG 사양의 더 많은 부분(필터 포함)에 대한 지원을 추가한다.url-status=live * 고아나 레이아웃 엔진(게코 엔진의 포크)을 사용하는 페일 문은 SVG를 지원한다. * 애플의 사파리, 구글 크롬, 더 옴니 그룹의 옴니웹과 같은 웹킷 기반 브라우저는 2006년부터 SVG 1.1 Full 사양을 불완전하게 지원했다.url-status=live * 어마야는 부분적으로 SVG를 지원한다. * 인터넷 익스플로러 8 및 이전 버전은 SVG를 지원하지 않는다.url-status=liveurl-status=live IE9 (2011년 3월 14일 출시)는 기본 SVG 기능 세트를 지원한다.url-status=live IE10은 SVG 1.1 필터를 추가하여 SVG 지원을 확장했다.url-status=live * Microsoft Edge Legacy는 SVG 1.1을 지원한다.url-status=live * Maxthon Cloud Browser도 SVG를 지원한다. 네이티브 및 전체 지원에는 여러 가지 장점이 있다. 플러그인이 필요하지 않고, SVG를 단일 문서의 다른 콘텐츠와 자유롭게 혼합할 수 있으며, 렌더링 및 스크립팅이 훨씬 더 안정적이다.url-status=live
## 모바일 장치
SVG 지원은 구형 또는 더 제한적인 스마트폰에서 SVGT로 제한되거나 해당 운영 체제에 의해 주로 제한될 수 있다. 어도비 플래시 라이트는 버전 1.1부터 선택적으로 SVG Tiny를 지원했다. SVG Open 2005 컨퍼런스에서 썬은 Connected Limited Device Configuration (CLDC) 플랫폼을 위한 SVG Tiny 1.1의 모바일 구현을 시연했다.url-status=live 오페라 모바일을 사용하는 휴대폰과 아이폰의 내장 브라우저도 SVG를 지원한다. 그러나 웹킷 엔진을 사용했음에도 불구하고 안드로이드 내장 브라우저는 3.0 (허니콤) 이전에는 SVG를 지원하지 않았다.url-status=live 3.0 이전에는 안드로이드용 파이어폭스 모바일 4.0b2 (베타)가 기본적으로 SVG를 지원하는 안드로이드에서 실행되는 첫 번째 브라우저였다.url-status=live 사용 가능한 SVG Tiny 지원 수준은 모바일 장치마다 다르며, 설치된 SVG 엔진에 따라 달라진다. 많은 최신 모바일 제품은 그라디언트 및 불투명도와 같은 SVG Tiny 1.1 이상의 추가 기능을 지원한다. 이는 때때로 "SVGT 1.1+"라고 불리지만, 그러한 표준은 없다. RIM의 블랙베리는 버전 5.0부터 SVG Tiny 1.1을 내장 지원한다.url-status=dead OS 6 및 7의 웹킷 기반 블랙베리 토치 브라우저에서도 계속 지원된다.url-status=live 노키아의 S60 플랫폼은 SVG를 내장 지원한다. 예를 들어, 아이콘은 일반적으로 플랫폼의 SVG 엔진을 사용하여 렌더링된다. 노키아는 또한 JSR 226: SVG 프리젠테이션 및 조작을 위한 자바 ME API를 정의하는 Scalable 2D Vector Graphics API 전문가 그룹을 이끌었다. 이 API는 S60 플랫폼 3rd Edition Feature Pack 1부터 구현되었다.access-date=19 October 2009 일부 Series 40 휴대폰도 SVG를 지원한다 (예: 노키아 6280).website=www.fieldtechnologiesonline.com 소니 에릭슨 휴대폰 대부분은 K700 (출시일 기준)부터 SVG Tiny 1.1을 지원한다. K750부터의 휴대폰은 불투명도 및 그라디언트와 같은 기능도 지원한다. 소니 에릭슨 자바 플랫폼-8을 사용하는 휴대폰은 JSR 226을 지원한다. 윈도우 폰은 버전 7.5부터 SVG를 지원한다. SVG는 모토로라, 삼성, LG, 지멘스 모바일/BenQ-지멘스의 다양한 모바일 장치에서도 지원된다. 임베디드 장치를 위해 주로 작성된 SVG 렌더링 라이브러리인 eSVG는 일부 모바일 플랫폼에서 사용할 수 있다.url-status=liveurl-status=live
## 작성
수동으로 코드를 입력하고 벡터 그래픽 편집기를 사용하는 것 외에도 사용자는 스프레드시트 프로그램의 concatenate 함수를 사용하여 숫자 셀 값과 텍스트 문자열을 연속으로 결합하여 완전한 SVG 선언을 생성할 수 있다. SVG 이미지는 손으로 코딩하거나 잉크스케이프, 어도비 일러스트레이터, 어도비 애니메이트 또는 코렐드로와 같은 벡터 그래픽 편집기를 사용하여 제작할 수 있으며, 동일한 소프트웨어를 사용하여 PNG와 같은 일반적인 래스터 이미지 형식으로 렌더링할 수 있다. 또한 잉크스케이프 및 Boxy SVG와 같은 편집기는 일반적으로 포트레이스,url-status=live autotrace 및 imagetracerjs와 같은 이미지 추적 백엔드를 사용하여 래스터 이미지를 베지에 곡선으로 추적하는 도구를 제공한다. 소프트웨어는 2000년부터 그놈이 사용하는 librsvg, 바틱, 그리고 경량 시스템을 위한 2020년부터 ThorVG (Thor Vector Graphics)와 같은 라이브러리를 사용하여 SVG 이미지를 렌더링하도록 프로그래밍할 수 있다. SVG 이미지는 이미지매직, 무료 명령줄 유틸리티(내부적으로 librsvg를 사용함)를 사용하여 원하는 인기 이미지 형식으로 렌더링할 수도 있다. 웹 기반 애플리케이션의 경우 인라인 SVG라는 사용 모드를 통해 `` 태그를 사용하여 HTML 문서 내에 SVG 콘텐츠를 임베딩할 수 있다. SVG와 HTML이 컨텍스트, 이벤트 처리 및 CSS를 공유하므로 그래픽 기능을 사용하여 정교한 사용자 인터페이스를 만들 수 있다. SVG의 다른 용도로는 워드 프로세싱 (예: 리브레오피스) 및 탁상출판 (예: 스크라이버스)에서 사용하기 위한 임베딩, 그누플롯과 같은 그래프 플로팅, 김프 또는 블렌더에서 사용하기 위한 경로 가져오기 등이 있다. 마이크로소프트 365 및 마이크로소프트 오피스 2019 애플리케이션 서비스는 SVG 이미지 내보내기,language=en-US 가져오기 및 편집을 지원한다. 애플에서 사용하는 SVG의 통일형식식별자는 `public.svg-image`이며 `public.image` 및 `public.xml`을 준수한다.
# 보안
HTML 문서와 유사하게, SVG는 스크립트나 CSS를 호스팅할 수 있는 문서 형식이다. 이는 공격자가 SVG 파일을 웹사이트에 업로드할 수 있을 때 문제가 되는데, 예를 들어 프로필 사진처럼 파일이 일반 그림으로 처리되지만 악성 콘텐츠를 포함하고 있는 경우이다.url-status=live 예를 들어, SVG 파일이 CSS 배경 이미지나 웹사이트의 로고, 또는 이미지 갤러리에 배포되면, 브라우저에서 이미지가 로드될 때 스크립트나 다른 콘텐츠를 활성화한다. 이는 브라우저를 잠그거나 (빌리언 래프스 공격) HTML 인젝션 및 사이트 간 스크립팅 공격으로 이어질 수 있다. 따라서 W3C는 SVG가 단순히 이미지로 사용될 때 특정 요구 사항을 규정한다: SVG 보안.url-status=live W3C는 인라인 SVG (웹사이트에 네이티브로 로드되는 SVG 파일)가 콘텐츠가 더 큰 문서의 일부이므로 스크립팅 및 CSS가 예상치 못한 것이 아니기 때문에 보안 위험이 적다고 본다.
# 관련 작업
MPEG-4 파트 20 표준 – 경량 애플리케이션 장면 표현 (LASeR) 및 단순 집계 형식 (SAF)은 SVG Tiny를 기반으로 한다.url-status=live 이 표준은 MPEG (ISO/IEC JTC 1/SC29/WG11)에 의해 개발되었고 ISO/IEC 14496-20:2006으로 발행되었다.url-status=live SVG 기능은 동적 업데이트, 이진 인코딩, 최신 글꼴 표현과 같은 모바일 서비스의 주요 기능으로 MPEG-4 파트 20에서 향상되었다.url-status=live SVG는 XML을 사용하여 MPEG-4 멀티미디어 콘텐츠를 텍스트로 표현하는 Extensible MPEG-4 Textual (XMT) 형식으로 MPEG-4 파트 11에도 수용되었다.df=dmy-all