---
title: SVG教學
slug: Web/SVG/Tutorial
translation_of: Web/SVG/Tutorial
---
<p><a href="/en/SVG" title="en/SVG">SVG</a>是W3C XML的方言之一，用於標記可縮放的向量圖形。目前在Firefox、Opera、Webkit瀏覽器、IE等瀏覽器中已經部分實作。</p>

<p>本教學之目標在解釋SVG內部的技術細節。如果你只是想要畫出漂亮的圖形，你可以在<a class="external" href="http://inkscape.org/doc/" title="http://inkscape.org/doc/">Inkscape的文件頁面</a>上找到更多有用的資源。或是看看另一個好的SVG介绍：<a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">W3C的SVG入門</a>。</p>

<div class="note">本教學文件還在初期階段，如果你有能力，可以來增加擴展一兩段，寫一整頁的话會更好！</div>

<h5 id="從頭介紹SVG">從頭介紹SVG</h5>

<ul>
 <li><a href="/zh-TW/SVG/Tutorial/Introduction" title="zh-TW/SVG/Tutorial/Introduction">導論</a></li>
 <li><a href="/en/SVG/Tutorial/Getting_Started" title="en/SVG/Tutorial/Getting_Started">開始</a></li>
 <li><a href="/en/SVG/Tutorial/Positions" title="en/SVG/Tutorial/Positions">坐標定位</a></li>
 <li><a href="/en/SVG/Tutorial/Basic_Shapes" title="en/SVG/Tutorial/Basic_Shapes">基本形状</a></li>
 <li><a href="/en/SVG/Tutorial/Paths" title="en/SVG/Tutorial/Paths">路徑</a></li>
 <li><a href="/en/SVG/Tutorial/Fills_and_Strokes" title="en/SVG/Tutorial/Fills_and_Strokes">填充與邊框</a></li>
 <li><a href="/en/SVG/Tutorial/Gradients" title="en/SVG/Tutorial/Gradients">漸變</a></li>
 <li><a href="/en/SVG/Tutorial/Patterns" title="en/SVG/Tutorial/Patterns">模式</a></li>
 <li><a href="/en/SVG/Tutorial/Texts" title="en/SVG/Tutorial/Texts">文字</a></li>
 <li><a href="/en/SVG/Tutorial/Basic_Transformations" title="en/SVG/Tutorial/Basic_Transformations">基本變换</a></li>
 <li><a href="/en/SVG/Tutorial/Clipping_and_masking" title="en/SVG/Tutorial/Clipping_and_masking">裁剪和遮罩</a></li>
 <li><a href="/en/SVG/Tutorial/Other_content_in_SVG" title="en/SVG/Tutorial/Other content in SVG">其他SVG内容</a></li>
 <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter effects">濾镜效果</a></li>
 <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG fonts">SVG字型</a></li>
 <li><a href="/en/SVG/Tutorial/SVG_Image_Tag" title="en/SVG/Tutorial/SVG Image Tag">SVG的Image標籤</a></li>
 <li><a href="/en/SVG/Tutorial/Tools_for_SVG" title="en/SVG/Tutorial/Tools_for_SVG">SVG工具</a></li>
</ul>

<p>下面陳列進階主题，需要單獨列出教學。</p>

<h5 id="JavaScript脚本化SVG">JavaScript脚本化SVG</h5>

<p>待定</p>

<h5 id="SVG濾镜教學">SVG濾镜教學</h5>

<p>待定</p>

<h5 id="SVG的SMIL動畫">SVG的SMIL動畫</h5>

<p>待定</p>

<h5 id="在SVG中建立字形">在SVG中建立字形</h5>

<p>待定</p>

<p>{{ languages( { "de": "de/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik", "zh-CN":"zh-CN/SVG/Tutorial" } ) }}</p>