如何讓 Vivus SVG 在您的 Divi 網站上運行

已發表: 2023-01-05

如果您想為您的 Divi 網站添加一些活力，您可能想知道如何讓 Vivus SVG 工作。這是幫助您入門的快速指南。 Vivus 是一個 JavaScript 庫，可讓您為可縮放矢量圖形 (SVG) 製作動畫。這可能是為您的網站增加一些視覺趣味的好方法，尤其是當您使用 Divi 時，這是一個流行的 WordPress 主題，以其乾淨簡單的設計而聞名。雖然 Divi 確實支持 SVG，但要讓它與 Vivus 一起工作可能有點棘手。好消息是，您可以遵循幾個簡單的步驟來啟動和運行。首先，您需要從官方網站下載 Vivus SVG 文件。接下來，您需要將文件上傳到您的 Divi 網站。您可以通過轉到 WordPress 儀表板並從“媒體”菜單中選擇“添加新”來完成此操作。上傳文件後，您需要將以下代碼添加到您的 Divi 網站的 header.php 文件中：最後，您需要將以下代碼添加到您的 Divi 網站的 footer.php 文件中： > 通過這些簡單的步驟，您應該能夠讓 Vivus SVG 在您的 Divi 網站上運行。

SVG（可縮放矢量圖形）文件格式是一種基於矢量的圖像格式，可用於創建網頁。該程序被設計為 Web 圖形標準，並與大多數瀏覽器兼容。這些奇特的 SVG 圖像將使用一些圖像編輯軟件創建，例如 Adobe Illustrator 或 Inkscape。沒有可用的 WordPress 或 Divi 程序。因為SVG 文件是基於默認的，所以我們必須啟用這些工具。在本 Divi 教程中，我們將了解如何將 SVG 插入到我們的 Divi 安裝中。矢量圖形 (SVG) 比 PNG 小得多，不太可能降低您的計算機或網站的速度。

由於它們的矢量文件格式，您可以在不犧牲質量的情況下縮小或放大它們。因為它們被谷歌等搜索引擎用於網頁設計，所以它們也是一個受歡迎的選擇。您還將了解在 Divi 中實現 SVG 圖像的兩種不同方式。在每種情況下，我們都必須先安裝一個插件，然後才能執行代碼。在本文中，我們將了解如何添加對 SVG 上傳到 WordPress 和 Divi 的支持。通過為我們的網站添加 Divi 支持，我們可以在我們的網站名稱中包含我們的徽標。在本教程中，我們將向您介紹如何通過將一些單詞和數字粘貼到代碼模塊中來向您的 Divi 網站添加圖像。

之後，我們將向您展示如何使用 CSS 為這段代碼添加一些引人注目的效果。要操作每個路徑，請為每個路徑分配 CSS 類，然後使用 CSS 代碼來執行此操作。請使用下面的代碼模塊將代碼粘貼到兩個標籤（樣式和模塊）之間。我們可以使用我們的 Adobe Illustrator 代碼和 Divi 代碼製作 SVG 徽標。在本節中，我們將了解 CSS 的 fill、stroke 和 transform 屬性，它們都很常見。我們將在以後的教程中使用 Divi Engine 向您展示如何製作 SVG 動畫。

Divi 是否支持 Svg 圖片？

是的，Divi 確實支持 SVG！您可以像上傳任何其他圖像文件一樣上傳它們，它們會工作得很好。

如何在 WordPress 和 Divi 中啟用 Svg 上傳

因為 WordPress 和 Divi 不支持 SVG 文件，所以我們需要使用一些第三方工具將它們上傳到我們安裝的 Divi 中。下面是本 Divi 教程中的兩個工具：WordPress 插件和 SVG 圖像編輯器。儘管 WordPress 本身不支持 SVG 文件，但我們最喜歡的一些開發人員資源可以幫助我們在我們的網站上啟用和保護它們的使用。我們將從查看WordPress SVG 插件開始。它是允許您上傳 svg 文件並將其嵌入到 WordPress 帖子和頁面中的插件。我們將使用的下一個工具是 Divi Image Editor。使用此編輯器直接在 Divi 中創建和編輯 SVG 文件。因此，您可以輕鬆創建特定於您網站的圖形。

為什麼 WordPress 不允許使用 Svg？

