WordPress で SVG を使用するために

   

タイトルのまんま。WordpressでSVGを使用できるようにする方法です。

WordPressではデフォルトではSVGが使用できないようで、アップロードができません。
pngなどでRetinaを考えて複数の画像を用意するのは面倒だし、これからのことを考えるとSVGでしょ！
ということで実践しました。

以下のコードを　functions.php　に記述します。

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ファイルを使用する予定がないのでここの対応はスルー。

続いて、CSS.
以下のコードを記述します。

img[src*='.svg']{
    width: 100%;
    height: auto;
}

これをしないと「SVGが表示されない！」となるので忘れずに記述。
wordpressがSVGをサポートしていないために起こる現象のようです。

以上で無事に表示されるようになりました。(*ﾟ▽ﾟﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁ

ちなみに、wordpressがSVGをサポートしていないのは「悪質なJavaScriptの実行に使用される可能性があるから」だとか。
公式でサポートしていないということは、リスクも伴うということなので実践する際にはあくまでも自己責任でお願いいたしますm(_ _)m

参考にさせていただきました。ありがとうございますm(_ _)m

WordPressでSVGを扱いたい！ アップから表示まで完全対応する工程まとめ

Related Posts

 - wordpress