---
title: SVG
slug: Web/SVG
translation_of: Web/SVG
---
<p> </p>
<div class="callout-box"><strong><a href="/zh_tw/SVG/教學" title="zh tw/SVG/教學">由此開始</a></strong><br>
本教程將輔助你開始使用 SVG。</div>
<div><strong>可縮放向量圖形 (Scalable Vector Graphics，SVG)</strong> 是用於描述二維向量圖形的 <a href="/en/XML" title="en/XML">XML</a> 標記語言。基本上，SVG 用於圖形，而 XHTML 用於文字。
<p>SVG 類似 Adobe 專有的 Flash 技術，SVG 與 Flash 兩者最大的分別在於 SVG 為 <a class="external" href="http://www.w3.org/Graphics/SVG/">W3C 所推薦</a> (即標準)，並以 XML 為基礎，而非封閉的二進制格式。SVG 設計為與其他 <a class="external" href="http://www.w3.org/">W3C</a> 標準 (如 <a href="/en/CSS" title="en/CSS">CSS</a>、<a href="/en/DOM" title="en/DOM">DOM</a> 及 <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>) 一同運作。</p>
</div>
<p> </p>
<table class="topicpage-table"> <tbody> <tr> <td colspan="2"> <h4 id="Why_use_SVG.3F" name="Why_use_SVG.3F">為何使用 SVG？</h4> </td> </tr> <tr> <td> <dl> <dt>更好的圖形格式</dt> <dd><small>SVG 是一種向量圖形格式。</small><small>向量圖形可縮可放，圖形完全不會失真，為</small><small>像素圖形所不能及。</small></dd> </dl> <ul> <li><a class="external" href="http://www.croczilla.com/svg/samples/lion/lion.svg">Lion</a>, <a class="external" href="http://www.croczilla.com/svg/samples/butterfly/butterfly.svg">Butterfy</a> &amp; <a class="external" href="http://www.croczilla.com/svg/samples/tiger/tiger.svg">Tiger</a></li> <li><a class="external" href="http://plurib.us/1shot/2007/svg_gallery/">SVG 藝術圖庫</a></li> <li>更多範例 (<a class="external" href="http://www.croczilla.com/svg/samples/">SVG 範例 croczilla.com</a>, <a class="external" href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li> </ul> <p> </p> <dl> <dt>增強 HTML 內容的表現</dt> <dd><small>SVG 可和 HTML、CSS 及 JavaScript 一同運作。使用 SVG 增強普通 HTML 頁面或 web 應用程式。</small></dd> </dl> <ul> <li>如何<a class="internal" href="/en/SVG_In_HTML_Introduction" title="en/SVG In HTML Introduction">在 XHTML 中使用 SVG</a> 教程</li> <li>Google <a class="external" href="http://maps.google.com">Maps</a> (路徑圖) &amp; <a class="external" href="http://docs.google.com">Docs</a> (試算表繪圖)</li> <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG 泡沫選單</a></li> </ul> <p> </p> <dl> <dt>Mozilla 裡的 SVG</dt> <dd><small>SVG 如何在 Mozilla 裡實作的註解和資訊。</small></dd> </dl> <ul> <li>Firefox 目前已實作 <a href="/En/SVG_in_Firefox" title="en/SVG_in_Firefox">SVG 1.1 規範</a></li> <li><a class="external" href="http://jwatt.org/svg/authoring/">SVG 編寫指南</a></li> <li><a href="/en/Mozilla_SVG_Project" title="en/Mozilla_SVG_Project">Mozilla SVG 專案</a>概述</li> <li>有關 SVG 和 Mozilla 的<a class="internal" href="/En/SVG/FAQ" title="En/SVG/FAQ">問答集</a></li> </ul> <p> </p> <dl> <dt>工具</dt> </dl> <p> </p> <ul> <li><a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> <li><a class="external" href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a></li> <li><a href="/Special:Tags?tag=SVG:Tools&amp;language=en" title="Special:Tags?tag=SVG:Tools&amp;language=en">更多工具...</a></li> </ul> <p> </p> </td> <td> <dl> <dt>動畫和互動</dt> <dd><small>如同 HTML，SVG 也有一個 DOM、事件，並且可由 JavaScript 存取。這可讓開發者建立豐富的動畫和互動式圖形。</small></dd> </dl> <ul> <li>Firefox extension (<a class="external" href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of SMIL animation support</li> <li>Interactive <a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li> <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li> <li>Animated <a class="external" href="http://lab.vodafone.com/vienna/">art</a></li> </ul> <p> </p> <dl> <dt>繪圖、圖表、遊戲 &amp; 3D 實驗</dt> <dd><small>只需少許 SVG 即可增強網頁內容，這裡有一些重量級 SVG 用法的範例。</small></dd> </dl> <ul> <li><a class="external" href="http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg">Tetris</a>, <a class="external" href="http://www.codedread.com/yastframe.php">Yet Another SVG Tetris</a> &amp; <a class="external" href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li> <li><a class="external" href="http://files.myopera.com/orinoco/svg/USStates.svg">Find the State</a> game</li> <li><a class="external" href="http://www.carto.net/papers/svg/us_population/index.html">US popuplation map</a> &amp; <a class="external" href="http://www.destatis.de/jetspeed/portal/cms/Sites/destatis/Internet/EN/Content/Statistics/Bevoelkerung/VorausberechnungBevoelkerung/InteraktiveDarstellung/Content75/Bevoelkerungspyramide1W1,templateId=renderSVG.psml">Germany population chart</a></li> <li><a class="external" href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> &amp; <a class="external" href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li> <li><a class="external" href="http://www.amaltas.org/svgapp">SVG+DOM based drawing tool</a></li> </ul> <p> </p> <dl> <dt>Community</dt> </dl> <p> </p> <ul> <li>View Mozilla forums...</li> </ul> <p>{{ DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg") }}</p> <ul> <li><a class="external" href="http://wiki.svg.org/">SVG Wiki</a></li> </ul> <p> </p> </td> </tr> </tbody>
</table>
<h4 id="Related_Topics" name="Related_Topics">關聯主題</h4>
<dl> <dd><a href="/en/XML" title="en/XML">XML</a>, <a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas</a></dd>
</dl>
<p><span class="comment">Categories</span></p>
<p><span class="comment">Interwiki Language Links</span></p>
<p> </p>
<p>{{ languages( {"en": "en/SVG", "de": "De/SVG", "es": "es/SVG", "fr": "fr/SVG", "it": "it/SVG", "ja": "ja/SVG", "pl": "pl/SVG", "pt": "pt/SVG" } ) }}</p>