WordPress 中不允許使用 SVG 有幾個原因。首先，SVG 是一種矢量圖形格式，可以縮放到任意大小而不會降低質量。這使得它非常適合在響應式網站上使用。但是，WordPress 目前不支持響應式圖像。其次，SVG 文件可能包含危害網站安全的惡意代碼。最後，WordPress 不支持 SVG 的動畫功能，這意味著任何動畫 SVG 文件都無法在您的網站上正常工作。

可以使用可縮放矢量圖形 (SVG) 文件在 WordPress 站點上顯示二維圖像。當您重新配置文件類型時，您將能夠優化一些徽標和其他圖形。由於它們的可擴展性，您可以根據需要管理大小而不會對圖像質量產生負面影響。因為 WordPress 不支持 SVG，所以您需要採取額外的步驟才能將它們包含在您的站點中。您將學習如何通過插件和手動過程將 SVG 合併到您的網站中。建議管理員只能訪問 SVG 上傳文件。在上傳文件之前對文件進行“清理”也是一個好主意。

要啟用下一個在您的 WordPress 網站上啟用 SVG 的方法，請編輯您網站的 functions.php 文件。第 2 步是將代碼片段添加到您的函數的標記中，以允許它向您的網站上傳 HTML 文件。作為第 3 步，您可以在您的 WordPress 網站上手動啟用 SVG。在第一步中，您必須在您的網站上啟用並保護 SVG 文件的使用。第三步是與 SVG 進行交互和查看，就像與其他類型的圖像一樣。這些步驟將幫助您密切關注這些文件的安全性。

Svg 文件：您網站的安全風險

由於其基於 XML 的特性，它很容易受到外部實體攻擊等攻擊。需要注意的是，出於安全考慮，WordPress 帖子編輯器不支持 SVG 文件。如果您選擇使用 WordPress，您仍然可以通過上傳 SVG 文件並將圖像塊添加到帖子編輯器來使用它們。可以使用代碼片段等代碼管理插件將 PHP 代碼直接插入 WordPress。

如何在沒有插件的情況下在 WordPress 中啟用 Svg？

向 WordPress 添加SVG 支持需要幾個步驟：首先，您需要將以下代碼添加到主題的 functions.php 文件中：返回 $upload_mimes； } add_filter( 'upload_mimes', 'wpb_add_svg_to_upload_mimes', 10, 1 ); 此代碼告訴 WordPress 它應該允許上傳 SVG 文件。接下來，您需要下載並安裝 Safe SVG 插件。這個插件將允許您安全地將 SVG 文件上傳到您的 WordPress 站點。安裝插件後，轉到“設置”>“SVG 設置”並啟用“允許媒體庫中的 SVG”選項。而已！您現在應該能夠將 SVG 文件上傳到您的 WordPress 站點。

用於向網站添加矢量圖形的最常見圖像格式之一是 SVG（可縮放矢量圖形）圖像格式。上傳a.sva文件到WordPress時，編輯器不支持。必須在您的 WordPress 網站上安裝插件才能啟用支持。如果您不需要任何插件，可以使用手動方法啟用上傳到 sva 的功能。如果上傳損壞的 SVG 文件，可能會導致您的網站崩潰。有幾個適用於 WordPress 的安全插件可以幫助您防止此類攻擊。如何將 svg 圖像添加到 WordPress？

方法 1 是使用SVG 支持插件將 SVG 添加到 WordPress。您可以使用 Upload Safe 上傳和刪除 SVG 文件，它是免費且使用安全的。如果您的站點不允許訪客發帖，則 Safe SVG 插件是最佳選擇。還有 Code Snippets 插件，它允許您將 PHP 代碼插入 WordPress。請隨時在評論部分提出有關此的任何問題。在本教程中，我希望您將學習如何安全地將 svg 文件上傳到 WordPress。

它是一種矢量圖形格式，可以直接嵌入到 HTML5 中。為此，您必須在 HTML5 文檔中包含必要的 SVG 標記，並且您可以使用上面列出的任何 jQuery SVG 插件來簡化該過程。

為什麼不顯示 Svg 圖標？

如果源代碼不包含具有 svg 值的屬性，Chrome 將顯示 svg 圖像。更改包含寬度屬性的 SVG 源代碼。

Svg：值得挑戰

這是一項很小的投資，但如果您希望能夠使用 SVG，那是值得的。除了美觀之外，SVG 還可用於使設計更易於訪問。

