如何在 WordPress 中使用 SVG

已發表: 2019-02-15

儘管 SVG 在 2000 年代初期已經標準化，但由於瀏覽器支持不佳，這種極具吸引力的圖像格式在當時並未受到重視。 近年來，這一切都發生了巨大的變化，因為 SVG 正迅速成為網絡上事實上的圖像形式。

愛上 SVG 的不僅僅是平面設計師，還有希望通過減小整體圖像大小來加快博客速度的 WordPress 用戶。 這篇文章將探討如何在基於 WordPress 的網站上使用 SVG 的主題。

什麼是 SVG？

SVG（可縮放矢量圖形）是一種基於 XML 的圖像格式，用於在 Web 和應用程序中顯示圖形。 從根本上說，SVG 文件只是 XML 代碼的集合，用於指定 SVG 圖像中使用的不同形狀和顏色。

由於您可以使用文本編輯器打開 SVG 文件，因此使用基本的 CSS3 和 JS 代碼進行自定義也很容易。 因此，SVG 因其多功能的靈活性而受到現代 Web 用戶的高度青睞。

最重要的是，W3C 將 SVG 視為行業領先的標準。 因此，SVG 可以與其他基於 Web 的技術（如 DOM、HTML 等）完美地協同工作。

為什麼 SVG 很重要？

SVG 圖像是基於矢量的，因此，SVG 圖像可以在屏幕上無限縮放而不會損失質量。 這方面的核心交互是Browser XML； 瀏覽器在每次增加或減少時繪製 XML 規範。

不用說，SVG 文件比 PNG 或 JPEG 等傳統格式靈活得多。 CSS 和 JavaScript 之間的直接交互意味著您可以隨時隨地調整 SVG 圖像。 當您進行新設計或其他工作時，這一點至關重要。

SVG 動畫鼓套件
您幾乎可以使用 SVG 設計任何東西！ 如果您願意，甚至是動畫架子鼓。 看看它的實際效果：https://codepen.io/iamjoshellis/pen/KVdQqm

在性能方面，SVG 圖像的尺寸往往比任何同類圖像都要小得多。 因此，通常會看到插圖、徽標和圖標被構建為矢量圖形。 這也導致了許多圖標字體的發展，我們將在後面的文章中簡要提及。

簡而言之，SVG 提供了靈活性、減小了圖像大小，並為提高 WordPress 網站的圖像性能奠定了堅實的基礎。

SVG 圖像是如何創建的？

可以通過兩種方式創建 SVG 圖像：編寫“代碼”，以及使用現代圖形設計軟件。 第一種方法是編寫 XML 腳本，這是構建 SVG 文件的傳統方法，但可以證明是一種緩慢且低效的技術。

一個簡單的正方形集合在 XML 格式中可能看起來像這樣：

SVG 示例代碼

如您所見，為複雜的圖形重複編寫此代碼與在腳上射擊自己是一樣的。

另一種方法是使用軟件，這是構建 SVG 圖形最快、最有效的方法。 使用基於矢量的軟件，您可以專注於創建圖形，然後將它們導出為現成的 SVG 文件。

親和設計師 SVG (1)

Affinity Designer 是著名的專業矢量編輯程序，Adobe Illustrator、Sketch、Figma 和 Inkscape 等軟件也是如此。

無論您決定使用哪種軟件，唯一真正重要的是您對要創建的圖形類型的計劃。 導出功能在所有現代程序中都是一樣的。

不用說，SVG 始終是相同的 XML 結構。 因此，您既可以將 SVG 圖像用作文檔，也可以將其插入內聯。

WordPress 是否支持 SVG？

聽起來可能很奇怪，具有 WordPress 範圍的平台實際上並不支持 SVG 文件格式。 但僅僅是因為可怕的安全問題。

您會看到，與 PNG/JPG/GIF 文件類型不同——SVG 不是光柵化圖像，而是矢量。 因此，SVG 面臨著 JavaScript 漏洞利用的風險，而 WordPress 選擇默認不允許 SVG 在 WordPress 中使用。 從各個角度來看，這都是有道理的。

SVG 圖標 (1)

儘管 WordPress 貢獻者多年來一直在談論 SVG，但為了防止大規模的安全問題，有太多的角度需要解決。

因此，解決此問題的唯一方法是通過插件或使用主題功能將 SVG 啟用為文件格式。

如何在 WordPress 網站上啟用 SVG 圖像？

在我們進入插件部分之前，您實際上可以通過主題目錄中的functions.php文件在 WordPress 中啟用 SVG。 這絕對是最快的方法，但也是最不安全的，因為您啟用了原始格式的 SVG。


//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){

