---
title: 'SVG: Scalable Vector Graphics'
slug: Web/SVG
tags:
  - 2D Graphics
  - Graphics
  - Icons
  - Images
  - Reference
  - Responsive Design
  - SVG
  - Scalable Graphics
  - Scalable Images
  - Vector Graphics
  - Web
  - l10n:priority
translation_of: Web/SVG
---

<div>{{SVGRef}}</div>

<h2 id="getting_started_with_svg">SVG 시작하기</h2>

<p>
  <span class="seoSummary"
    ><strong>SVG(Scalable Vector Graphics)</strong>는 2차원 <a href="https://w.wiki/3cVf">벡터 그래픽</a>을 서술하는
    <a href="/ko/docs/Web/XML">XML</a> 기반의 마크업 언어입니다.</span
  >
  SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며
  <a href="/ko/docs/Web/CSS">CSS</a>, <a href="/ko/docs/Web/API/Document_Object_Model">DOM</a>,
  <a href="/ko/docs/Web/JavaScript">JavaScript</a>, <a href="/ko/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a> 등 다른
  웹 표준과도 잘 동작하도록 설계됐습니다. SVG는 달리 말하자면 <a href="/ko/docs/Web/HTML">HTML</a>과 텍스트의 관계를
  그래픽에 적용한 것입니다.
</p>

<p>
  SVG 이미지와 그 동작 방식은 <a href="/ko/docs/Web/XML">XML</a> 텍스트 파일로 정의합니다. 따라서 검색, 색인, 스크립트
  적용, 그리고 압축이 가능하며, 그래픽 도구 외에도 아무 텍스트 편집기로 생성 및 편집이 가능합니다.
</p>

<p>
  {{Glossary("JPEG")}}와 {{Glossary("PNG")}} 등 고전적인 비트맵 이미지 형식과 비교했을 때, SVG 형식의 벡터 이미지는
  손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하며 현지화 역시 그래픽 편집기 없이도 파일 내의 텍스트를 수정해서
  쉽게 처리할 수 있습니다. 적절한 라이브러리를 함께 사용하면 SVG 파일을 필요에 따라 즉각 현지화하는 것도 가능합니다.
</p>

<p>SVG는 <a href="https://www.w3.org/">World Wide Web Consortium(W3C)</a>가 1999년부터 개발하고 있습니다.</p>

<p><a href="/ko/docs/Web/SVG/Tutorial">SVG 자습서</a>도 방문해보세요.</p>

<h2 id="documentation">문서</h2>

<dl>
  <dt><a href="/ko/docs/Web/SVG/Element">SVG 요소 참고서</a></dt>
  <dd>각각의 SVG 요소에 대한 세부 정보입니다.</dd>
  <dt><a href="/ko/docs/Web/SVG/Attribute">SVG 특성 참고서</a></dt>
  <dd>각각의 SVG 특성에 대한 세부 정보입니다.</dd>
  <dt><a href="/ko/docs/Web/API/Document_Object_Model#svg_interfaces">SVG DOM 인터페이스 참고서</a></dt>
  <dd>JavaScript 상호작용을 위한 SVG DOM 인터페이스의 세부 정보입니다.</dd>
  <dt><a href="/ko/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">HTML 콘텐츠에 SVG 효과 적용하기</a></dt>
  <dd>
    SVG는 {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}}와 사용할 수 있습니다. SVG를 사용해서
    <a href="/ko/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction">평범한 HTML 페이지나 웹 어플리케이션을 향상하세요</a>.
  </dd>
</dl>

<h2 id="tools">도구</h2>

<ul>
  <li><a href="https://github.com/w3c/svgwg/wiki/Testing">SVG 테스트 도구모음</a></li>
  <li><a href="https://validator.w3.org/#validate_by_input">마크업 검증기</a></li>
</ul>

<h2 id="examples">예제</h2>

<ul>
  <li><a href="https://jwatt.org/svg/authoring/">SVG 저작 가이드라인</a></li>
  <li><a href="/ko/docs/Web/SVG/SVG_as_an_Image">이미지로서의 SVG</a></li>
  <li><a href="/ko/docs/Web/SVG/SVG_animation_with_SMIL">SMIL을 사용한 SVG 애니메이션</a></li>
  <li><a href="https://plurib.us/1shot/2007/svg_gallery/">SVG 아트 갤러리</a></li>
  <li><a href="https://d3js.org">D3</a> (JavaScript를 사용해서 데이터를 HTML, SVG, CSS로 시각화하는 라이브러리)</li>
</ul>