---
title: SVG 튜토리얼
slug: Web/SVG/Tutorial
tags:
  - SVG
  - 'SVG:튜토리얼'
  - 중급
translation_of: Web/SVG/Tutorial
---
<p>확장 가능한 벡터 그래픽(Scalable Vector Graphics), <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a>는 그래픽을 마크업하기 위한 W3C XML의 특수언어(dialect)입니다. SVG는 파이어폭스, 오페라, 웹킷 브라우저, 인터넷 익스플로러 및 기타 여러 브라우저에서 부분적으로 지원하고 있습니다.</p>

<p>본 튜토리얼의 목적은 SVG 내부 구조를 설명하는 데 있으며, 기술적인 세부 사항을 다룹니다. 만약 그저 아름다운 이미지를 그리려고 한다면, <a class="external external-icon" href="http://inkscape.org/doc/">Inkscape's documentation page</a>에서 더 많은 유용한 소스들을 찾을 수 있습니다. SVG에 관한 또 다른 소개는 W3C의 <a class="external external-icon" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>에서 제공됩니다.</p>

<div class="note">본 튜토리얼은 개발 초기 단계에 있습니다. 가능하다면, 본 문서 작성에 참여하여, 한 두 단락을 작성하여 도움을 주기 바랍니다. 한 페이지 전체를 작성한다면 더욱 좋습니다!</div>

<h5 id="SVG_소개_목록">SVG 소개 목록</h5>

<ul>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Introduction" title="ko/docs/Web/SVG/Tutorial/Introduction">소개</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Getting_Started" title="ko/docs/Web/SVG/Tutorial/Getting_Started">시작하기</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Positions" title="ko/docs/Web/SVG/Tutorial/Positions">위치</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Basic_Shapes" title="ko/docs/Web/SVG/Tutorial/Basic_Shapes">기본 형태</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Paths" title="ko/docs/Web/SVG/Tutorial/Paths">패스</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Fills_and_Strokes" title="ko/docs/Web/SVG/Tutorial/Fills_and_Strokes">채우기 및 선 그리기</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Gradients" title="ko/docs/Web/SVG/Tutorial/Gradients">그라디언트</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Patterns" title="ko/docs/Web/SVG/Tutorial/Patterns">패턴</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Texts" title="ko/docs/Web/SVG/Tutorial/Texts">텍스트</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Basic_Transformations" title="ko/docs/Web/SVG/Tutorial/Basic_Transformations">기본 변형</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Clipping_and_masking" title="ko/docs/Web/SVG/Tutorial/Clipping_and_masking">클리핑 및 마스킹</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Other_content_in_SVG" title="ko/docs/Web/SVG/Tutorial/Other content in SVG">SVG 안의 다른 컨텐츠</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Filter_effects" title="ko/docs/Web/SVG/Tutorial/Filter effects">필터 효과</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/SVG_fonts" title="ko/docs/Web/SVG/Tutorial/SVG fonts">SVG 폰트</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/SVG_Image_Tag" title="ko/docs/Web/SVG/Tutorial/SVG Image Tag">SVG 이미지 태그</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/Tools_for_SVG" title="ko/docs/Web/SVG/Tutorial/Tools_for_SVG">SVG를 위한 도구들</a></li>
 <li><a href="/ko/docs/Web/SVG/Tutorial/SVG_and_CSS">SVG와 CSS</a></li>
</ul>