맨위로가기

스케일러블 벡터 그래픽스

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

스케일러블 벡터 그래픽스(SVG)는 1998년 월드 와이드 웹 컨소시엄(W3C)이 제안한 웹에서의 벡터 그래픽 표현 방식에 대한 여러 경쟁적인 제안들을 기반으로 개발된 XML 기반의 마크업 언어이다. SVG는 1999년 초안 공표 후 2001년 SVG 1.0이 W3C 권고안으로 발표되었으며, 이후 SVG 1.1, SVG Tiny, SVG Basic, SVG Tiny 1.2, SVG 2 등의 버전이 개발되었다. 초기에는 인터넷 익스플로러의 지원 부족으로 채택에 제한이 있었으나, 현재 대부분의 주요 웹 브라우저에서 지원하며, HTML5 및 웹 오픈 폰트 형식의 새로운 기능을 통합하고 있다. SVG는 벡터 그래픽스 특성상 확대/축소 시 화질 저하가 없고, XML 기반으로 웹 브라우저에서 열람 및 편집이 가능하며, 상호 작용, 애니메이션, 다양한 그래픽 기능, 텍스트 표현, 메타데이터 지원, 스크립팅, 폰트 지원 등을 제공한다. SVG는 MPEG-4 파트 20 표준의 기반이 되기도 하며, 잉크스케이프, 어도비 일러스트레이터 등 다양한 제작 도구에서 활용되고 있다.

더 읽어볼만한 페이지

  • XML 마크업 언어 - 무선 마크업 언어
    무선 마크업 언어(WML)는 초기 무선 인터넷 환경에서 텍스트 기반 콘텐츠를 위해 고안된 마크업 언어였으나, 스마트폰과 웹 기술 발전으로 사용이 제한적이다.
  • XML 마크업 언어 - 지리 마크업 언어
    지리 마크업 언어(GML)는 지리 정보를 전송 및 저장하기 위한 XML 기반 마크업 언어이며, 개방형 공간 정보 컨소시엄(OGC)에서 관리하는 국제 표준으로 ISO 19136:2007로 채택되었다.
  • SVG - 구글 스위피
    구글 스위피는 구글에서 개발한 웹 서비스로, SWF 파일을 JSON으로 직렬화한 후 자바스크립트를 통해 SVG로 변환하여 애니메이션을 구현하는 기술이었으나 2016년 7월 1일 서비스가 종료되었다.
  • SVG - 잉크스케이프
    잉크스케이프는 완전한 SVG 표준 구현을 목표로 개발된 자유-오픈 소스 벡터 그래픽 편집기로, 다양한 객체 조작 및 패스 연산 기능을 제공하며 여러 플랫폼을 지원하는 특징을 갖는다.
  • HTML5 - 구글 스위피
    구글 스위피는 구글에서 개발한 웹 서비스로, SWF 파일을 JSON으로 직렬화한 후 자바스크립트를 통해 SVG로 변환하여 애니메이션을 구현하는 기술이었으나 2016년 7월 1일 서비스가 종료되었다.
  • HTML5 - 웹 스토리지
    웹 스토리지는 웹 브라우저에서 클라이언트 측에 데이터를 저장하는 API로, 쿠키와 유사하지만 더 큰 저장 용량을 제공하며 로컬 스토리지와 세션 스토리지로 구분된다.
스케일러블 벡터 그래픽스 - [IT 관련 정보]에 관한 문서
일반 정보
SVG 로고
SVG 로고
명칭스케일러블 벡터 그래픽스
영어 명칭Scalable Vector Graphics
약자SVG
파일 확장자.svg, .svgz
MIME 형식image/svg+xml
Uniform Type Identifierpublic.svg-image
개발
개발 주체W3C
발표
최초 발표일2001년 9월 4일
최신 버전1.1 (Second Edition)
최신 버전 발표일2011년 8월 16일
기술 정보
종류벡터 그래픽
기반XML
표준W3C SVG
공개 여부예
웹사이트W3C SVG Working Group

2. 역사

SVG는 1998년 월드 와이드 웹 컨소시엄(W3C)에 여섯 개의 경쟁적인 벡터 그래픽 언어 제안이 제출된 후, 1999년부터 W3C 내에서 개발되기 시작했다.[2] 초기 SVG 작업 그룹은 상업적인 제안들의 영향을 받았지만, 이를 기반으로 하지 않은 새로운 마크업 언어를 만들기로 결정했다.[2]

초기에는 구 버전의 인터넷 익스플로러에서 지원이 부족하여 채택이 제한되었다. 그러나 2011년 현재, 모든 주요 데스크톱 브라우저가 SVG를 지원하기 시작했다. 네이티브 브라우저 지원은 플러그인이 필요 없고, SVG를 다른 콘텐츠와 혼합할 수 있으며, 렌더링 및 스크립팅 안정성을 개선하는 등 다양한 이점을 제공한다.

2. 1. 개발 배경

1998년 월드 와이드 웹 컨소시엄(W3C)는 6개의 경쟁적인 벡터 그래픽 언어 제안을 받았다. W3C SVG 작업 그룹은 이들 제안의 영향을 받았지만, 이를 기반으로 하지 않은 새로운 마크업 언어를 개발하기로 결정했다.[2]

W3C에 제출된 벡터 그래픽 제안은 다음과 같다.

제안제출 회사
웹 도식연구 위원회 중앙 연구소 협의회(CCLRC)[3]
PGML어도비 시스템즈(Adobe Systems), IBM, 넷스케이프(Netscape), 썬 마이크로시스템즈(Sun Microsystems)[4]
벡터 마크업 언어(VML)오토데스크(Autodesk), 휴렛 팩커드(Hewlett-Packard), 매크로미디어(Macromedia), 마이크로소프트(Microsoft), 비전 코퍼레이션(Vision Corporation)[5]
하이퍼 그래픽스 마크업 언어(HGML)오렌지 UK(Orange UK), 플리머스 대학교(PRP)[6]
컴퓨터 그래픽스 메타파일(WebCGM)보잉(Boeing), PTC (소프트웨어 회사)(PTC), InterCAP Graphics Systems, 스텔렌(Inso Corporation), 연구 위원회 중앙 연구소 협의회(CCLRC), 제록스(Xerox)[7]
DrawMLExcosoft AB[2]



당시 작업 그룹 의장은 W3C의 크리스 릴리(Chris Lilley)였다.

2. 2. SVG 버전 역사

