如何在 JavaScript 中導(dǎo)入 SVG 文件？-魔扣目錄

可縮放矢量圖形，有時(shí)稱為 SVG，是一種 2D 圖形或圖像文件。為了
創(chuàng)建視覺效果，SVG 文件采用數(shù)學(xué)公式和一組有關(guān)形狀、線條、
和其他功能。 SVG 只是 XML 代碼，指定如何呈現(xiàn)顏色，其中
每個表單應(yīng)相對于文件內(nèi)的其他形狀出現(xiàn)，以及形狀應(yīng)如何顯示
顯示。

SVG 和其他一些矢量圖形與依賴于
用于傳達(dá)視覺數(shù)據(jù)的像素，例如 jpeg 或 png 文件。

在網(wǎng)頁設(shè)計(jì)中使用 SVG 文件的四個優(yōu)點(diǎn)如下 –

清晰度

SVG 文件可以無限縮放。 SVG 文件比光柵圖像具有顯著優(yōu)勢，因?yàn)?br /> 您可以根據(jù)需要多次放大它們并調(diào)整它們的大小，而不會失去清晰度。光柵圖像
如果未正確縮放，它們可能會失去清晰度，甚至可能開始看起來很粗糙。

靈活性

創(chuàng)建在任何設(shè)備上都看起來不錯的響應(yīng)式 SVG 文件相當(dāng)容易，即使在
查看器放大網(wǎng)頁。 SVG 文件可以在整個編輯階段反復(fù)調(diào)整大小
而又不失清晰度。 SVG 文件是徽標(biāo)和簡單信息圖表的絕佳選擇
因?yàn)樗麄兊倪m應(yīng)性。 SVG 文件也可用于動畫，而且它們尤其適用
有利于開發(fā)具有不同配色方案和漸變的字體。

較小的文件

根據(jù)視覺的復(fù)雜性或設(shè)計(jì)中路徑的數(shù)量，SVG 文件大小
可能比完全相同圖像的 PNG 或 JPG 少得多。 SVG 文件可以是
根據(jù) Vecta.io 的說法，比 PNG 小 60% 到 80%，這也可以減少負(fù)載
倍并改善用戶體驗(yàn) (UX)。對網(wǎng)站搜索引擎優(yōu)化的另一個好處是頁面加載速度更快。

更輕松的訪問和包容

就可訪問性和多樣性而言，SVG 文件具有許多優(yōu)勢。設(shè)計(jì)師
能夠在 SVG 文件中包含定義圖形視覺元素的結(jié)構(gòu)數(shù)據(jù)
本身可以幫助特定輔助技術(shù)的用戶理解其中包含的內(nèi)容
一個圖像。作為一個選項(xiàng)，光柵文件僅使用元數(shù)據(jù)（即替代文本）來通知屏幕閱讀器和
有關(guān)圖形內(nèi)容的其他輔助技術(shù)。

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

第一種方法

最快的方法是使用 HTML 元素。

語法

<img src='logo.svg' alt="some file" height='100' width='100' style="color:orange;"/>

登錄后復(fù)制

您需要以下內(nèi)容才能將 SVG 嵌入到元素中 –

src 屬性

當(dāng)您的 SVG 沒有固有的寬高比時(shí)，請使用高度屬性。

當(dāng)您的 SVG 本身沒有寬高比時(shí)，請使用寬度屬性。

優(yōu)點(diǎn)

部署簡單快捷。

嵌套 HTML 元素和會將 SVG 圖像一起轉(zhuǎn)換為超鏈接。

SVG 文件緩存，從而加快加載速度。

缺點(diǎn)

SVG 文件不易被操縱。

只需使用內(nèi)聯(lián) CSS 即可設(shè)置 SVG 樣式。

CSS 偽類不能用于設(shè)置 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="tutorialspoint-logo" height="90" width="310" style="background-color: transparent" />
   </body>
</body>
</html>

登錄后復(fù)制