$new_filetypes = 數組（）；
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes);

返回 $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

而您的另一個更安全的選擇是使用插件。 以下是在 WordPress 中啟用 SVG 的三個最著名的插件。

SVG 支持

SVG 支持 WordPress 組織

添加 SVG 支持是成功的一半，您可能還想添加自定義樣式、動畫效果和啟用限制。 但要做到這一切，你需要一些支持。

借助 SVG 支持——您可以開始使用傳統的 Image 標籤將 SVG 文件添加到您的帖子和頁面中。 例如，您可以為您的圖像添加一個新的 CSS 類：“style-SVG”，它將獲取您上傳的 SVG 圖像並在線顯示其內容。

這個插件的主要特點是：

  • 在 WordPress 媒體庫中啟用 SVG 文件的管理。
  • 將上傳的 SVG 圖像轉換為內聯代碼。
  • 支持將 Alt 和 Caption 標籤添加到所有 SVG 圖像的 Image Widget。
  • 使用自定義 CSS 為單個 SVG 圖像設置樣式。
  • 使用 CSS3 和 JavaScript 實現動畫效果。
  • 插件儀表板中的詳細設置頁面。
  • 強制執行基於權限的訪問。 例如，將上傳限制為僅具有管理員權限的帳戶。

請注意，儘管這個插件提供了什麼，但利用 SVG 的風險是相當真實的。 不要為您不信任的用戶啟用 SVG 文件管理。 因此，理想情況下，您只會為管理員級別的用戶啟用此功能。

重申一下，任何擁有上傳權限的人都可以上傳新的 SVG 文件，但是因為 SVG 文件是基於 XML 的——它們很容易通過惡意注入等方式被利用。

安全 SVG

安全的 SVG WordPress 組織

Safe SVG 是一款讓您無需擔心潛在安全風險的插件。 該插件專門用於清理任何新的 SVG 上傳並防止惡意意圖。 此外，Safe SVG 增加了查看您通過媒體庫上傳的 SVG 文件類型的功能。

擁有 50,000 名活躍用戶，您可以依靠 Safe SVG 提供出色的安全性能記錄。 值得注意的是，這個插件有兩個不同的版本； 免費和付費。

免費版本包括清理新上傳的功能，還增加了對媒體庫中 SVG 查看的支持。

wp svg (1)

如果您選擇專業版，那麼您將獲得額外的功能，如 SVGO 優化。 這種優化技術將進一步減少 SVG 上傳的文件大小。

此外，使用 Pro，您可以選擇誰可以或不可以上傳新的 SVG 文件。 因此，您可以僅限制特定用戶的訪問。 最後，通過購買插件，您可以獲得高級支持——在您最需要的時候回答您的問題。

添加完整的 SVG 支持

添加完整的 SVG 支持 WordPress 組織

您應該使用我們列出的前兩個插件獲得合理的結果。 但是，如果您喜歡使用簡碼將 SVG 添加到您的網站的想法，請查看此插件。

該插件為您的 WordPress 添加了一些 SVG 功能，並使用了基於 Alexey Ten 的想法的 SVG 技術。 這種將 SVG 圖像包含到 HTML 中的方式似乎是目前性能和兼容性的最佳組合。

添加完整的 SVG 支持支持 SVG 上傳和短代碼生成。 此外，您可以使用自定義 CSS 自定義每個 SVG 元素的樣式。 最後但同樣重要的是，您可以為您上傳的任何或所有 SVG 指定後備照片。

WordPress 還有哪些其他有用的 SVG 插件？

除了向 WordPress 網站添加 SVG 支持之外，還有哪些其他插件可以使您的網站受益？ 每個人和他們的祖母都知道有顯著的性能優勢。 無論是在文件大小方面，還是在瀏覽器內聯渲染矢量圖的能力方面。

WP SVG 圖標

WP SVG 圖標 WordPress org

圖標是一種視覺元素，這些元素往往會給設計帶來新的生命。 有趣的是，這個插件是出於個人需要而誕生的。 作者想開始在他的設計中實現更多的 SVG 文件，但找不到解決方案。 因此，他花時間和精力創建了 WP SVG Icons。

該插件非常易於使用，只需單擊幾下即可替換網站上現有的圖標。 最重要的是，您也不需要為 Retina 顯示器重新創建每個圖像，只要您設置 max-width，圖標就會自動縮放。

就像作者的情況一樣，這個插件非常適合各種開發、多站點和客戶端工作。 沒有任何限制，您無需擔心主題兼容性或任何類似性質的問題。

該優惠似乎還有一個高級版本，具有啟用自定義圖標上傳的功能。 因此，您不僅限於集成圖標。

SVG 社交菜單

