---
title: SVG教程
slug: Web/SVG/Tutorial
tags:
  - SVG
  - SVG教程
  - 中间体
  - 需要内容
  - 需要帮助
  - 需要更新
translation_of: Web/SVG/Tutorial
---
<p>可缩放矢量图形，即<a href="/zh-CN/SVG" title="zh-CN/SVG">SVG</a>，是W3C XML的分支语言之一，用于标记可缩放的矢量图形。目前SVG在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-CN/Web/SVG/Tutorial/Introduction" title="zh-CN/SVG/Tutorial/Introduction">引言</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/Getting_Started" title="zh-CN/SVG/Tutorial/Getting_Started">入门</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/Positions" title="zh-CN/SVG/Tutorial/Positions">坐标定位</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/Basic_Shapes" title="zh-CN/SVG/Tutorial/Basic_Shapes">基本形状</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/Paths" title="zh-CN/SVG/Tutorial/Paths">路径</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/Fills_and_Strokes" title="zh-CN/SVG/Tutorial/Fills_and_Strokes">填充与边框</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/Gradients" title="zh-CN/SVG/Tutorial/Gradients">渐变</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/Patterns" title="zh-CN/SVG/Tutorial/Patterns">图案</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/Texts" title="zh-CN/SVG/Tutorial/Texts">文字</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/Basic_Transformations" title="zh-CN/SVG/Tutorial/Basic_Transformations">基本变换</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/Clipping_and_masking" title="zh-CN/SVG/Tutorial/Clipping_and_masking">裁剪和遮罩</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/Other_content_in_SVG" title="zh-CN/SVG/Tutorial/Other content in SVG">其他SVG内容</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/Filter_effects" title="zh-CN/SVG/Tutorial/Filter effects">滤镜效果</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/SVG_fonts" title="zh-CN/SVG/Tutorial/SVG fonts">SVG字体</a></li>
 <li><a href="/zh-CN/Web/SVG/Tutorial/SVG_Image_Tag" title="zh-CN/SVG/Tutorial/SVG Image Tag">SVG的Image标签</a></li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Tools_for_SVG" title="zh-CN/SVG/Tutorial/Tools_for_SVG">SVG工具</a></li>
</ul>

<p>下面罗列的主题更高级，所以需要单独列出教程。</p>

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

<p>待定（TBD：To be determined）</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>