WordPressでSVGファイルをアップロードする方法【プラグイン＆functions.php】

ハシビィー君

WordPressでは「SVG」ファイルをアップロードできないんっすか？

カピーさん

素のWordPressは対応してないけど、アップロードできる方法はあるぞ！

SVGとは

まずは、SVGに対応しているブラウザを明示しておきます。後述する特性によって対応するブラウザも増えてきています。

既に対応が打ち切られたIE以外の主要ブラウザは対応済みになっておりますので、新規に立ち上げるサイトであれば影響は少ないと考えられます。

EdgeはSVGファイルを適切にスケーリングしません。高さ、幅、viewBox、およびCSSルールを追加することが最善の回避策のようです。

引用元：SVG basic support

「SVG」のメリット

代表的な「SVG」のメリットを紹介していきます。

画質が劣化しない

「SVG」は、ベクター画像に類するため画質が劣化しません。

通常、画像ファイルを圧縮したり、サイズを拡大・縮小すると劣化することが多いのです。しかし、「SVG」は劣化しないのが特徴となります。

テキストデータを用いて画像表現の域が広がる

「SVG」は、テキストデータを用いて画像表現とすることができます。

「SVG」画像を作成（利用）する際には、プログラミングスキルが必要となりますが、テキストデータを用いて装飾などが施せば、デザインに幅を持たせることが可能です。

画像の切り抜きができる

「SVG」は画像の切り抜きができます。
グラデーション調や任意に画像を切り抜き、背景画像との組み合わせを作ることも可能です。

「SVG」のデメリット

「SVG」にも当然デメリットがあります。

ファイルサイズが大きくなりがち

「SVG」は複雑な計算式を元に描画するベクター画像となります。そのため、一般的な「JPEG」や「PNG」と比べるとファイルサイズが大きくなります。

ファイルサイズが大きくなるにつれ、画像表示速度は遅くなり、サイト全体の表示スピードにも影響が出てしまいます。

プログラミングスキルが必要

「SVG」はテキストデータを扱うプログラミングスキルが必要となります。

コードを間違えてしまうと、表示するブラウザごとにズレが生じてしまうので注意が必要です。

「SVG」ファイルを作るためのツール

「SVG」を作るのに便利なツールを紹介します。

Adobe Illustrator

Adobe Illustratorは、デザイン作成ツールとして一番有名なので耳にしたこともあるかと思います。

Adobe Illustratorでは、「SVG」を単体で作成できますし、方法などの情報も数多くウェブ上に転がっています。

Affinity Designer

Affinity Designerはここ最近注目されている、『Adobe』に成り代わろうとしている注目株なツールです。

Affinity Designerでも「SVG」ファイルを作成することが可能です。

WordPressがSVGをサポートしない理由

WordPressではデフォルトで「SVG」ファイルをアップロードすることはできません。アップロードしようとすると、エラーメッセージが表示されてしまいます。

WordPressが「SVG」をサポートしていない理由は、「セキュリティ対策へのリスクが上がるから」とされています。

プラグイン『SVG Support』を利用する

一番簡単な方法はプラグイン『SVG Support』を使用する方法です。

それでは早速『SVG Support』をインストールして有効化しましょう。

WordPressの管理画面から［プラグイン→新規追加］と進めていき、『SVG Support』を検索。

『SVG Support』が検索結果として表示されるので、「今すぐインストール」をクリック後、「有効化」をクリックしましょう。

インストール後に、特別な設定は必要ないのでSVGファイルをアップロードしていただくだけです。

function.phpに追記

プラグイン数を増やしたくない方は、こちらの方法がおすすめです。

function.phpにSVGファイルをアップロードを許可するように促す方法になります。

//SVGをアップロード
function add_file_types_to_uploads($file_types){

    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes );

    return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

上記コードを追記し、保存した後にはSVGファイルをアップロードしていただくだけです。

『SWELL』で設定する場合は、子テーマを用意の上で子テーマに用意されている「function.php」内に記述していただく方がテーマアップデートにも対応できます。

カピーさん

WordPressのバージョンアップによっては、今回の記述が無効になる可能性もあるので注意だぞ！

まとめ：SVGはWebサイトに積極的に利用されてきている

最後に『WordPressでSVGファイルをアップロードする方法』に関する結論を。