---
title: 入門
slug: Web/SVG/Tutorial/Getting_Started
translation_of: Web/SVG/Tutorial/Getting_Started
---
<p>{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}</p>

<h3 id="A_Simple_Example" name="A_Simple_Example">一個簡單的例子</h3>

<p>讓我們用一個簡單的例子來進入主題，先看下面的程式碼：</p>

<pre class="brush: xml">&lt;svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;rect width="100%" height="100%" fill="red" /&gt;

  &lt;circle cx="150" cy="100" r="80" fill="green" /&gt;

  &lt;text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&gt;SVG&lt;/text&gt;

&lt;/svg&gt;
</pre>

<p>複製這段程式碼，在一個文件裡貼上，給該文件起名為demo1.svg，然後用Firefox打開它，會渲染成下面截圖的樣子。(Firefox 用户: 點<a class="external" href="https://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml" title="https://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">這裡</a>)</p>

<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p>

<p>渲染過程包括以下内容：</p>

<ol>
 <li>我們先看一下<code>svg</code>根元素：

  <ul>
   <li>不使用類似(X)HTML的文檔聲明，因為基於SVG的DTD會造成很多問題，弊大於利。</li>
   <li>為了明確SVG版本，<code>version</code> 和 baseProfile 兩個屬性必須要寫</li>
   <li>作為XML方言，SVG必須始終绑定正確的命名空間（xmlns属性）。更多資訊，請參考<a href="/en/SVG/Namespaces_Crash_Course" title="en/SVG/Namespaces_Crash_Course">命名空間速成班頁面</a></li>
  </ul>
 </li>
 <li>畫一個覆蓋整個圖形的矩形 ，將背景設為红色</li>
 <li>在红色矩形中間畫一個綠色的圓形<code>，半徑是80像素（圓心坐標：x軸向左偏移150像素，y軸向上偏移100像素）【坐標系統會在後面章節介紹】</code></li>
 <li><code>描繪“SVG”文字，字母填充成白色，通過設定錨點定義文本的中點，在這個例子裡，中點是綠色圓形的圓心，通過調整字號和垂直位置，確保最終顯示效果的美觀</code></li>
</ol>

<h3 id="SVG文件的基本屬性"><code>SVG文件的基本屬性</code></h3>

<ul>
 <li><code>首先要注意的是元素渲染的順序，SVG的全局規則是：<em>靠後的元素，將在靠前的元素上面渲染</em>。</code></li>
 <li><code>在web上，SVG可以直接放進瀏覽器裡顯示，或者通過以下幾種方式嵌入到HTML文檔中顯示： </code>
  <ul>
   <li><code>如果是XHTML文檔，並且響應端接受<code>application/xhtml+xml類型</code>，SVG就可以在XML源裡直接嵌入</code></li>
   <li><code>如果是HTML5文檔，並且瀏覽器支持HTML5，SVG也可以直接嵌入，但是語法上需要修改，以符合HTML5規範。</code></li>
   <li><code>SVG可以通過<code>Object</code>元素引入: </code>
    <pre><code>        &lt;object data="image.svg" type="image/svg+xml" /&gt;</code></pre>
    <code> </code></li>
   <li><code>同樣可以通過<code>iframe</code>引入: </code>
    <pre><code>        &lt;iframe src="image.svg"&gt;&lt;/iframe&gt;</code></pre>
    <code> </code></li>
   <li><code>理論上，<code>img</code>元素也可以用来引入SVG，但是Firefox 4.0之前的版本不支持這一功能。</code></li>
   <li><code>最後，SVG可以用JavaScript動態創建，並且注入到HTML DOM裡面。這樣做的好處是，對於不支持SVG的瀏覽器，可以啟用其它替代技術。</code></li>
  </ul>
  <code> 這是一個深入探討該主題的<a href="/en/SVG_In_HTML_Introduction" title="en/svg in html introduction">專題頁面</a>。 </code></li>
 <li><code>SVG如何處理大小和單位，將在<a href="/en/SVG/Tutorial/Positions" title="en/SVG/Tutorial/Positions">下一頁</a>進行解釋。</code></li>
</ul>

<h3 id="SVG_File_Types" name="SVG_File_Types"><code>SVG文件的類型</code></h3>

<p><code>SVG文件類型有兩種，普通的SVG文件是包含SVG標籤的文字文件，這類型文件的副檔名是“.svg”（全小寫）。</code></p>

<p><code>SVG規範支持超大體積的SVG文件，以便符合一些應用程式的使用要求（比如地理應用），所以SVG規範提供了gzip壓縮的SVG文件格式，這類文件的後缀是“.svgz”（全小寫）。不幸的是，從微軟的IIS伺服器上獲取SVG壓縮文件將會出現問題，並且，Firefox不支持本機端的SVG壓縮文件。所以，如果要使用SVG壓縮文件，你必須保證使用的是支持這種文件的服務器。</code></p>

<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers"><code>關於web服務器</code></h3>

<p><code>現在你已經大致瞭解了如何創建SVG文件，下一步就是將SVG文件上傳到服務器上。這裡有一些問題需要注意。對於一般的SVG文件，服務器的HTTP響應端是：</code></p>

<pre><code>Content-Type: image/svg+xml
</code></pre>

<p><code>對於經過壓縮的SVG文件，響應端應該是：</code></p>

<pre><code>Content-Type: image/svg+xml
Content-Encoding: gzip
</code></pre>

<p><code>你可以通過一些網站來檢查你的服務器是否使用了正确的響應端，比如 <a class="external" href="http://web-sniffer.net/">web-sniffer.net</a>，提交一個SVG文件的URL，看一下響應端是什麼。如果你的服務器在響應裡没能返回上面的内容，那麼你應該聯繫一下您的主機服務商。如果他們不提供相關的配置服務，你也可以自動動手，具體方法可以查閱SVG wiki的 <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration">服務器配置頁面</a>。</code></p>

<p><code>服務器配置錯誤是SVG加載失敗的主要原因，所以一定要確認你的配置。如果你没有給SVG文件配置正確的服務器響應端，Firefox將會以文本的方式展示文件的標記和編碼内容，甚至要求用户選擇一个應用程序打開它。</code></p>

<p><code>{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}</code></p>

<p><code>{{ languages( { "fr": "fr/SVG/Tutoriel/Premiers_pas", "ja": "ja/SVG/Tutorial/Getting_Started", "zh-TW":"zh-TW/SVG/Tutorial/Getting_Started" } ) }}</code></p>