最近SVGフォーマットでアイコンなどを配置しているサイトをよく見かけます。
WordPressは標準でSVGファイルには対応していません。
もちろん、SVGファイルを読み込んだり表示したりすることには対応していますが、これはブラウザの機能であってWordpressの機能ではないとおもいます。
WordPress上ではSVGファイルを他の画像フォーマットと同じように扱えないという意味です。
この記事では、WordpressでSVGファイルを扱う方法と、PNGからSVGにカラー変換できるオンラインサイトを紹介しています。
WordPressのSVG対応はプラグイン使わないと大変
WordPressで他の画像フォーマットと同じように一通りSVGを使えるようにするためには、想像している以上のカスタマイズが必要です。
これだけ大掛かりなカスタマイズをしてしまうと、メンテナンスしていくことを考えても自前でやるのは得策ではないです。
同じことをしてくれるプラグインがありますので、そちらを素直に利用しましょう。
SVG Supportプラグインが便利
WordPressでSVGファイルを取り扱うのは、自前でカスタマイズするのは結構ハードルが高いです。
しかし、SVGのプラグインを導入することで使用することができます。
おすすめのプラグインは、SVG Supportです。
このプラグインを使うと、メディアにSVGファイルがアップロードできるようになります。
SVGファイルはPNGファイルから簡単に変換できる
SVGファイルを使えるようになったとしても、SVGファイルが用意できないと話になりません。
SVGファイルを作るのはそれなりの環境が必要なので、PNGから変換できるサイトが便利です。
PNGからSVGに変換できるサイトはいくつもありますが、カラーに対応しているSVGファイルを出力してくれて、無料で使えるサイトはあまりないと思います。
カラーのSVG変換ができる無料オンライン変換サービスはonlineconvertfree.comです。
一度に2ファイルずつしか変換できませんが、アップロードは一度に行えるのでほとんど制限らしい制限ではありません。
とても便利です。
SVGファイルは画像ファイルから変換しても意味がない
PNGファイルからSVGファイルに変換したとしても、縮小したときに綺麗になる（ぼやけない）わけではありません。
これは当たり前と言えば当たり前です。画像ファイルからベクターデータ変換しても、元の画像のベクターデータなので本家そのままだからです。
ですので、PNGファイルをSVGファイルに変換しても、ファイルサイズが小さくなるぐらいの意味しかありません。
まとめ
WordPressでSVGファイルを取り扱うには、SVG Supportというプラグインが便利で、PNGからSVGに変換できるオンラインサイトは、onlineconvertfree.comが便利ですよね。というお話でした。
