資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 JavaScript 中匯入 SVG 檔案？
可縮放向量圖形，有時稱為 SVG，是一種 2D 圖形或影像檔案。為了建立視覺效果，SVG 檔案使用數學公式和一組關於形狀、線條和其他特徵的準則。SVG 只是 XML 程式碼，它指定了顏色應如何呈現，每個形狀相對於檔案內其他形狀應出現在哪裡，以及形狀應如何顯示。
SVG 和一些其他向量圖形與依賴畫素來傳達視覺資料的柵格圖形（如 jpeg 或 png 檔案）有很大不同。
在網頁設計中使用 SVG 檔案的四個優勢如下：
清晰度
SVG 檔案可以無限縮放。SVG 檔案相對於柵格影像的一個顯著優勢在於，您可以根據需要無限放大和調整它們的大小，而不會損失清晰度。如果柵格影像未正確縮放，可能會損失清晰度，甚至可能開始變得粗糙。
靈活性
建立響應式 SVG 檔案相當容易，即使在檢視者放大網頁時，這些檔案在任何裝置上都能顯示良好。SVG 檔案可以在整個編輯階段重複調整大小，而不會損失清晰度。由於其適應性，SVG 檔案是徽標和簡單資訊圖表的一個絕佳選擇。SVG 檔案也可以用於動畫，並且對於開發具有不同配色方案和漸變的字型特別有用。
檔案大小更小
根據視覺效果的複雜程度或設計中路徑的數量，SVG 檔案的大小可能遠小於相同影像的 PNG 或 JPG 檔案。據 Vecta.io 稱，SVG 檔案的大小可以比 PNG 小 60% 到 80%，這也可以縮短載入時間並改善使用者體驗 (UX)。更快的頁面載入速度也有利於網站 SEO。
更容易訪問和包含
在可訪問性和多樣性方面，SVG 檔案具有許多優勢。設計人員能夠在 SVG 檔案本身中包含定義圖形視覺元素的結構資料，這可以幫助特定輔助技術的使用者理解影像中包含的內容。作為一種選擇，柵格檔案僅使用元資料（即替代文字）來告知螢幕閱讀器和其他輔助技術圖形的內容。
在本文中，我們將探討和使用許多 SVG 使用場景（可縮放向量圖形）。
第一種方法
最快的方法是使用 HTML <img> 元素。
語法
<img src='logo.svg' alt="some file" height='100' width='100' style="color:orange;"/>
您需要以下內容才能將 SVG 嵌入到 <image> 元素中：
src 屬性
當您的 SVG 沒有固有的縱橫比時，請使用 height 屬性。
當您的 SVG 本身沒有縱橫比時，請使用 width 屬性。
優點
部署簡單快捷。
巢狀 HTML 元素 <img> 和 <a> 會將 SVG 影像與超連結組合在一起。
SVG 檔案快取，從而加快載入速度。
缺點
SVG 檔案不易操縱。
只能使用內聯 CSS 來設定 SVG 的樣式。
無法使用 CSS 偽類來設定 SVG 的樣式。
示例 1
HTML 原始碼
<!DOCTYPE html>
<html>
<title>How to import a SVG file in JavaScript article - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<body>
<img src="https://tutorialspoint.tw/images/logo.png" alt="tutorialspoint-logo" height="90" width="310" style="background-color: transparent" />
</body>
</body>
</html>
第二種方法
在以下方法中，讓我們瞭解如何使用 SVG 作為 <object>。
語法
<object type="image/svg+xml" data="logo.svg" class="logo"> Logo </object>
為了使用“object”元素嵌入 SVG，需要以下內容：
- type 屬性
- data 屬性
- class 屬性（當使用內部/外部 CSS 時）
優點
- 可以使用外部/內部 CSS 設定 SVG 的樣式。
- 編碼簡單快捷。
- 應該在快取方面表現出色。
缺點
- 如果要使用外部樣式表，則應在 SVG 檔案中使用 <style> 元素。
- 對執行和語法的熟悉程度不足。
示例 2
HTML 原始碼
<!DOCTYPE html> <html> <title>How to import a SVG file in JavaScript article - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="css" href="styles.css" /> </head> <body style="text-align:center"> <object type="image/svg+xml" data="/logo.svg" class="logo"> Tutorialspoint Logo </object> </body> </html>
CSS 原始碼
logo {
height: 90;
width: 310;
}
輸出
以上程式碼將給出以下輸出：
第三種方法
在以下方法中，讓我們瞭解如何使用 <iframe> 嵌入 SVG。
語法
<iframe src="logo.svg" width="500" height="500"> </iframe>
需要 <iframe> 元素來嵌入 SVG。
src 屬性。
當您的 SVG 沒有固有的縱橫比時，請使用 height 屬性。
當您的 SVG 本身沒有縱橫比時，請使用 width 屬性。
優點
實現簡單快捷。
與 <object> 元素相同。
缺點
無法使用 JavaScript 修改 SVG。
快取效果不佳。
示例 3
HTML 原始碼
<!DOCTYPE html> <html> <title>How to import a SVG file in JavaScript article - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body style="text-align:center"> <iframe src="/logo.svg" width="200" height="120"></iframe> </body> </html>
5K+ 次檢視
