如何在 Javascript 中讀取 Svg 文件

隨著 HTML5 的發布，可縮放矢量圖形(SVG) 已成為網絡上矢量圖形的標準格式。 可以使用任何文本編輯器創建和編輯 SVG 圖像，但使用 Inkscape 等繪圖軟件創建它們通常更方便。 JavaScript 可用於以多種方式在 HTML 文檔中包含 SVG 圖像： 作為內聯元素 作為對象 作為 iframe 作為嵌入 在本文中，我們將研究前兩種方法，內聯和對象。 內聯 在 HTML 文檔中包含 SVG 圖像的最簡單方法是使用 元素。 該元素是 SVG 圖形的容器。 該元素有幾個控製圖像尺寸和位置的屬性。 width 和 height 屬性定義 SVG 圖像的寬度和高度。 viewBox 屬性定義了 SVG 圖像的坐標系。 preserveAspectRatio 屬性定義了在未設置寬度和高度屬性時如何縮放圖像。 該元素還可以包含定義圖像內容的子元素。 Object 在 HTML 文檔中包含 SVG 圖像的另一種方法是使用 元素。 該元素是一個通用容器元素。 它可以包含任何類型的內容，包括其他元素。 該元素有兩個控製圖像顯示的屬性。 data 屬性指定 SVG 圖像的 URL。 type 屬性指定圖像的 MIME 類型。 SVG 圖像的 MIME 類型是 image/svg+xml。 如果元素具有寬度和高度屬性，則 SVG 圖像將以該尺寸顯示。 如果元素沒有寬度和高度屬性，則 SVG 圖像將以其自然大小顯示。 該元素還可以包含定義後備內容的子元素。 如果瀏覽器不支持 SVG 或無法加載圖像，則會顯示此內容。 Iframe 在 HTML 文檔中包含 SVG 圖像的另一種方法是使用 元素。 該元素是一個通用容器元素。 這

“svg”標籤表示由 sva 生成的圖形的容器。 除了眾多可用的方法之外，SVG 還使用圖形，例如路徑、框、圓、文本和圖形。 要了解有關 SVG 的更多信息，您可以參考我們的SVG 教程。

此頁面最後更新於 2021 年 11 月 24 日。所有主要的 Web 瀏覽器，包括 Internet Explorer，都支持使用可縮放矢量圖形 (SVG)。 有許多支持 SVG 原生格式的圖像編輯軟件，包括基於這種格式的 Inkscape。

你能在 Javascript 中使用 Svg 嗎？

HTML、CSS 和 JavaScript 都存在於 SVG 中。

HTML 和 SVG 也可以使用文檔對像模型 (DOM) 表示。 因此，可以使用 JavaScript 輕鬆操作它們。 本課將帶您了解如何使用內聯和外部 SVG 。 可以在本頁頂部找到隨後的代碼示例； 所有這些都可以在 GitHub 上找到。 如果您正在創建外部 SVG，那麼對於元素和 SVG 是否使用相同的代碼並沒有什麼區別。 這樣做的原因是 SVG 無法看到頁面上的其他 SVG，因為它無法訪問嵌入其中的 HTML 文檔。 用 CDATA 包裝 JS 代碼後，XML 解析將其視為 XML 的一部分。

在 HTML 中，創建和刪除元素的過程是相同的。 要創建元素，請使用相關文檔的 createElementNS() 方法，其中包括標籤名稱和元素的標識符。 可以通過創建一個單獨的 XPath 然後將其附加到元素來刪除文本元素。 它們可以以這種方式運行，因為文檔不在同一個地方。

它可以與 HTML 結合使用來創建圖形豐富的網頁。 可以在 SVG 的幫助下創建插圖或圖形。 您可以使用 HTML 中使用的矢量圖形格式對元素進行更改而不會降低其質量。 大多數現代瀏覽器都支持 SVG。

如何在 Html 中查看 Svg？

為了以 HTML 格式查看SVG 文件，您需要使用 或 標籤。 這些標籤允許您將外部內容嵌入到您的 HTML 文檔中。 以下是如何使用這些標籤嵌入 SVG 文件的示例： 您也可以使用標籤嵌入 SVG 文件，但不推薦這樣做，因為它會導致意外結果。

可縮放矢量圖形 (SVG) 是一種圖形。 基於可擴展標記語言 (XML) 的圖形率先將此格式用作圖像格式。 CSS 和 HTML 可以多種方式使用 SVG 圖像。 我們將在本教程中介紹六種不同的方法。 這是使用 sva 文件的 CSS 背景圖像示例。 img 標籤用於將圖像插入 HTML 文檔，其方式與 <img> 標籤用於將圖像插入 HTML 文檔的方式相同。 這次我們使用 CSS 而不是 HTML，我們進行了更多的自定義。

