SVG Tutorial

SVG 教程

Scalable Vector Graphics 通常被稱為 SVG,是一種基於 XML 的格式,用於繪製向量影像。它用於繪製二維向量影像。

本教程將教你 SVG 的基礎知識。教程包含討論 SVG 所有基本元件的章節,並附有相應的示例。

讀者物件

本參考手冊專為初學者準備,旨在幫助他們理解與 SVG 相關的基本概念。本教程將為您提供足夠的 SVG 理解,以便您能夠提升到更高的專業水平。

前提條件

在繼續學習本教程之前,您應該具備 XML、HTML 和 Javascript 的基本知識。

關於 SVG 的常見問題

關於 SVG,有一些非常常見的問題 (FAQ),本節嘗試簡要回答它們。

SVG 用於在 Web 上建立和顯示圖形。它是一種檔案格式,使用數學方程式來描述形狀、線條和顏色,從而使影像可以放大或縮小而不會損失質量。SVG 圖形可用於網站上的徽標、圖示、插圖、圖表和互動元素。由於 SVG 影像輕量級且可以用程式碼操作,因此非常適合建立響應式設計,這些設計在任何螢幕尺寸(從桌上型電腦到移動裝置)上都看起來都很清晰。此外,SVG 圖形可以使用 CSS 或 JavaScript 進行動畫處理和設定樣式,使其成為各種 Web 應用程式的多功能選擇。

SVG 代表可縮放向量圖形。它是一種用於建立和顯示 Web 上圖形的檔案格式。SVG 檔案使用數學方程式來描述形狀、線條和顏色,從而使影像可以放大或縮小而不會損失質量。這使得 SVG 非常適合在網站上建立清晰且可調整大小的圖形,例如徽標、圖示和插圖。

SVG 由全球資訊網聯盟 (W3C) 的一群工程師和開發人員發明,W3C 是一個為全球資訊網制定標準的組織。SVG 的初始開發始於 20 世紀 90 年代後期,由 Web 開發社群的個人和公司做出貢獻。目標是建立一個向量圖形的標準檔案格式,可以直接在 Web 瀏覽器中顯示,從而提供比 JPEG 和 GIF 等光柵圖形格式更靈活和可擴充套件的替代方案。

要開啟 SVG 檔案,您可以選擇多種方法。您可以使用 Chrome 或 Firefox 等 Web 瀏覽器,只需雙擊檔案或右鍵單擊並選擇您的瀏覽器即可。或者,可以使用 Adobe Illustrator 或 Inkscape 等圖形編輯軟體開啟和編輯 SVG 檔案,從而提供更高階的編輯功能。某些影像檢視器(如 Windows 照片或 macOS 預覽)也可以顯示 SVG 檔案。此外,線上工具和網站允許您直接在瀏覽器中檢視和編輯 SVG 檔案,而無需下載任何軟體。

要建立和編輯 SVG 檔案,您可以使用 Adobe Illustrator 或 Inkscape 等圖形軟體,在其中繪製形狀、線條和文字,應用顏色和樣式,並根據需要排列元素。或者,線上編輯器(如 Vectr 或 SVG-Edit)允許您直接在 Web 瀏覽器中操作向量圖形,而無需安裝任何軟體。使用這些工具,您可以設計和自定義您的 SVG 檔案,確保圖形的靈活性和可擴充套件性。一旦您對編輯滿意,就可以儲存檔案並在您的專案中使用它。

要使用 SVG 原始檔,首先使用 Web 瀏覽器、圖形編輯器或線上 SVG 工具開啟它。開啟後,您可以檢視和編輯 SVG 的內容,例如形狀、線條和文字。進行任何更改後,儲存或匯出修改後的 SVG 檔案。最後,您可以將 SVG 嵌入到您的網頁、文件或專案中,從而允許您將圖形顯示為設計或應用程式的一部分。

SVG 元素是用於建立可縮放向量圖形 (SVG) 影像的構建塊。這些元素包括矩形、圓形和多邊形等形狀,以及線條、路徑和文字。每個 SVG 元素都由其自己的標籤和屬性定義,這些標籤和屬性指定其屬性,例如大小、位置、顏色和樣式。透過組合和排列這些元素,您可以建立複雜的圖形和插圖,這些圖形可以放大或縮小而不會損失質量。SVG 元素通常用於 Web 開發中,以建立網站和應用程式的圖示、徽標、圖表和其他圖形元素。

SVG 主要是一種 2D(二維)格式。這意味著 SVG 影像由排列在平面上的形狀、線條和文字組成,就像一張紙一樣。雖然 SVG 支援一些建立偽 3D 效果的有限功能,例如透視變換和陰影,但它並非旨在建立像電子遊戲或 3D 建模軟體中那樣的完整 3D 圖形。相反,SVG 最適合建立用於 Web 設計、插圖和使用者介面的平面可縮放圖形。

要更改 SVG 影像的顏色,您可以使用 CSS 或內聯樣式。使用 CSS,您可以定位 SVG 中的特定元素,並使用fill(形狀)和stroke(線條)等屬性應用所需的顏色。或者,您可以使用style屬性直接向各個 SVG 元素新增內聯樣式。這兩種方法都允許您輕鬆自定義 SVG 影像中形狀、線條和文字的顏色,以實現所需的視覺效果。

要使用顏色填充 SVG 元素,您可以使用 CSS 或內聯樣式。使用 CSS,您可以定位 SVG 中的特定元素,並使用 fill 屬性應用所需的fill顏色。或者,您可以使用style屬性直接向各個 SVG 元素新增內聯樣式。這兩種方法都允許您輕鬆自定義 SVG 影像中形狀、線條和文字的填充顏色,從而在設計和視覺呈現方面提供靈活性。

廣告