Skip to content

Scalable Vector Graphics

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.

SVG 형식의 파일은 SVG기반의 전문 그래픽 편집 프로그램을 사용하여 편집이 가능하다. 물론 XML 파일로 되어 있으므로 문서 편집기로도 편집이 가능하다.

현재 마이크로소프트의 인터넷 익스플로러 8 이전 버전을 제외한 대부분의 주요 웹 브라우저들은 SVG를 지원한다. 인터넷 익스플로러에서는 SVG 파일을 보기 위해 별도의 플러그인을 수동으로 설치하여야 하며, 그렇지 않은 경우에는 웹 페이지 제작자가 구글 코드에서 개발중인 자바스크립트 라이브러리, SVG Web 을 웹 페이지 코드에 포함시켜야 한다.

Categories

Libraries

Online tools

Vector graphics editor Projects

Examples

Resources

SVG Tag 

<svg width="200" height="200" viewBox="0 0 100 100">

SVG 캔버스 전체 크기는 200x200 픽셀입니다. 그러나 viewBox속성을 사용하여 (0,0)에서 시작하는 100x100px의 화면을 200x200px의 화면에 출력합니다.

HTML 문서에 SVG 포함하기

SVG 코드는 다음의 HTML 요소를 사용해 문서에서 활용할 수 있습니다.

이미지 (Image)

SVG 파일(*.svg)을 HTML 문서에서 사용하는 가장 손쉬운 방법은 <img> 요소의 src 속성에 파일의 경로를 설정하는 것입니다. 이미지가 의미를 포함한 경우 적절한 대체 텍스트를 제공합니다. 

<img src="king.svg" alt="킹 (체스 말)">

임베드 (embed)

임베드 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은

<embed>

요소의 src 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 적절한 대체 텍스트를 aria-label 속성을 통해 제공합니다. 

<embed src="king.svg" type="image/svg+xml" aria-label="킹 (체스 말)">

오브젝트 (object)

오브젝트 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은 <object> 요소의 data 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 적절한 대체 텍스트를 aria-label 속성을 통해 제공합니다. 

<object data="king.svg" type="image/svg+xml" aria-label="킹 (체스 말)"></object>

아이프레임 (iframe)

아이프레임 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은 <iframe> 요소의 src 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 적절한 대체 텍스트를 aria-label 속성을 통해 제공합니다. 

<iframe src="king.svg" aria-label="킹 (체스 말)"></iframe>

인라인 SVG

아이프레임 요소를 사용해 SVG 요소를 HTML 문서에 포함하는 방법은 <iframe> 요소의 src 속성에 파일의 경로를 설정하는 것입니다. 이미지를 설명해야 할 필요가 있다면 SVG 접근성을 고려하여 콘텐츠를 제공해야 합니다. 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!-- king.svg 코드 -->
</svg>

===

<svg>

요소 ===

<svg>

요소는 인라인 SVG의 시작입니다. svg 요소에 추가 할 수 있는 속성은 다양합니다. 일반적으로 version, xmlns, xmlns:xlink, viewbox, width, height 속성이 설정됩니다. 

<svg
  version="1.1"
  xmlns=http://www.w3.org/2000/svg
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="520" height="520"
  viewBox="0 0 520 520">
  ...
</svg>

하지만 인라인 SVG 코드의 경우, 웹 브라우저에서 렌더링 하는데 다음 속성은 필요하지 않습니다.

  • version
  • xmlns
  • xmlns:xlink

그러므로 인라인 SVG를 사용할 경우, 아래 코드처럼 간결하게 사용할 수 있습니다. 

<svg width="520" height="520" viewBox="0 0 520 520">
  ...
</svg>

웹 캔버스 (canvas) 

var example = document.getElementById('example');
var context = example.getContext('2d');

var img = new Image();
img.onload = function() {
    context.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

Elements

Path

See also

Favorite site

Download Resources

MSDN

MDN

Tutorials