SVG 버전 역사
날짜사건
1999년 2월 11일SVG 초안 발표[88]
2001년 9월 4일SVG 1.0 월드 와이드 웹 컨소시엄(W3C) 권고안 발표[9][116]
2003년 1월 14일SVG 1.1[10][89] 및 모바일 SVG 프로파일 (SVG Tiny, SVG Basic)[11][90] W3C 권고안 발표
2008년 12월 22일SVG Tiny 1.2[12][119] W3C 권고안 발표
2011년 8월 16일SVG 1.1 Second Edition (오류 수정) W3C 권고안 발표[14][117]
2016년 9월 15일SVG 2[8][19] W3C 후보 권고안 발표
2018년 10월 4일SVG 2[118] 수정된 W3C 후보 권고안 발표[20]
2020년 7월 29일SVG Tiny 1.2 Portable/Secure[15] 국제 인터넷 표준화 기구(IETF) 초안 표준 도입 (BIMI 요구 사항)[16]
2023년 3월 8일SVG 2 최신 초안 공개[21]


2. 3. 초기 채택 및 현재 상황

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

SVG 사양은 2011년에 버전 1.1로 업데이트되었다. SVG 2는 2016년 9월 15일에 W3C 후보 권고안이 되었다. SVG 2는 SVG 1.1 및 SVG Tiny 1.2의 기능 외에도 여러 가지 새로운 기능을 통합한다.[8]

3. 특징


비트맵 이미지와 벡터 이미지의 차이점을 보여주는 그림이다. 비트맵 이미지는 고정된 픽셀 집합으로 구성되어 있는 반면, 벡터 이미지는 고정된 도형 집합으로 구성되어 있다. 그림에서 비트맵 이미지를 확대하면 픽셀이 드러나지만, 벡터 이미지를 확대하면 도형이 유지된다.

3. 1. 기술 요소

SVG는 벡터 그래픽 도형, 비트맵 이미지, 텍스트 등 세 가지 유형의 그래픽 객체를 허용한다.[14] 이러한 그래픽 객체는 그룹화, 스타일 지정, 변환 및 이전에 렌더링된 객체로 합성될 수 있다. SVG는 중첩된 변환, 클리핑 패스, 알파 마스크, 필터 효과 및 템플릿 객체와 같은 다양한 기능을 제공한다.[14]

SVG 드로잉은 상호 작용적일 수 있으며, SVG XML 요소 내에서 또는 SVG 문서 객체 모델(DOM)에 접근하는 스크립팅을 통해 정의된 애니메이션을 포함할 수 있다.[14] SVG는 스타일 지정을 위해 CSS를 사용하고, 스크립팅을 위해 JavaScript를 사용하며, 국제화 및 지역화를 포함한 텍스트는 SVG 그래픽의 접근성을 향상시킨다.[14]

SVG는 PDF와 같은 페이지 설명 언어의 기본 기능을 포함하며, 풍부한 그래픽을 제공하고 CSS와 호환된다. SVG는 인쇄된 페이지에서 선택한 위치에 각 글리프와 이미지를 배치하는 데 필요한 정보를 가지고 있다.[22]

SVG 1.1 명세는 다음과 같은 14개의 기능 영역 또는 기능 집합을 정의한다:[10]

  • 경로: 단순하거나 복합적인 도형 윤곽선을 그리는 데 사용된다.
  • 기본 도형: 직선, 꺾은선, 다각형, 원, 타원, 사각형 등 기본적인 도형을 그리는 데 사용된다.
  • 텍스트: 유니코드 문자 텍스트를 표현하고 다양한 시각 효과를 적용할 수 있다.
  • 페인팅: 도형을 채우거나 윤곽선을 그리는 데 사용되며, 색상, 그라데이션, 패턴 등을 적용할 수 있다.
  • 색상: SVG 요소에 색상을 적용하는 방법을 정의한다.
  • 그라데이션 및 패턴: 도형을 색상 그라데이션이나 반복 패턴으로 채우는 방법을 정의한다.
  • 클리핑, 마스크, 합성: 그래픽 요소의 보이는 영역을 제어하고 합성하는 방법을 정의한다.
  • 필터 효과: 벡터 그래픽에 다양한 그래픽 효과를 적용하는 방법을 정의한다.
  • 상호 작용: SVG 이미지가 사용자와 상호 작용하는 방식을 정의한다.
  • 링크: SVG 이미지에서 다른 문서로 하이퍼링크를 연결하는 방법을 정의한다.
  • 스크립팅: JavaScript를 사용하여 SVG 요소를 조작하는 방법을 정의한다.
  • 애니메이션: SVG 콘텐츠에 애니메이션 효과를 적용하는 방법을 정의한다.
  • 글꼴: SVG 텍스트에 글꼴을 적용하는 방법을 정의한다.
  • 메타데이터: SVG 콘텐츠에 대한 정보를 제공하는 방법을 정의한다.


SVG 코드 예시


SVG 이미지는 PNG 및 JPEG 이미지와 같은 래스터 그래픽과 추가 SVG 이미지를 포함할 수 있다.

3. 1. 1. 경로 (Path)

SVG에서 경로는 직선 및 곡선으로 구성된 도형 윤곽선을 그리는 데 사용된다. 경로(`path`)는 간결한 코딩 방식을 사용하는데, 예를 들어 'M'(이동)은 초기 x 및 y 좌표를 지정하고, 'L'(선으로)은 선을 그릴 지점을 지정한다. 다양한 베지어 곡선 및 타원 곡선을 그리기 위해 C, S, Q, T, A와 같은 추가 명령 문자를 사용하며, 'Z'는 경로를 닫는 데 사용된다.[34]

경로를 구성하는 세그먼트의 형태를 지정하는 명령을 커맨드라고 하며, <path> 요소의 `d` 속성에 커맨드를 나열하여 패스의 모양을 지정한다.[93]

커맨드는 다음 20종류가 정의되어 있다:[94]

패스 커맨드
커맨드커맨드명기능출처
점
`M`/`m`moveto시작점을 배치한다[95]
선분
`L`/`l`lineto선분을 연장한다[96]
`H`/`h`horizontal lineto수평선분을 연장한다[97]
`V`/`v`vertical lineto수직선분을 연장한다[98]
`Z`/`z`closepath시작점으로 선분을 연장한다[99]
곡선
`C`/`c`curveto3차 베지어 곡선을 연장한다[100]
`S`/`s`smooth curveto폴리 3차 베지어 곡선을 부드럽게 연장한다[101]
`Q`/`q`quadratic Bézier curveto2차 베지어 곡선을 연장한다[102]
`T`/`t`smooth quadratic Bézier curveto폴리 2차 베지어 곡선을 부드럽게 연장한다[103]
`A`/`a`elliptical arc타원 호를 연장한다[104]



