【WordPress】SVG画像を使うときに注意!知っておくべき2つのこと

東京のすみっこより愛をこめて。fummyです😊💡

Webサイトの顔ともいえる、タイトルロゴ。
別記事で、タイトルロゴにSVG画像をつかうメリットについて書きました。

タイトルロゴ, SVG, WordPress< ときめき

【WordPress】 ブログタイトルロゴにときめきを♡ SVG画像を使うべき4つの理由

2018年3月29日

こうみると、SVG画像が良いことづくしのように思えるので、なんでもかんでも使いたくなってしまいますが、一方で、WordPressでSVG画像を使用する際に、注意しなければならないことがあります。

結論としては、タイトルロゴのみに限った話であれば、WordPressでSVG画像を使用しても特に大きな問題はありません。

ですが、以下の注意点を知っておくと、今後SVG画像をつかうかどうか迷った際の判断基準になると思いますので、読みすすめて参考にしていただければと思います!

SPONSORED LINK

はじめに:SVG画像をつかうメリットとWordPressでの使用方法

SVG画像をつかう際の注意点についてのお話に入る前に、

「まずSVG画像を使用するメリットについて知りたい!」
「とりあえずWordPressでSVG画像を使用する方法を知りたい!」

という方は、以下の記事を参考にしていただければと思います。

それでは次項から、本題にうつりたいと思います!

SPONSORED LINK

SVG画像を使用する際の注意点

SVG画像を使用する際に注意しなければならないことは、大きく分けると2つあります。

注意点①:SVGに対応していないブラウザがまれにある。

SVGについては、かつてはIEやAndroidが対応していないとのことで問題になっていたようですが、現在はIE8以下が対応していないのがちょっと気になるくらいで、ほぼ問題ないと言えます。

SVGなど(HTML, CSS, JS, etc…)がどのブラウザで対応しているのか教えてくれる便利なサイト「caniuse.com」があります。

グリーンが「対応」、黄緑色が「条件付き対応」、赤が「非対応」を表していますが、これをみるとほぼ対応していますよね。

— 引用元:Can I use(2018.3.29時点)

上記は「HTMLでの画像挿入(<img>タグ)でSVGが表示できるか」をユーザーのブラウザの使用状況別に示してくれている表です。
小さくて見にくいと思いますが、棒グラフの頂上にブラウザの名前が書かれています。棒グラフの中の白抜きになっている数字は、ブラウザのバージョンです。

一番左端のIEのところに細〜く赤い部分がありますが、これはIE8以下が対応していないから。
でもIE8以下のユーザーが少ないため、全体的にほぼグリーン!スマホも含めてブラウザの98%以上が対応しています。

しかし一方で、気をつけないといけないのは、SVGのアニメーションです。

アニメーションをつける方法もいくつかあるのですが、当ブログ「フミラボ」のロゴは今回SMILという方法で行なっています。

— 引用元:Can I use(2018.3.29時点)

赤が結構あるー!ということに気づくと思います。

例えばIEの対応状況をみると、IEはパソコンもスマホも赤、ということは非対応。IEでは線は綺麗に表示されるけれど、アニメーションは動かないということです。
実際、フミラボのロゴをIEで見ましたが、豆電球は呼吸していませんでした。残念・・・!

注意点②:Facebook OGPやTwitter CardsはSVG画像に対応していない

わたしが、SVGをタイトルロゴのみに限定してオススメしている理由の一つが実はこれです。
サイト内の画像をなんでもかんでもSVGにしてしまうと、思わぬところで不都合が生じる可能性があります。

「Facebook OGP」や「Twitter Cards」とは、Facebookやツイッターで記事を紹介するときに表示されるサムネイル画像のことですが、元記事のアイキャッチ画像などにSVGが使われていると、これらが非表示(グレーの画像)になってしまうようです。

ツイッターやFacebookでブログ記事が紹介されたとき、タイトルも気になるところではありますが、一緒に表示されている画像が綺麗だったりかわいかったりしてついクリックしてしまうこともありますよね。それがただのグレーの画像になってしまうのはとても味気ない・・・!

それを回避する方法もあるのですが、本記事では「タイトルロゴに限ってのSVG画像の使用」をオススメしているので、それ以外の使用については詳しくは触れません。

以下の記事で、詳しく説明がされていますので、興味のある方はぜひやってみてください!

SPONSORED LINK

まとめ:注意点はあるものの・・・

SVG, WordPress

こうしてみてみると、注意点はありますが、

  • シンプルで、
  • アニメーションがなく、(もしくはIEでは動かなくてよいと割り切る)
  • 外部連携しなさそうな画像

であれば、SVG画像を使うのにデメリットはなさそう。
むしろSVGの恩恵を大いに受けられそうと言えると思います。

というわけで、タイトルロゴについては、SVGを安心して使用できそうと結論づけられと思います。
参考になりましたら、幸いです!

※WordPressでSVG画像を使用する件については、以下の記事も参考にしてみてください。

それでは、今日も素敵な一日を!

fummy

SPONSORED LINK
SPONSORED LINK