可縮放向量圖形，有時稱為 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 元素。
<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 樣式。
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，需要以下內容 -