절대 좌표는 대문자 명령 뒤에, 상대 좌표는 해당 소문자 뒤에 사용된다.[34] SVG 도형은 패스의 집합이므로 많은 `d` 속성을 기술하게 되는데, 용량 최소화를 위해 다음과 같은 기법이 사용된다:[105]


  • 커맨드의 알파벳 표현 (''lineto'' → `'''L'''`)
  • 간이 버전의 커맨드 채용 (`'''l''' 0 300` → `'''v''' 300`)
  • 연속 커맨드의 생략 (`'''L''' 300 100 '''L''' 200 300` → `'''L''' 300 100 200 300`)
  • 구분자의 생략 (`'''L''' 300 100 '''L''' 200 300` → `'''L'''300 100'''L'''200 300`)


경로는 윤곽선, 클리핑 패스, 애니메이션 패스 등에 사용된다.[91]

3. 1. 2. 기본 도형 (Basic Shapes)

SVG는 직선, 꺾은선(polyline), 다각형, 원, 타원, 사각형(둥근 모서리 가능) 등 다양한 기본 도형을 지원한다.[35] 이러한 기본 도형들은 간단한 태그를 사용하여 쉽게 그릴 수 있다. 예를 들어, 원은 ``, 사각형은 `` 태그를 사용하여 표현할 수 있다.[35]

SVG에서 정의하는 기본 도형은 다음과 같다.[106]

  • `path`: 패스
  • `line`: 선분[107]
  • `polyline`: 꺾은선 (연결된 선분)[108]
  • `rect`: 직사각형. `rx` 및 `ry` 속성을 사용하여 모서리를 둥글게 처리할 수 있다.[109]
  • `polygon`: 다각형. 닫힌 (시작점과 종점이 동일한) `polyline`으로 둘러싸인 영역으로 표현된다.[110]
  • `circle`: 정원
  • `ellipse`: 타원


기본 도형 태그(DOM 인터페이스)를 사용하면 복잡한 도형을 쉽게 그릴 수 있다. 예를 들어, `` 태그를 사용하면 좌상단 좌표, 가로 길이, 세로 길이만 지정하여 직사각형을 그릴 수 있다. (예: ``)[106]

기본 도형은 구문 설탕으로, 패스(path)를 통해서도 동일한 도형을 그릴 수 있다.[111]

3. 1. 3. 텍스트 (Text)

SVG 파일에 포함된 유니코드 문자 텍스트는 XML 문자 데이터로 표현된다.[36] SVG 명세는 양방향 텍스트(예: 영어와 아랍어 텍스트 조합), 세로 텍스트(예: 중국어나 일본어 표기), 곡선 경로를 따르는 문자(예: 미국 국새의 가장자리에 있는 텍스트) 등 다양한 시각 효과를 자동으로 처리한다.[36]

3. 1. 4. 페인팅 (Painting)

SVG 도형은 색상, 그라데이션 및 패턴으로 채우거나 윤곽선을 그릴 수 있다. 채우기는 불투명하거나 투명도를 가질 수 있다.[37]

"마커"는 화살표나 다각형의 정점에 나타날 수 있는 기호와 같은 선 끝 기능이다.[37]

3. 1. 5. 색상 (Color)

색상은 모든 가시 SVG 요소에 직접 또는 `fill`, `stroke` 및 기타 속성을 통해 적용할 수 있다. 색상은 CSS2와 동일한 방식으로 지정된다. 즉, `black` 또는 `blue`와 같은 이름을 사용하거나, `#2f0` 또는 `#22ff00`과 같은 16진법으로, `rgb(255,255,127)`과 같은 10진법으로, 또는 `rgb(100%,100%,50%)` 형식의 백분율로 지정할 수 있다.[38]

3. 1. 6. 그라데이션 및 패턴 (Gradients and Patterns)

SVG 도형은 단색으로 채우거나 윤곽선을 그릴 수 있을 뿐만 아니라, 색상 그라데이션이나 반복 패턴으로도 채울 수 있다. 색상 그라데이션은 선형 또는 방사형(원형)일 수 있으며, 여러 색상과 반복을 포함할 수 있다. 불투명도 그라데이션도 지정할 수 있다. 패턴은 사전에 정의된 래스터 또는 벡터 그래픽 객체를 기반으로 하며, `x` 및 `y` 방향으로 반복될 수 있다. 그라데이션과 패턴은 애니메이션 및 스크립팅이 가능하다.[39]

2008년 이후, SVG 전문 사용자들 사이에서는 그라데이션 메시 또는 확산 곡선을 SVG 명세에 추가하는 것이 유용하다는 논의가 있었다.[40][41] "확산 곡선을 사용한 단순한 표현은 매우 미묘한 음영 효과까지 표현할 수 있다"[42]고 하며, "확산 곡선 이미지는 품질과 코딩 효율성 면에서 그라데이션 메시와 유사하지만, 생성하기 더 쉽고(두 도구를 모두 사용한 여러 아티스트에 따르면) 비트맵에서 완전히 자동으로 캡처할 수 있다."[43] SVG 2의 현재 초안에는 그라데이션 메시가 포함되어 있다.[44]

3. 1. 7. 클리핑, 마스크, 합성 (Clipping, Masking and Compositing)

텍스트, 경로, 기본 도형 및 이들의 조합을 포함한 그래픽 요소는 색상, 그라데이션 및 패턴으로 독립적으로 칠할 수 있는 내부 및 외부 영역을 정의하는 윤곽선으로 사용될 수 있다. 완전히 불투명한 "클리핑 패스"와 반투명한 "마스크"는 알파 합성을 사용하여 최종 이미지의 모든 픽셀의 색상과 불투명도를 계산하기 위해 함께 "합성"된다.[45]

3. 1. 8. 필터 효과 (Filter Effects)

필터 효과는 주어진 소스 벡터 그래픽에 적용하여 수정된 비트맵 결과를 생성하는 일련의 그래픽 작업이다.[46]

3. 1. 9. 상호 작용 (Interactivity)

