在 WordPress 中啟用 SVG 支持

WordPress 允許用戶上傳多種不同類型的圖像文件。 您可能會認出常見的可疑對象，例如 PNG 和 JPG。 顯示其他文件類型（例如矢量圖形）可能會出現更多問題。

幸運的是，有幾種方法可以將矢量文件合併到您的網站中。 雖然不是本機功能，但可縮放矢量圖形 (SVG) 文件可用於在 WordPress 網站上顯示二維圖像。 通過稍微重新配置，您將能夠使用此文件類型優化您的一些徽標和其他圖形。

注意：如果您使用 WP Engine 託管，我們本機支持對 SVG 文件進行 GZIP 壓縮。

在本文中，我們將詳細了解什麼是 SVG 文件以及您可能想要使用它們的原因。 然後，我們將通過兩種方式在您的網站上啟用它們。 我們還將介紹您可能想要採取的一些重要安全預防措施。 讓我們開始吧！

什麼是 SVG？

SVG 文件是一種矢量圖像。 矢量文件的組成不同於更常見的圖像文件類型。 例如，JPG 由數千個像素組成。 另一方面，對於 SVG 文件，情況並非如此。

矢量圖像更像是一組書面說明。 它們不包含形成更大圖像的像素。 相反，它們包含一組類似模式的數據，可創建二維圖像。 這意味著使用 SVG 文件有一些獨特的好處。

為什麼使用 SVG？

SVG 有很多優點。 由於它們具有高度可擴展性，您可以根據需要調整大小而不會影響圖像質量。 您可能非常了解，如果您嘗試放大 JPG 的大小，質量會很快下降到無法使用的水平。

這就是 SVG 可以派上用場的地方。 雖然它們不適用於顯示傳統照片，但它們是您網站上的企業徽標、圖標和其他簡單圖形的絕佳選擇。

此外，SVG 文件往往比其他圖像類型小得多。 這意味著您的網站不會因圖形而陷入困境。 更重要的是，SVG 文件已被谷歌索引，並且已經有一段時間了。 這對您網站的搜索引擎優化 (SEO) 來說是一個真正的福音。

如何將 SVG 上傳到 WordPress

由於 WordPress 不包含開箱即用的 SVG 支持，因此您需要更加努力才能將它們包含在您的網站上。 在接下來的幾節中，我們將介紹如何使用插件和手動過程將 SVG 文件添加到您的網站。

方法一：使用插件

與許多 WordPress 任務一樣，插件可以使啟用 SVG 支持變得簡單。 您所要做的就是選擇正確的工具並配置一些設置。

第 1 步：下載插件

首先，您需要下載並安裝一個 SVG 插件。 我們推薦 SVG 支持：

安裝並激活插件後，您將在 WordPress 儀表板中的設置 > SVG 支持下有一個新的菜單選項。 在那裡，您將收到有關如何為您的網站設置 SVG 文件樣式的說明：

此外，您還可以配置一些重要的管理設置。 這包括將 SVG 上傳權限僅限於管理員：

之後，您將能夠將 SVG 文件直接上傳到您的媒體庫。 但是，還有一些其他重要項目需要首先處理。

第 2 步：在您的服務器上啟用 SVG 文件的 GZip 支持

您如何處理此步驟將取決於您的 Web 主機和服務器設置。 例如，在 WP Engine 中，GZip 已經為特定的文件類型列表啟用。 話雖如此，“image/svg+xml”不是其中之一。

將此類型添加到您網站的列表中將確保您的 SVG 文件得到適當且快速的優化。 您需要將此文件類型包含在您的.htaccess文件中，以便一切順利運行。

第 3 步：確保插件正確保護文件

使用 SVG 文件的缺點之一，也是這種文件類型尚未合併到 WordPress 核心的主要原因，是由於安全問題。 由於 SVG 文件是基於 XML 的，因此它們容易受到外部實體攻擊以及其他風險。

當您配置 SVG 插件時，建議您將 SVG 上傳權限限制為僅限管理員。 但是，更安全的方法是在上傳 SVG 文件之前對其進行“清理”。 這消除了任何可能使您的站點容易受到攻擊的不必要的 XML 代碼。

SVG Support 插件不包括自動清理，但有其他插件可以。 安全 SVG 就是其中之一：

或者，您也可以安裝自己的消毒劑並獨立使用。 Safe SVG 的創建者在 GitHub 上提供了插件的清理代碼，供任何人使用。

如果您計劃使用下一種方法在您的 WordPress 網站上啟用 SVG，那麼擁有自己的消毒劑也是一個不錯的選擇。

方法 2：手動啟用 SVG 文件上傳

如果您更喜歡親自動手而不是使用插件，您可以手動啟用您的 WordPress 網站以接受 SVG 文件。 接下來，我們將看看這個過程是如何工作的。

第 1 步：編輯站點的 Functions.php 文件

首先，您需要編輯網站的functions.php文件。 為此，您可以轉到儀表板中的外觀 > 編輯主題，然後選擇functions.php文件：

或者，您可以使用文件傳輸協議 (FTP) 應用程序（例如 FileZilla）訪問您站點的文件。

無論哪種方式，最好在您的網站上進行任何主要工作之前創建子主題或切換到開發環境。 這將在您進行更改時保護您的實時站點免受傷害。

第 2 步：添加代碼片段

接下來，您需要將以下代碼片段添加到您的functions.php文件中：

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );

之後，您將能夠將 SVG 圖像上傳到您的媒體庫。 在那裡，您可以像查看其他圖像文件類型一樣查看它們並與之交互。

第 3 步：安全訪問並限制 SVG 上傳權限

正如我們前面提到的，啟用 SVG 文件確實存在一定的風險。 為了確保您的站點安全，您可以通過創建自定義用戶角色來設置 SVG 的上傳權限。 您可以使用諸如用戶角色編輯器或 WPFront 用戶角色編輯器之類的插件來完成此操作。

這些插件使您能夠自定義現有用戶角色的訪問和權限級別。 換句話說，他們會讓您指定哪些用戶有權上傳 SVG。 這將幫助您密切關注這些文件的安全性。

使用 WP Engine 保持安全

WordPress 本身不允許使用 SVG 文件。 這很不幸，因為這些文件往往是顯示徽標和其他圖形的最佳選擇。 好消息是，在我們最喜歡的一些開發人員資源的幫助下，您將能夠在您的站點上啟用和保護 SVG 文件的使用。

另外，請記住，在我們的 WordPress 託管計劃中，您將獲得專業支持和完善的網站安全解決方案。 立即與我們一起保護您的網站！