首頁 >web前端 >js教程 >如何在 JavaScript 中匯入 SVG 檔案？

如何在 JavaScript 中匯入 SVG 檔案？

WBOY轉載: 2023-09-12 23:01:011464瀏覽

可縮放向量圖形，有時稱為 SVG，是一種 2D 圖形或圖像檔案。為了創造視覺效果，SVG 檔案採用數學公式和一組有關形狀、線條、和其他功能。 SVG 只是 XML 程式碼，指定如何呈現顏色，其中每個表單應相對於文件內的其他形狀出現，以及形狀應如何顯示顯示。

SVG 和其他一些向量圖形與依賴於用於傳達視覺資料的像素，例如 jpeg 或 png 檔案。

在網頁設計中使用 SVG 檔案的四個優點如下 -

#清晰度

SVG 檔案可以無限縮放。 SVG 檔案比光柵影像具有顯著優勢，因為您可以根據需要多次放大它們並調整它們的大小，而不會失去清晰度。光柵影像如果未正確縮放，它們可能會失去清晰度，甚至可能開始看起來很粗糙。

靈活性

建立在任何裝置上都看起來不錯的響應式 SVG 檔案相當容易，即使在查看器放大網頁。 SVG 檔案可以在整個編輯階段重複調整大小而又不失清晰度。 SVG 檔案是徽標和簡單資訊圖表的絕佳選擇因為他們的適應力。 SVG 檔案也可用於動畫，而且它們特別適用有利於開發具有不同配色方案和漸層的字體。

較小的檔案

#根據視覺的複雜性或設計中路徑的數量，SVG 檔案大小可能比完全相同圖像的 PNG 或 JPG 少得多。 SVG 檔案可以是根據 Vecta.io 的說法，比 PNG 小 60% 到 80%，這也可以減少負載倍並改善用戶體驗 (UX)。對網站搜尋引擎優化的另一個好處是頁面載入速度更快。

更輕鬆的訪問和包容

就可訪問性和多樣性而言，SVG 檔案具有許多優勢。設計師能夠在 SVG 檔案中包含定義圖形視覺元素的結構數據本身可以幫助特定輔助技術的使用者理解其中所包含的內容一個圖像。作為一個選項，光柵檔案僅使用元資料（即替代文字）來通知螢幕閱讀器和有關圖形內容的其他輔助技術。

在本文中，我們將探索和使用許多 SVG 使用場景（可縮放向量圖形）。

第一種方法

最快的方法是使用 HTML 如何在 JavaScript 中匯入 SVG 檔案？元素。

文法

<img src='logo.svg' alt="some file"    style="max-width:90%"  style="max-width:90%" style="color:orange;"/>

您需要以下內容才能將 SVG 嵌入到元素中 -

src 屬性
#當您的 SVG 沒有固有的寬高比時，請使用高度屬性。
當您的 SVG 本身沒有寬高比時，請使用寬度屬性。

優點

部署簡單快速。
巢狀 HTML 元素和會將 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://img.php.cn/upload/article/000/887/227/169453086951251.png" alt="如何在 JavaScript 中匯入 SVG 檔案？"    style="max-width:90%"  style="max-width:90%" style="background-color: transparent" />
   </body>
</body>
</html>

第二種方法

在下面的方法中讓我們了解如何使用 SVG 作為

文法

<object type="image/svg+xml" data="logo.svg" class="logo">
   Logo
</object>

為了使用「object」元素嵌入 SVG，需要以下內容 -

類型屬性
資料屬性
class 屬性（使用內部/外部 CSS 時）

優點

SVG 可以使用外部/內部 CSS 進行樣式設定。
編碼簡單又快速。
在快取方面應該表現出色。

缺點

如果要使用外部樣式表，則應在 SVG 檔案中使用
不熟悉執行和語法。

範例 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="https://www.php.cn/link/dfb8e1450abdf50cc0f260e0e7a62296" />
</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;
}

輸出

上面的程式碼將給出以下輸出 -

如何在 JavaScript 中导入 SVG 文件？

#第三種方法

在下面的方法中，讓我們了解如何使用嵌入 SVG。

文法

<iframe src="logo.svg" width="500" height="500">
</iframe>

嵌入 SVG 需要元素。

src 屬性。
當您的 SVG 沒有固有的寬高比時，請使用高度屬性。
當您的 SVG 本身沒有寬高比時，請使用寬度屬性。

優點

實作快速而簡單。
它與

缺點

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>

以上是如何在 JavaScript 中匯入 SVG 檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html Object xml class 样式表伪类搜索引擎 ux

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 JavaScript 在沒有警告框的情況下顯示錯誤？下一篇：如何使用 JavaScript 在沒有警告框的情況下顯示錯誤？

看更多