SVG 이미지는 다양한 방식으로 사용자와 상호 작용할 수 있다. 사용자 인터페이스 이벤트(예: 포커스 변경, 마우스 클릭, 이미지 스크롤 또는 확대/축소 및 기타 포인터, 키보드 및 문서 이벤트)에 반응하도록 만들 수 있다.[47] "onmouseover" 및 "onclick"와 같은 다양한 이벤트 핸들러를 모든 SVG 그래픽 객체에 할당하여 액션과 이벤트를 적용할 수 있으며, 이벤트 처리기는 애니메이션을 시작, 중지 또는 변경하거나, 이러한 이벤트에 대한 응답으로 스크립트를 트리거할 수도 있다.

3. 1. 10. 링크 (Linking)

SVG 이미지는 XLink를 사용하여 다른 문서에 대한 하이퍼링크를 포함할 수 있다.[48] `` 요소 또는 프래그먼트 식별자를 사용하면 URL이 문서의 가시 영역을 변경하는 SVG 파일에 연결될 수 있다. 이를 통해 특정 영역을 확대/축소하거나 보기를 특정 요소로 제한하는 데 사용되는 특정 보기 상태를 만들 수 있다. 이것은 스프라이트를 만들 때 유용하다. XLink 지원은 `` 요소와 결합하여 내부 및 외부 요소를 연결하고 재사용할 수도 있다. 이를 통해 코더는 더 적은 마크업으로 더 많은 작업을 수행할 수 있으며 더 깔끔한 코드를 만들 수 있다.[48]

3. 1. 11. 스크립팅 (Scripting)

자바스크립트와 같은 스크립트 언어를 사용하여 SVG 문서의 모든 요소 및 속성에 접근하고 조작할 수 있다.[49] SVG 문서의 모든 측면에 HTML과 유사한 방식으로 스크립트를 사용하여 접근하고 조작할 수 있으며, 기본 스크립팅 언어는 JavaScript이다. 모든 SVG 요소 및 속성에 대해 정의된 문서 객체 모델 (DOM) 객체가 있다. 스크립트는 `<script>` 요소로 묶이며, 필요에 따라 포인터 이벤트, 키보드 이벤트 및 문서 이벤트에 대한 응답으로 실행할 수 있다.[49]

"onmouseover" 및 "onclick"와 같은 다양한 이벤트 핸들러를 모든 SVG 그래픽 객체에 할당하여 액션과 이벤트를 적용할 수 있다.[47]

3. 1. 12. 애니메이션 (Animation)

SVG 콘텐츠는 `<animate>`, `<animateMotion>`, `<animateColor>`와 같은 내장된 애니메이션 요소를 사용하여 애니메이션 처리할 수 있다.[50] ECMAScript를 사용하여 DOM을 조작하고 스크립팅 언어의 내장 타이머를 사용하여 콘텐츠를 애니메이션 처리할 수도 있다. SVG 애니메이션은 SMIL과 호환되도록 설계되었다. 애니메이션은 연속, 반복되거나 "onmouseover", "onclick"와 같은 다양한 이벤트 핸들러를 통해 사용자 이벤트에 응답할 수 있다.[50]

3. 1. 13. 글꼴 (Fonts)

SVG영어의 텍스트는 HTML 및 CSS와 같이 시스템 글꼴과 같은 외부 글꼴 파일을 참조할 수 있다.[51] 필요한 글꼴 파일이 SVG영어 파일이 렌더링되는 시스템에 존재하지 않으면 텍스트가 의도한 대로 표시되지 않을 수 있다. 이러한 제한을 극복하기 위해, 텍스트는 필요한 글리프가 SVG영어에서 `<text>` 요소로 참조되는 글꼴로 정의되는 "SVG 글꼴"로 표시될 수 있다.[51]

3. 1. 14. 메타데이터 (Metadata)

W3C의 시맨틱 웹 사업에 따라, SVG에서는 작성자가 SVG 콘텐츠에 대한 메타데이터를 제공할 수 있다. 주요 기능은 `<metadata>` 요소이며, 여기서 문서는 더블린 코어 메타데이터 속성(예: 제목, 제작자/저자, 주제, 설명 등)을 사용하여 설명할 수 있다. 다른 메타데이터 스키마도 사용할 수 있다. 또한 SVG는 작성자가 여러 가지 수단을 통해 인덱싱, 검색 및 검색을 지원하기 위해 SVG 이미지 내에 일반 텍스트 설명 자료를 제공할 수 있는 `<title>` 및 `<desc>` 요소를 정의한다.[52]

4. 구현

SVG는 XML로 기술되어 있으며, XML 특유의 다양한 기능을 정의한 요소를 갖는다. SVG는 자체적으로 회전, 확대, 이동 등의 표현을 정의하고 있어 단독으로 다양한 표현이 가능하다.

기존 웹사이트에서는 자바스크립트나 FLASH를 사용하여 인터랙티브한 쌍방향 화면 변화를 구현해왔다. HTML/XHTML에 SVG를 조합하면 자바스크립트나 FLASH 없이도 동일한 효과를 낼 수 있을 것으로 기대된다.

XML이므로, 전용 애플리케이션 없이도 일반적인 텍스트 파일로 제작 및 편집이 가능하다.

SVG 이미지는 잉크스케이프, 어도비 일러스트레이터, 어도비 플래시 프로페셔널, 코렐 드로우 등 벡터 그래픽 편집기로 제작할 수 있다.[22] librsvg, Batik, ThorVG (Thor Vector Graphics)와 같은 라이브러리를 사용하여 SVG 이미지를 렌더링할 수도 있다.[76] 또한, ImageMagick을 사용하여 SVG 이미지를 다른 형식으로 변환할 수 있다.

마이크로소프트 오피스 2019,[77] 리브레오피스, 구글 문서 등 다양한 오피스 소프트웨어에서도 SVG를 지원한다.

SVG는 XML을 사용하므로 텍스트 편집기로도 데이터 생성이 가능하지만, 기술이 매우 복잡하여 실용적으로는 GUI를 전제로 한 편집 소프트웨어가 필수적이다.