我如何將 Svg 鏈接到 WordPress？

為了將 SVG 文件鏈接到 WordPress，您需要先將文件上傳到媒體庫。文件上傳後，您可以通過單擊“添加媒體”按鈕並從庫中選擇文件將其插入帖子或頁面。

您可以在本文的標題“可縮放矢量圖形”中找到它。這些類型的圖像文件不同於其他基於像素的圖像文件，例如 JPEG、PNG 和 GIF 文件。使用矢量，以數學方式繪製“矢量圖形”圖像，它是稱為“SVG 圖像”的圖像集合的子集。二維地圖通過定義圖像的每個組件來確定圖像的顯示方式。由於這些文件的設計不安全，因此 WordPress 認為它們不安全。因為必須解析 XML 標記才能顯示矢量圖形，所以它容易受到惡意代碼的攻擊。上傳到網站的任何 SVG 文件不包含惡意代碼至關重要。

大多數時候，使用插件來處理像這樣的大文件會很簡單。使用 SVG Safe 和Support SVG 插件，可以輕鬆地將圖像上傳到您的媒體庫。在將它們添加到媒體庫之前，必須對這些文件進行清理。如果您想確保您網站的圖形無論以何種方式顯示都清晰且看起來很棒，您可以使用 SVG。他們通過為所有屏幕尺寸使用單個圖像來加快網站設計，從而使創建響應式網站變得簡單。 SVG 的唯一缺點是它們極易受到安全漏洞的攻擊。

'svg' 標籤可用於將 asvg 圖像直接插入到 HTML 文檔中。您可以通過在 VS 代碼或類似的 IDE 中打開 SVG 圖像、複製代碼並將其插入到 HTML 文件的 body> 元素中來執行此操作。如果您的所有步驟都正確執行，下面的演示看起來會完全一樣。
當您將 SVG 作為菜單圖標插入時，您將添加一個 SVG 圖標。
必須先啟用全局選項卡，然後才能在全局選項卡中放置包含 SVG 的菜單圖標。然後，轉到菜單結構並選擇菜單項。為菜單項上傳 SVG 集後，選擇一個代表最合適菜單項的圖標。單擊“選擇”後，站點將被更新。

迪維SVG

divi svg 是一種可以在網站上使用的矢量圖形。它們通常用於向網站添加圖形，並且可以自定義以適應網站的外觀和感覺。 Divi svg 圖形可以在各種軟件程序中創建，並且通常以可在網站上使用的文件格式保存。

Divi 插件

Divi WordPress 主題有多種插件可用。這些插件可以為您的網站添加額外的功能，或改變某些元素的外觀。許多 Divi 用戶發現插件是自定義網站的好方法，無需編輯代碼。

您可以單獨使用它來創建功能強大的網站。這並不意味著能夠一次完成所有事情。在這種情況下使用 Divi 插件（也稱為Divi 擴展）至關重要。他們擴展了 Divi 的功能，使其可以執行新任務。由於 Divi 允許您完全設計插件，因此它僅用於 WordPress 編輯。一些 Divi 插件將包含新模塊，而其他插件將包含自定義帖子類型。大多數插件只要是 WordPress 主題就可以正常工作。

Divi 插件與任何其他 WordPress 插件相同。 Divi 是一個 WordPress 主題和頁面構建器，旨在滿足 WordPress 最佳實踐。 Divi 包含許多特性和功能，使其成為添加其他插件的有吸引力的平台。

如何在您的 WordPress 網站上安裝 Divi 插件

在您的 WordPress 網站上使用 Divi 插件之前，您必須首先找到 Divi-Builder.zip 文件。下載並提取文件後，您必須將文件上傳到您的 WordPress 網站。為此，請轉到您的 WordPress 儀表板並登錄到插件部分。您將被帶到 WordPress 插件頁面。
找到文件後，選擇要安裝插件的 ZIP 文件，然後單擊“上傳插件”按鈕上傳插件。單擊“立即安裝”按鈕下載 ZIP 文件。安裝後必須激活該插件。
Divi 插件有兩種定價選項：年度訪問和終身訪問。年度訪問計劃每年收費 89 美元，包括訪問更新和新功能，而終身訪問計劃每年收費 249 美元，包括在您的餘生中訪問更新。