SVG 社交菜單 WordPress org

這是一個插件，用作通過 SVG 圖像顯示社交媒體圖標的小部件。 要使此插件正常工作，您只需創建一個新的 WordPress 菜單，其中包含指向您的社交媒體資料的鏈接。

然後，選擇自定義 SVG 社交菜單位置並保存新菜單。 之後，您可以在側邊欄或博客的其他小部件就緒區域中使用 SVG 社交菜單小部件。

當前可用的圖標適用於以下網站和平台：plus.google、WordPress、facebook、twitter、dribbble、Pinterest、Github、Tumblr、Youtube、Flickr、Vimeo、Instagram、LinkedIn、xing /feed、mailto。

SVG 標誌和文字效果

SVG 標誌和文字效果 WordPress org

SLATE 是一個插件，支持添加自定義 SVG 效果的簡碼。 您可以使用此插件來提升強大的品牌形象、強調 CTA 小部件或使元素以自己的方式脫穎而出。 短代碼支持的智能使用意味著您可以在任何給定時間編輯和自定義效果。

例如，您可以將不同的顏色、字體、過濾器混合在一起，並利用許多填充圖案，這些填充圖案表現為引人注目的設計效果。 SLATE 提供與矢量編輯軟件一樣多的創作自由，但您無需使用任何軟件！

那麼，有哪些關鍵功能呢？

  • 文本。 生成可以復制引人注目但對 SEO 友好的文本效果的短代碼。 就像您在上面的快照中看到的一樣。
  • 字體。 不確定從哪裡獲得自定義字體？ 無需擔心，因為 SLATE 預裝了龐大的 Google 字體庫。
  • 填充圖案。 字母用您選擇的填充圖案填充。 填充圖案有參數。 控制各種尺寸、距離和顏色以產生獨特的變化，或者讓默認設置為您服務。

還有更多！ 這個插件是一個強大的工具，可以讓你的文本和標誌以非常精確的方式設計。 通過 SVG，同樣如此。

在哪裡可以找到 SVG 圖形？

如果您沒有任何矢量圖形設計方面的專業知識，您能做什麼？ 幸運的是，如今找到 SVG 非常簡單明了。 最多，您只需鏈接回製作圖形的原始作者。 許多平台提供免費圖片，無需註明出處。

以下是一些提供免費 SVG 內容的精彩網站：

  • FontAwesome — Font Awesome 是世界上最棒的字體圖標庫。 該項目多年來一直很強勁，不僅對瀏覽器而且對特定框架和設計軟件都有深入的支持。 這個面向可訪問性的字體包絕對是一個殺手，而且使用起來非常簡單！ 事實上，我確信有十幾個 WordPress 插件支持 Font Awesome！
  • Vecteezy — Vecteezy 可以說是地球上最大的矢量圖形平台。 在定制設計、社區貢獻和基於 Web 的數據的推動下：Vecteezy 提供任何種類、形狀或形式的矢量。 下載文件也非常容易。 您所要做的就是鏈接回您從中獲取文件的作者頁面。 這是我發現自己經常使用的網站。
  • SVG 背景— 您是否跟上最新的網頁設計趨勢？ 現在有很多創意領域正在探索設計。 其中之一是 SVG 背景。 你也見過他們。 波浪紋、曲線等。 使用此站點生成易於訪問的 SVG 背景！
  • SVG Grabber — 這個 Chrome 擴展程序絕對是從不同網站頁面獲取 SVG 圖像的天賜之物。 只需單擊圖標，擴展程序就可以獲取頁面上的每個 SVG 文件。 當然，您必須盡可能遵守版權規則，但總的來說，這感覺像是一個經常使用的可靠擴展。
  • 矢量標誌區— 根據您工作的細分市場，您可能會發現收集來自世界領先品牌的基於矢量的標誌很有用。 您還可以在發布特定公告或促銷時使用這些文件。 如今，大多數照片編輯器都可以將 SVG 文件轉換為 PNG 或其他格式。

這就是我們真正接觸到的東西的表面。 就個人而言，SVG 在我處理網站設計甚至創建特色圖像的方式上產生了很大的不同。 使用 SVG，您可以真正在色譜、形狀的不同對齊方式等方面全力以赴。

當然，這與使用美麗的真實攝影不同，但在任何給定的網站上，您都可以找到很多可以用矢量圖形替換 JPG 的地方。 這正是這篇文章的目標，讓您大致了解如何在 WordPress 中使用 SVG。

無論我們是否實現了那個目標，我們都會讓你來判斷。 如果您想在這篇文章中添加任何內容，或者您​​有其他資源要分享 - 請注意我們的評論部分始終開放。