---
title: 가변 벡터 도형 (SVG)
slug: Glossary/SVG
tags:
  - SVG
  - 가변 벡터 도형
  - 그래픽
translation_of: Glossary/SVG
---
<p><em>Scalable Vector Graphics</em> (<strong>SVG</strong>)는  {{Glossary("XML")}} 신텍스에 기반을 둔 2D 벡터 이미지 형식(포맷)이다.</p>

<p>{{Glossary("W3C")}}는 1990년 후반부터 SVG를 사용하기 시작했지만, SVG를 지원하는 {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9가 출시된 후에야 널리 사용되기 시작했다. 현재 주요 웹브라우저({{Glossary("browser","browsers")}})들은 SVG를 지원한다.</p>

<p>{{Glossary("XML")}} 신텍스를 기반으로 한 SVG는 {{Glossary("CSS")}}를 통해 스타일 처리가 가능하고,  자바스크립트({{Glossary("JavaScript")}})를 사용해 상호소통이 가능하다. 현재 HTML5는  SVG{{Glossary("Tag","tags")}}가 {{Glossary("HTML")}}문서에서 직접 사용 되도록 지원한다.</p>

<p>벡터 이미지 형식 (<a href="http://en.wikipedia.org/wiki/Vector_graphics" rel="external">vector image format</a>)으로써, SVG 그래픽은 무한정적인 크기를 가질 수 있고, 이러한 점 때문에 어떠한 화면 크기에도 적용 가능한  인터페이스 요소와 그래픽을 만들 수 있어 반응형 디자인({{Glossary("responsive design")}}) 에서 아주 유용하게 여겨진다. 또한 SVG는 클리핑(clipping), 마스킹(masking), 필터(filter), 애니매이션(animation) 등 여러가지 유용한 툴 셋들을 제공한다.</p>

<h2 id="더보기">더보기</h2>

<h3 id="일반_상식">일반 상식</h3>

<ul>
 <li>{{Interwiki("wikipedia", "SVG")}} 위키피디아 </li>
</ul>

<h3 id="SVG_배우기">SVG 배우기</h3>

<ul>
 <li><a href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">W3.org's SVG Primer</a> </li>
</ul>

<h3 id="기술_정보">기술 정보</h3>

<ul>
 <li><a href="/en-US/docs/Web/SVG">SVG documentation on MDN</a></li>
 <li><a href="http://www.w3.org/TR/SVG/" rel="external">Latest SVG specification</a></li>
</ul>