SVG 簡介

什麼是SVG

SVG 是

Scalable Vector Graphics

的首字母縮寫，翻譯成中文表示可縮放矢量圖形。可縮放我們知道，那矢量圖形又是什麼呀，矢量圖也稱為面向對象的圖像或繪圖圖像，在數學上定義為一系列由線連接配接的點。矢量檔案中的圖形元素稱為對象，每個對象都是一個自成一體的實體，它具有顔色、形狀、大小、輪廓、和螢幕位置等屬性。

SVG 是 W3C 推出的基于 XML 的二維矢量圖形标準，也就是一種用于描述二維的矢量圖形。SVG 可以提供高品質的矢量圖形渲染，同時由于支援 JavaScript 和文檔對象模型，SVG 圖形通常具有強大的互動能力。

SVG的優勢

現在我們已經知道了什麼是 SVG，它就是一種用于描述二維的矢量圖形。那麼我們為什麼要使用 SVG 呢？或者說 SVG 有什麼優勢讓我們使用它呢。

SVG 的優勢如下所示：

• SVG 是可伸縮的，并且伸縮不會對圖像品質造成影響，而一般普通的圖像放大或者縮小容易導緻變形，例如 JPG 或 PNG 等。
• SVG 圖像可在任何的分辨率下被高品質地列印。
• SVG 圖像可被多種工具讀取和修改，例如文本編輯器等。
• SVG 圖像可被搜尋、索引、腳本化或壓縮 。
• SVG 圖像與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
• SVG 可以與 Java 技術一起運作。

SVG 建立工具

由于 SVG 是 XML 檔案，SVG 圖像是可以使用任何文本編輯器建立的，但是它往往是與一個繪圖程式一起使用的，比如

Inkscape

、

Adobe Illustrator

，這樣更加友善的建立 SVG 圖像。

Inkscape

是一套開源的矢量圖形編輯器，使用 W3C 标準的 SVG 檔案格式，支援包括形狀、路徑、文本、标記、克隆、alpha 混合、變換、漸變、圖案、組合等 SVG 特性。也支援創作共用的中繼資料、節點編輯、、圖層、複雜的路徑運算、位圖描摹文本繞路徑、流動文本、直接編輯 XML 等。還可以導入 JPEG、PNG、TIFF 等格式，并輸出為 PNG 和多種位圖格式。

Inkscape

是一套跨平台應用程式，有 Windows、Mac OS X、Linux等作業系統。下載下傳位址：https://inkscape.org/。

SVG使用方式

SVG 有四種常見的使用方式，如下所示：

• 第一種，直接在 HTML 中作為

  <svg>

  标簽使用。
• 第二種，在 HTML 中通過

  <img>

  标簽來引用。
• 第三種，通過浏覽器直接打開 SVG 檔案。
• 第四種，可以作為 CSS 背景使用。

連結：https://www.9xkd.com/