WordPressは、svgファイルをサポートしていないので、メディアにアップロードしてもエラーになってしまう。

テーマフォルダ内に格納したsvg画像の表示は問題ない。メディアで拡張子がsvgのファイルを使用できるようにカスタマイズする。

svgはベクター画像

svgは、拡大と縮小に強いベクター画像。ベクター画像とは、計算式を使って図形を再現して画像をつくっている。複雑な表現には適さない。Scalable Vector Graphics の略。

jpegやpngはラスター画像といい、すでに色の付いたピクセルデータを持っていて、それを規則正しく縦横にならべて画像をつくっている。拡大・縮小には適さない。

形式	ベクター	ラスター
拡張子	svg	jpeg、png
拡大･縮小	○	✕
複雑な表現	✕	○
対応ソフト	Adobe Illustrator	Adobe Photoshop

ベクター画像をエディターで開くと

ベクター画像をエディターで開くと、xmlベースのテキストファイルだとわかる。

<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 16px; height: 16px; opacity: 1;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#4B4B4B;}
</style>
<g>
	<polygon class="st0" points="419.916,71.821 348.084,0 92.084,256.005 348.084,512 419.916,440.178 235.742,256.005 	" style="fill: rgb(75, 75, 75);"></polygon>
</g>
</svg>

テキストファイル内に悪意のあるコードを埋め込むと

svgがテキストファイル故に、JavaScriptなどの悪意のあるコードを埋め込み、悪さをすることができてしまう。そのため、svgファイルを扱うことにはセキュリティリスクが伴う。

WordPressも標準サポートしていない。対応フォーマットは、wp-includes/functions.phpのおよそ3311行以降に記載されているが、svgは記載されていない。

function wp_get_mime_types() {
	/**
	 * Filters the list of mime types and file extensions.
	 *
	 * This filter should be used to add, not remove, mime types. To remove
	 * mime types, use the {@see 'upload_mimes'} filter.
	 *
	 * @since 3.5.0
	 *
	 * @param string[] $wp_get_mime_types Mime types keyed by the file extension regex
	 *                                 corresponding to those types.
	 */
	return apply_filters(
		'mime_types',
		array(
			// Image formats.
			'jpg|jpeg|jpe'                 => 'image/jpeg',
			'gif'                          => 'image/gif',
			'png'                          => 'image/png',
			'bmp'                          => 'image/bmp',
			'tiff|tif'                     => 'image/tiff',
			'webp'                         => 'image/webp',
			'ico'                          => 'image/x-icon',
			'heic'                         => 'image/heic',
			// Video formats.

WordPressでsvgを扱うダメな方法

以前のバージョン（WordPress 4.9.9）までは、functions.phpにコードを記述すれば対応できたが、通用しなくなってしまった。

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

メモ

• メディア格納先をwp-content/uploadsから外し、ルート直下に設置したimagesフォルダに変更している場合、上記のコードでメディアにsvgをアップロードできた。

WordPressでsvgを扱うGOODな方法

対応プラグインがあるので、プラグインを使用すると良い。

• SVG Support
• Safe SVG

svgをアップロードできてしまった

思わぬ挙動を発見し、svg画像をメディアに登録することができてしまった。functions.phpから上記のコードを削除しても、svg画像は正常に動作している。

しかし、svgがサポートされていないのはセキュリティ要因なので、気軽にメディアにアップロードしないほうが良いと思う。