您可以使用 HTML 元素和 HTML。 您可以在所有支持可縮放矢量圖形 (SVG) 的瀏覽器中使用 >object> 選項以及其他類似選項。 在 HTML 和 CSS 中使用圖像的另一種方法是通過HTML > embed> 元素，它使用 HTML 語法：<embed src=happy.svg> /。 大多數現代瀏覽器不支持瀏覽器插件，這就是為什麼使用 <embed> 命令通常不是一個好主意。

使用 svg> /svg> 標籤，可以將 SVG 圖像直接插入到 HTML 文檔中。 您可以通過在 VS 代碼或您喜歡的 IDE 中打開 SVG 圖像來使用此方法，複製代碼並將其粘貼到 HTML 文檔的 body 元素中。 如果您的所有要求都已得到滿足，您應該擁有一個與此處顯示的網頁完全相同的網頁。 如果您嘗試使用 SVG，例如 *img src=”image.svg” 或作為 CSS 背景圖像，您的瀏覽器可能不會顯示該文件，因為服務器可能使用不正確的 URL 或描述提供它。 要確定您的 SVG 圖像是否正確顯示，請打開 Web 瀏覽器並導航到它。 如果內容在您的 Web 瀏覽器中正確顯示，則很可能是由您的服務器根據內容類型提供的。 當 Web 瀏覽器未顯示適當的圖像時，您的服務器可能無法向訪問者提供適當的內容類型。 在這種情況下，您可以嘗試將文件的內容類型更改為 image/ svg XML或 image/x-svg。

Svg 圖像：如何在您的網頁上使用它們

只需在 HTML 文檔中輸入svg 標籤/svg> 即可寫入圖像。 您可以通過在 VS 代碼或其他 IDE 中打開 SVG 文件並複制代碼並將其粘貼到正文中來執行此操作。如果一切按計劃進行，下表中的頁面應該與下圖中的頁面完全一樣。 如果您使用像 img src=image.svg> 這樣的 SVG 或作為 CSS 背景圖像，並且該文件已正確鏈接並且一切顯示正確，但您的瀏覽器未顯示該圖像，則您的服務器可能正在提供該圖像網址不正確。 主流瀏覽器現在都支持打開 SVG 文件的功能，無論您使用的是 Mac 還是 Windows。 您可以通過單擊文件來查看文件。 執行後，您將能夠在瀏覽器中訪問它。

如何查看 Svg？

SVG 或可縮放矢量圖形是一種圖像文件，可以縮放到任意大小而不會降低質量。 它們可以在任何網絡瀏覽器中查看，並且許多網絡瀏覽器還具有用於編輯它們的內置工具。

矢量可縮放圖形 (SVG) 格式通過使用 XML 作為文本格式來描述彩色圖像的顯示方式。 與 JPEG 或 PNG 圖像格式相比，此方法比它們有優勢。 您可以縮小 SVG 文件以滿足您的需求，而不會降低質量。 現代瀏覽器應該支持用於圖形處理的可縮放矢量圖形 (SVG) 格式。 儘管 Microsoft 並未默認提供此功能，但您可以安裝提供此功能的免費擴展程序。 您可以通過單擊文件資源管理器中的預覽窗格或大圖標圖標來預覽和放大您的 SVG 文件。 你唯一必須擁有的就是畫圖。

您可以使用 NET 安裝的擴展通過下載和安裝來創建SVG 查看器。 Microsoft Edge 現在可能會提示您警告，如果您使用最新版本的瀏覽器，該應用可能會損害您的設備。 此路徑允許您下載任何類型的 SVG 文件。 與沒有 SVG 查看器的其他人共享圖像文件時，您必須使用第三方軟件來執行此操作。 我們推薦的是 File Converter，這是一款免費、開源的輕量級工具，可以在幾分鐘內將 SVG 轉換為 JPG。 您可以選擇是使用 PDF 還是其他圖像格式。

2009 年 1 月 1 日，Adobe 停止了對 SVG 查看器的開發和支持。 在業界，SVG 正迅速成為一種標準。 即使 Adob​​e 不支持該格式，將 SVG 文件轉換為更廣泛使用的文件格式（如 PNG 或 JPG）也是確保文件安全且易於訪問的絕佳方式。

為什麼你應該使用 Svg 文件

由於 SVG 文件與所有瀏覽器兼容，因此無需擔心兼容性問題。 此外，許多文本編輯器和圖形編輯器以及高端編輯器都可以渲染 svo。因此，無論您是為了工作還是娛樂需要查看 SVG 文件，您都可以使用。