소프트웨어 종류소프트웨어 목록
SVG를 표준 데이터로 취급하고 읽고 쓰기가 가능한 것잉크스케이프, SVG Cats
SVG를 읽고 쓸 수 있는 것어도비 일러스트레이터, 마이크로소프트 비지오, 마이크로소프트 오피스 (Word, Excel, PowerPoint, Outlook)[121][122], 코렐 드로우, 어피니티 디자이너, 저스트시스템 Xfy, Dia, Mathematica, 리브레오피스 드로우, 구글 문서
일부 제한이 있는 것GIMP (읽기 지원, 내보내기는 패스 내보내기만 지원)
SVG 출력이 가능한 것하나코2006 (SVG Ver.1.0 준수), 오픈오피스 Draw (2.0부터 내보내기 지원, SVG Import Filter를 도입하면 읽기도 가능), Omni Group의 OmniGraffle Professional 4, R (데이터 분석 결과의 그래프 출력 형식으로 지원), Gnuplot 및 GNU Plotutils (플롯의 출력 형식으로 지원), Geometry Expressions (도형의 출력 형식으로 지원)



이 외에도, CAD 소프트웨어에는 읽고 쓰기 모두 지원하는 것이 많이 존재한다.

4. 1. 웹 브라우저 지원

Konqueror는 2004년 2월 3.2 버전에서 SVG를 지원하는 최초의 브라우저였다.[53] 2011년 현재, 오페라, 모질라 파이어폭스, 구글 크롬, 사파리 등 대부분의 주요 데스크톱 브라우저와 다수의 마이너 브라우저가 어느 정도 수준의 SVG를 지원한다. 다른 브라우저들의 구현은 아직 완전하지 않다.

인터넷 익스플로러는 IE9부터 SVG를 지원한다.[129] 이전 버전의 IE나, 해당 렌더링 엔진을 사용하는 브라우저에서는 서드 파티 플러그인을 사용하여 SVG 이미지를 표시해야 했다. 어도비 사에서 인터넷 익스플로러를 위한 플러그인이 나왔으나, 2009년 1월 1일부터 지원을 중단하였다.[128]

2022년 10월 현재에는 모질라 파이어폭스, 구글 크롬, 애플 사파리 등 대부분의 최신 브라우저에서 SVG를 지원한다.

브라우저지원 여부 및 버전비고
인터넷 익스플로러IE9부터 SVG 1.1 표준 지원[126]IE8 및 이전 버전은 SVG 미지원.[62][63] IE10은 SVG 1.1 필터 추가.[65]
마이크로소프트 엣지 레거시SVG 1.1 지원[66]
모질라 파이어폭스1.5부터 지원Gecko 레이아웃 엔진 기반. 2005년부터 SVG 1.1 Full 사양을 불완전하게 지원.[58][59] Firefox 3.0에 포함된 Gecko 1.9는 SVG 사양(필터 포함)에 대한 지원 추가.[60]
구글 크롬첫 번째 버전부터 지원
사파리3.0부터 SVG 1.1을 완전하지는 않지만 지원[127]WebKit 기반 브라우저. 2006년부터 SVG 1.1 Full 사양을 불완전하게 지원.[61]
오페라 및 오페라 모바일8.0부터 SVG 1.1 Tiny 지원, 9.0에서 SVG 1.1 Basic 지원 및 일부 SVG 1.1 Full 포함. 9.5는 부분적인 SVG Tiny 1.2 지원. SVGZ(압축 SVG)도 지원.오페라 미니는 5부터 지원.
Konqueror2004년 2월 3.2 버전에서 SVG를 지원하는 최초의 브라우저[53]KSVG를 사용하여 표시 가능.
Amaya부분적인 SVG 지원
Pale MoonSVG 지원Goanna 레이아웃 엔진(Gecko 엔진의 포크) 사용.
Maxthon Cloud BrowserSVG 지원
안드로이드 표준 브라우저Android 3.0부터 지원
NetFront Browser미지원



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

4. 2. 모바일 기기 지원

업계의 요구에 따라 SVG 1.1과 함께 두 가지 모바일 프로파일, 즉 ''SVG Tiny''(SVGT)와 ''SVG Basic''(SVGB)가 도입되었다. SVG Tiny는 휴대폰과 같이 매우 제약된 모바일 장치를 위해 정의되었으며, 스타일 지정이나 스크립팅을 지원하지 않는다.[24] SVG Basic은 스마트폰과 같이 더 높은 수준의 모바일 장치를 위해 정의되었다.

2003년, 국제 통신 표준 그룹인 3GPP는 SVG Tiny를 차세대 휴대폰의 필수 벡터 그래픽 미디어 형식으로 채택했다.[25][26][27]

오페라 모바일을 사용하는 모바일 기기뿐만 아니라 아이폰의 기본 브라우저도 SVG를 지원한다. 하지만 WebKit 엔진을 사용했음에도 불구하고, 안드로이드 기본 브라우저는 v3.0(Honeycomb) 이전에는 SVG를 지원하지 않았다.[69]

RIM의 블랙베리는 버전 5.0부터 SVG Tiny 1.1을 기본적으로 지원한다.[71]

노키아의 S60 플랫폼은 SVG를 기본적으로 지원한다. 예를 들어, 아이콘은 일반적으로 플랫폼의 SVG 엔진을 사용하여 렌더링된다. 노키아는 또한 SVG 프레젠테이션 및 조작을 위한 Java ME API를 정의하는 JSR 226: Scalable 2D Vector Graphics API 전문가 그룹을 이끌었다.

소니 에릭슨 K700 (출시일 기준)부터 시작하는 대부분의 폰은 SVG Tiny 1.1을 지원한다.

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

SVG는 또한 모토로라, 삼성, LG, 지멘스 모바일/벤큐-지멘스의 다양한 모바일 기기에서도 지원된다.

4. 3. 제작 도구

SVG 이미지는 잉크스케이프, 어도비 일러스트레이터, 어도비 플래시 프로페셔널, 코렐 드로우 등 벡터 그래픽 편집기로 제작할 수 있다.[22] librsvg, Batik, ThorVG (Thor Vector Graphics)와 같은 라이브러리를 사용하여 SVG 이미지를 렌더링할 수도 있다.[76] 또한, ImageMagick을 사용하여 SVG 이미지를 다른 형식으로 변환할 수 있다.

마이크로소프트 오피스 2019,[77] 리브레오피스, 구글 문서 등 다양한 오피스 소프트웨어에서도 SVG를 지원한다.

SVG는 XML을 사용하므로 텍스트 편집기로도 데이터 생성이 가능하지만, 기술이 매우 복잡하여 실용적으로는 GUI를 전제로 한 편집 소프트웨어가 필수적이다.

