WordPressでSVGファイルを簡単にアップロードする方法

投稿日 : 2017.12.19 最終更新日時 : 2017.12.22 投稿者 : kinukawahiroyasu カテゴリー : WordPress, プラグイン, 画像

こんにちは。フローラです。
前回私の記事でSVGアニメーションについてご紹介しました。
参考記事：
SVGファイルを使って簡単にアニメーションを作ってみましょう
WordPressは初期状態ではSVGファイルをアップロードできません。
SVGファイルをアップロード、表示させるには、functions.phpにSVGファイルの記述を追加しなくてはなりませんが、プラグインで簡単に取り扱えるようになりますので、早速設定してみましょう。

プラグインをインストールする

プラグインをインストールする方法については下記記事をご参照ください。
参考記事：
WordPressで簡単に便利な機能を盛り込みたい！
では「Scalable Vector Graphics」を検索してインストール、有効化してください。

.htaccessにコードを追加する

.htaccessはサーバの設定によりますが、ドキュメントが置いてあるトップのディレクトリにあることが一般的です。
.htaccessに下記コードを追加して保存してください。

AddType image/svg+xml .svg
AddType image/svg+xml .svgz

メディアを追加する

早速「メディアを追加」してみると、SVGファイルが表示されましたね。

なお、float指定している要素にwidthが指定されてないと表示されませんのでご注意ください。
また、SVGファイルに書き出しをする際、画像の場所は「リンク」ではなく「埋め込み」にしてください。CSSプロパティは「スタイル属性にすると画像サイズが重くなります。「プレゼンテーション属性」で良いかと思います。