Wordpress
WordPressでSVGファイルをアップロードする方法【簡単】
2019年01月14日 8:00 2019年02月01日
おはようございます！社員Aです👩
最近はWEB制作でもSVGを多く見かけるようになりました。
SVGはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、ベクターデータを数値化し、html、cssなどと同じく「タグ」で扱うことができるようにしたデータです。どのデバイスからでもくっきり鮮明に見え、ファイルサイズも抑えられることからWEB業界でも浸透しています。
ただ、WordPressはSVGファイルのアップロードに対応していません。今回はこのSVGファイルをWordPressにアップロードする方法をいくつかご紹介したいと思います。
▼関連記事
もくじ
SVG対応ブラウザ
念の為、はじめにSVG対応ブラウザをおさらいしておきたいと思います。
RETINAディスプレイの普及などに伴い、モダンブラウザを含め広く対応しています。
- Internet Explorer 9 , 10 , 11 + および Edge
- Firefox 3 +
- Chrome 4 +
- Safari 3.2 以降
- Opera 10 +
- iOS Safari 3.2 以降
- pera Mini（すべて）
- Androidブラウザ 4.4 以降
なぜWordPressでSVGがサポートされていないのか
WordPressでSVGファイルをアップロードしようとすると、「このファイルタイプはセキュリティの観点から許可されていません。」とエラーメッセージが表示されてしまいます。
そもそも、なぜWordPressでSVGファイルのアップロードにサポートされていないのかというと、下記のような理由が主です。
- SVGは画像フォーマットではなく、文章フォーマットであるためJavaScriptを埋め込むことが可能
- SVGには複数の既知の脆弱性がある
- 悪質なJavaScriptの実行に使用される可能性がある
これらを理解した上で、SVGファイルをアップロードする環境を整えていきましょう。
方法1.プラグイン「Safe SVG」を使用する
一番手っ取り早いのは、SVGファイルをアップロード可能にしてくれるプラグイン「Safe SVG」を使用する方法です。
下記の手順で設定できます。
1.プラグインのインストール・有効化
プラグインの新規追加から「Safe SVG」を検索し、インストール・有効化します。
2.設定は必要なし！
プラグインを有効化するだけで、SVGがアップロードできるようになります。
有効化後の設定などは、特段必要ありません。
方法2.functions.phpに追記する
プラグインを無駄にインストールしたくないという方はこちらの方法がおすすめです。
function.phpにメディアライブラリーへのアップロードを許可するファイル形式を追記するやり方です。
1.function.phpに下記を追記する
//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');
2.SVGをアップロード
function.phpに追記すると、メディアでSVGファイルをアップロードできるようになります。
まとめ
SVGはどのデバイスからでもくっきり鮮明に見え、ファイルサイズが小さいことからWEB業界でもよく使われていますが、WordPressでは標準サポートされていませんでしたね。
これには、セキュリティの観点からしっかりとした理由があるということがわかりましたが、それを踏まえた上でアップロードできるようにする2つの方法をご紹介しました。
SVGをアップしたいけどできない！という方は是非試してみてください！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