소프트웨어 종류소프트웨어 목록
SVG를 표준 데이터로 취급하고 읽고 쓰기가 가능한 것잉크스케이프, SVG Cats
SVG를 읽고 쓸 수 있는 것어도비 일러스트레이터, 마이크로소프트 비지오, 마이크로소프트 오피스 (Word, Excel, PowerPoint, Outlook)[121][122], 코렐 드로우, 어피니티 디자이너, 저스트시스템 Xfy, Dia, Mathematica, 리브레오피스 드로우, 구글 문서
일부 제한이 있는 것GIMP (읽기 지원, 내보내기는 패스 내보내기만 지원)
SVG 출력이 가능한 것하나코2006 (SVG Ver.1.0 준수), 오픈오피스 Draw (2.0부터 내보내기 지원, [https://web.archive.org/web/20080701061453/http://www.ipd.uka.de/~hauma/svg-import/#download SVG Import Filter](아카이브)[123]를 도입하면 읽기도 가능), Omni Group의 OmniGraffle Professional 4, R (데이터 분석 결과의 그래프 출력 형식으로 지원), Gnuplot 및 GNU Plotutils (플롯의 출력 형식으로 지원), Geometry Expressions (도형의 출력 형식으로 지원)



이 외에도, CAD 소프트웨어에는 읽고 쓰기 모두 지원하는 것이 많이 존재한다.

4. 4. 보안

SVG는 HTML 문서와 유사한 문서 형식으로, 스크립트나 CSS를 포함할 수 있다. 공격자가 프로필 사진과 같이 웹사이트에 SVG 파일을 업로드할 수 있는데, 해당 파일이 일반 사진으로 처리되지만 악성 콘텐츠를 포함할 때 문제가 발생한다.[78] 예를 들어, SVG 파일이 CSS 배경 이미지나 일부 웹사이트의 로고 또는 일부 이미지 갤러리에 배포된 경우, 해당 이미지가 브라우저에서 로드될 때 스크립트나 다른 콘텐츠가 활성화된다. 이는 브라우저를 정지시킬 수 있으며, Billion laughs attack, HTML 주입 및 사이트 간 스크립팅 공격으로 이어질 수 있다. 따라서 W3C는 SVG가 단순한 이미지로 사용될 때 특정 요구 사항을 규정하고 있다.[79]

W3C는 인라인 SVG(웹사이트에서 기본적으로 로드되는 SVG 파일)는 콘텐츠가 더 큰 문서의 일부이므로 스크립팅 및 CSS가 예상될 수 있으므로 보안 위험이 적다고 간주한다.[79]

5. 관련 표준

MPEG-4 파트 20 표준인 ''경량 애플리케이션 장면 표현(LASeR) 및 단순 집계 형식(SAF)''은 SVG Tiny를 기반으로 한다.[80] 이는 MPEG(ISO/IEC JTC 1/SC29/WG11)에서 개발되었으며 ISO/IEC 14496-20:2006으로 출판되었다.[81] MPEG-4 파트 20에서 SVG 기능은 동적 업데이트, 바이너리 인코딩, 최첨단 글꼴 표현 등 모바일 서비스를 위한 주요 기능으로 향상되었다.[82] SVG는 또한 XML을 사용하여 MPEG-4 멀티미디어 콘텐츠를 텍스트로 표현한 MPEG-4 파트 11의 확장 가능한 MPEG-4 텍스트(XMT) 형식에서도 사용되었다.[83]

6. 한국 산업 표준

JIS X 4197:2012일본어 「가변 벡터 그래픽스 SVG Tiny 1.2」는 W3C에서 발행한 SVG Tiny 1.2 규격을 기술적인 내용을 변경하지 않고 번역한 규격표가 발행되었다(2012년 최종 개정).[120]

7. 활용 사례

SVG 명세는 주로 벡터 그래픽스 마크업 언어에 초점을 맞추고 있지만, PDF와 같은 페이지 설명 언어의 기본 기능도 설계에 포함되어 있다. SVG는 풍부한 그래픽을 제공하며 스타일 지정을 위해 CSS와 호환된다. SVG는 인쇄된 페이지에서 각 글리프와 이미지를 선택한 위치에 배치하는 데 필요한 정보를 가지고 있다.[22]

참조

[1] 웹사이트 Media Type Registration for image/svg+xml http://www.w3.org/TR[...] World Wide Web Consortium 2014-02-05
[2] 웹사이트 Secret Origin of SVG http://www.w3.org/Gr[...] World Wide Web Consortium 2007-12-21
[3] 웹사이트 Schematic Graphics https://www.w3.org/T[...] 2019-07-19
[4] 웹사이트 Precision Graphics Markup Language (PGML) http://www.w3.org/TR[...] W3C 1998-04-10
[5] 웹사이트 Vector Markup Language (VML) http://www.w3.org/TR[...] W3C 1998-05-13
[6] 웹사이트 Hyper Graphics Markup Language (HGML) https://www.w3.org/T[...] 2019-07-19
[7] 웹사이트 WebCGM Profile http://xml.coverpage[...] 2019-03-04
[8] 웹사이트 Scalable Vector Graphics (SVG) 2 https://www.w3.org/T[...] W3C 2017-01-28
[9] 웹사이트 Scalable Vector Graphics (SVG) 1.0 Specification http://www.w3.org/TR[...] World Wide Web Consortium 2001-09-04
[10] 웹사이트 Scalable Vector Graphics (SVG) 1.1 Specification http://www.w3.org/TR[...] World Wide Web Consortium 2011-08-16
[11] 웹사이트 Mobile SVG Profiles: SVG Tiny and SVG Basic http://www.w3.org/TR[...] World Wide Web Consortium 2009-06-15
[12] 웹사이트 Scalable Vector Graphics (SVG) Tiny 1.2 Specification http://www.w3.org/TR[...] World Wide Web Consortium 2008-12-22
[13] 웹사이트 Getting to SVG 2.0: A report from the SVG Working Group Face-to-Face (May 24th – June 1st 2010) https://blogs.msdn.m[...] Microsoft 2010-07-08
[14] 웹사이트 Scalable Vector Graphics (SVG) 1.1 (Second Edition) http://www.w3.org/TR[...] W3C 2011-08-29
[15] 간행물 SVG Tiny Portable/Secure https://tools.ietf.o[...] 2020-07-29
[16] 뉴스 Implementation Guide https://bimigroup.or[...] 2021-02-09
[17] 웹사이트 Chapter 11: Text https://svgwg.org/sv[...] World Wide Web Consortium 2020-05-26
[18] 웹사이트 Appendix K: Changes from SVG 1.1 https://svgwg.org/sv[...] World Wide Web Consortium 2020-05-26
[19] 웹사이트 Scalable Vector Graphics (SVG) 2 https://www.w3.org/T[...] World Wide Web Consortium 2016-09-15
[20] 웹사이트 Scalable Vector Graphics (SVG) 2 https://www.w3.org/T[...] World Wide Web Consortium 2018-10-04
[21] 웹사이트 Scalable Vector Graphics (SVG) 2 https://svgwg.org/sv[...] World Wide Web Consortium 2023-03-08
[22] 웹사이트 SVG as a Page Description Language http://www.svgopen.o[...] svgopen.org 2002
[23] 웹사이트 W3C releases scripting standard, caveat http://news.cnet.com[...] CNET Networks 2003-01-09
[24] 웹사이트 SVG Tiny 1.2 http://www.w3.org/TR[...] World Wide Web Consortium 2008-12-22
[25] 웹사이트 SVG in 3GPP Multimedia Messaging and Streaming Services (version March 2003) http://www.svgopen.o[...] SVG Open 2003
[26] 웹사이트 3GPP Multimedia Messaging Service (MMS); Media formats and codecs (Release 5); 3GPP TS 26.140 V5.2.0 (2002-12); Technical Specification https://www.3gpp.org[...] 3GPP 2003-01-02
[27] 웹사이트 3rd Generation Partnership Project; Technical Specification Group Services and System Aspects; Multimedia Messaging Service (MMS); Media formats and codecs (Release 5) https://www.3gpp.org[...] 3GPP 2003-03
[28] 웹사이트 3GPP Specification detail - 3GPP TS 26.141: IP Multimedia System (IMS) Messaging and Presence; Media formats and codecs http://www.3gpp.org/[...] 3GPP 2009-12-10
[29] 웹사이트 Building Interactive Websites using Scalable Vector Graphics (SVG) – [With Examples] https://www.intelega[...] intelegain.com 2018-11-21
[30] 웹사이트 Listing of phones that support SVG http://svg.org/speci[...] Svg.org 2010-10-24
[31] 문서
[32] 웹사이트 Saving compressed SVG (SVGZ) https://www.adobe.co[...] Adobe Systems 2009-07-14
[33] 문서
[34] 웹사이트 SVG specification, "Paths" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[35] 웹사이트 SVG specification, "Basic Shapes" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[36] 웹사이트 SVG specification, "Text" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[37] 웹사이트 SVG specification, "Painting: Filling, Stroking and Marker Symbols" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[38] 웹사이트 SVG specification, "Color" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[39] 웹사이트 SVG specification, "Gradients and Patterns" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[40] 웹사이트 IRC log of svg on 2008-11-17 http://www.w3.org/20[...] W3C 2008
[41] 웹사이트 Propositions for the next SVG spec http://lists.w3.org/[...] W3C 2009-03-16
[42] 웹사이트 SVG in KDE: Freedom of Beauty http://www.svgopen.o[...] SVG Open 2008
[43] 간행물 Diffusion Curves: A Vector Representation for Smooth-Shaded Images http://artis.imag.fr[...] 2008
[44] 웹사이트 Scalable Vector Graphics (SVG) 2, W3C Editor's Draft 13 June 2013 https://svgwg.org/sv[...] SVG WG 2013
[45] 웹사이트 SVG specification, "Clipping, Masking and Compositing" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[46] 웹사이트 SVG specification, "Filter Effects" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[47] 웹사이트 SVG specification, "Interactivity" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[48] 웹사이트 SVG specification, "Linking" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[49] 웹사이트 SVG specification, "Scripting" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[50] 웹사이트 SVG specification, "Animation" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[51] 웹사이트 SVG specification, "Fonts" http://www.w3.org/TR[...] World Wide Web Consortium 2003-01-14
[52] 웹사이트 SVG specification, "Metadata" http://www.w3.org/TR[...] World Wide Web Consortium
[53] 웹사이트 KDE Conquers the Vectors with KSVG http://dot.kde.org/2[...] 2003-09-16
[54] 웹사이트 Bug 276431 - external SVG not loaded from img tag https://bugzilla.moz[...] Mozilla
[55] 웹사이트 SVG image not shown by Firefox http://groups.google[...] Google Groups 2009-02-25
[56] 웹사이트 SVG In HTML Introduction https://developer.mo[...] Mozilla 2008-08-25
[57] 뉴스 Creator of Web spots a flaw in Internet Explorer https://www.nbcnews.[...] NBC News 2008-09-10
[58] 웹사이트 SVG in Firefox https://developer.mo[...] Mozilla 2009-10-23
[59] 웹사이트 Mozilla SVG Status https://www.mozilla.[...] Mozilla
[60] 웹사이트 SVG improvements in Firefox 3 https://developer.mo[...] Mozilla 2008-01-15
[61] 웹사이트 WebKit SVG Status http://webkit.org/pr[...] WebKit 2010-01-05
[62] 웹사이트 Windows Internet Explorer 8 Expert Zone Chat (19 June 2008) http://www.microsoft[...] Microsoft 2008-06-19
[63] 웹사이트 SVG Support http://www.codedread[...] 2010-02-13
[64] 웹사이트 What's New in Internet Explorer 9 http://msdn.microsof[...] Microsoft 2011-03-22
[65] 웹사이트 SVG (Windows) https://msdn.microso[...] Microsoft
[66] 웹사이트 Microsoft Edge web platform features status and roadmap - Microsoft Edge Development https://developer.mi[...]
[67] 웹사이트 Get ready for plug-in free browsing https://msdn.microso[...] MSDN 2014
[68] 웹사이트 SVG Open 2005 Conference and Exhibition - Proceedings - Cartoon Oriented User Interfaces http://www.svgopen.o[...] svgopen.org
[69] 웹사이트 Browser doesn't render SVG images https://code.google.[...]
[70] 웹사이트 Firefox Mobile 4.0b2 (beta) for Android supports SVG images https://code.google.[...] 2010-12-16
[71] 웹사이트 Support for SVG https://web.archive.[...] RIM 2011-10-06
[72] 웹사이트 BlackBerry Torch The HTML5 Developer Scorecard http://www.sencha.co[...] Sencha 2011-10-06
[73] 웹사이트 S60 Product info http://www.s60.com/b[...] S60.com 2009-10-19
[74] 웹사이트 SVG for Embedded Systems http://www.svgopen.o[...] svgopen.org 2002-07-15
[75] 웹사이트 eSVG http://www.intesis.h[...] 2014-01-29
[76] 웹사이트 Potrace – Transforming bitmaps into vector graphics http://potrace.sourc[...] 2014-01-29
[77] 웹사이트 What's new in PowerPoint for Microsoft 365 https://support.micr[...] 2019-09
[78] 웹사이트 Anatomy of Scalable Vector Graphics (SVG) Attack Surface on the Web https://www.fortinet[...] 2019-11-07
[79] 웹사이트 SVG Security - W3C Wiki https://www.w3.org/w[...] 2023-02-21
[80] 웹사이트 MPEG-4 LASeR white paper http://mpeg.chiarigl[...] International Organization for Standardization 2005-07
[81] 웹사이트 ISO/IEC 14496-20:2008 - Information technology – Coding of audio-visual objects – Part 20: Lightweight Application Scene Representation (LASeR) and Simple Aggregation Format (SAF) http://www.iso.org/i[...] International Organization for Standardization 2009-10-30
[82] 웹사이트 LASeR - the MPEG standard for Rich Media Services http://www.mpeg-lase[...] 2010-04-11
[83] 웹사이트 Riding the media bits - Bits and bytes https://web.archive.[...] 2005-03-08
[84] 웹사이트 Media Type Registration for image/svg+xml https://www.w3.org/T[...] W3C 2019-09-01
[85] 문서 Precision Graphics Markup Language (PGML) https://www.w3.org/T[...] World Wide Web Consortium 1998-04-10
[86] 문서 VML - the Vector Markup Language https://www.w3.org/T[...] World Wide Web Consortium 1998-05-13
[87] 뉴스 W3C、Web上でベクターグラフィックを表示する「SVG」のドラフトを公開 https://internet.wat[...] INTERNET Watch 1999-02-12
[88] 문서 W3C Working Draft: Scalable Vector Graphics (SVG) https://www.w3.org/T[...] World Wide Web Consortium 1999-02-11
[89] 간행물 W3C 2011
[90] 문서 Mobile SVG Profiles: SVG Tiny and SVG Basic https://www.w3.org/T[...] World Wide Web Consortium 2003-01-14
[91] 간행물 A path represents the outline of a shape which can be filled or stroked. A path can also be used as a clipping path, to describe animation, or position text. W3C 2018
[92] 간행물 A path is made up of multiple segments, and every command, either explicit or implicit, other than moveto or closepath, defines one path segment. W3C 2018
[93] 간행물 A path is defined by including a ‘path’ element on which the d property specifies the path data. W3C 2018
[94] 간행물 "SVG path data matches the following EBNF grammar. ... drawto_command::= moveto | closepath | lineto | horizontal_lineto | vertical_lineto | curveto | smooth_curveto | quadratic_bezier_curveto | smooth_quadratic_bezier_curveto | elliptical_arc" W3C 2018
[95] 간행물 The 'moveto' commands (M or m) must establish a new initial point and a new current point. W3C 2018
[96] 간행물 "L (absolute) l (relative) lineto Draw a line from the current point to the given (x,y) coordinate which becomes the new current point." W3C 2018
[97] 간행물 "H (absolute) h (relative) horizontal lineto Draws a horizontal line from the current point." W3C 2018
[98] 간행물 "V (absolute) v (relative) vertical lineto Draws a vertical line from the current point." W3C 2018
[99] 간행물 The 'closepath' (Z or z) ends the current subpath by connecting it back to its initial point. An automatic straight line is drawn from the current point to the initial point of the current subpath. W3C 2018
[100] 간행물 curveto ... Draws a cubic Bézier curve from the current point W3C 2018
[101] 간행물 "smooth curveto ... Draws a cubic Bézier curve from the current point ... The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point." W3C 2018
[102] 간행물 "quadratic Bézier curveto ... Draws a quadratic Bézier curve from the current point" W3C 2018
[103] 간행물 "smooth quadratic Bézier curveto ... Draws a quadratic Bézier curve from the current point ... The control point is assumed to be the reflection of the control point on the previous command relative to the current point" W3C 2018
[104] 간행물 "A (absolute) a (relative) elliptical arc Draws an elliptical arc from the current point" W3C 2018
[105] 간행물 "The syntax of path data is concise in order to allow for minimal file size and efficient downloads, since many SVG files will be dominated by their path data. Some of the ways that SVG attempts to minimize the size of path data are as follows:" W3C 2018
[106] 간행물 W3C 2018
[107] 간행물 W3C 2018
[108] 간행물 W3C 2018
[109] 간행물 W3C 2018
[110] 간행물 W3C 2018
[111] 간행물 W3C 2018
[112] 간행물 W3C 2018
[113] 간행물 W3C 2018
[114] 간행물 W3C 2018
[115] 간행물 W3C 2018
[116] 간행물 Scalable Vector Graphics (SVG) 1.0 Specification W3C 2001-09-04
[117] 간행물 Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C 2011-08-16
[118] 간행물 Scalable Vector Graphics (SVG) 2 W3C 2018-10-04
[119] 간행물 Scalable Vector Graphics (SVG) Tiny 1.2 Specification W3C 2008-12-22
[120] 문서 JIS X 4197
[121] 웹사이트 Microsoft Office で SVG 画像を挿入する https://support.offi[...] 2017-02-19
[122] 웹사이트 OfficeアプリがIllustratorなどのSVG画像の挿入/編集に対応 ～無償のSVGアイコンライブラリも提供 https://pc.watch.imp[...] Impress Watch 2016-10-27
[123] 문서
[124] 웹사이트 Update to reference SVG 2 by dstorey · Pull Request #3692 · whatwg/html https://github.com/w[...] 2019-05-04
[125] 웹사이트 HTML Standard 2.1.9 Dependencies https://html.spec.wh[...] 2019-05-04
[126] 웹사이트 SVG in IE9 Roadmap - Internet Explorer ブログ (日本語版) http://blogs.msdn.co[...]
[127] 웹사이트 The official WebKit SVG status page http://webkit.org/pr[...]
[128] 웹사이트 http://www.adobe.com[...]
[129] 문서
[130] 웹인용 지원 상태 https://developer.mo[...] 2009-03-19


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com