2016年6月23日

SVGを使用して鮮明なロゴへ変身

フロントエンドエンジニア　郡司

Retinaディスプレイの登場をきっかけに高解像度ディスプレイのスマートデバイスが多く登場し、その波はすでにPCにも到来しています。高解像度ディスプレイは通常の解像度より画素の密度が高く、より鮮明な表現が可能となっているのが魅力です。では、目的のWebサイトを閲覧している際に、企業ロゴ、製品ロゴ（以下、ロゴと表記）は鮮明でしょうか。それとも、ぼやけていますでしょうか。

ロゴはとても重要な存在です。企業を象徴するロゴはコーポレートアイデンティティ（CI）を構成する要素に含まれるビジュアルアイデンティティ（VI）に該当します。ビジュアルアイデンティティ（VI）は、企業が目指す「理念」「ビジョン」「経営戦略」などに基づいた行動指針を社内外問わず共有するためにデザインとして策定し、企業のイメージを図案化したものです。Webサイトが幾度更新されようとロゴは常に最初に目に留まる位置にいます。つまり、ロゴはWebサイトの顔となる部分と言えます。

私事ですが、私用のPCが高解像度ディスプレイのため、ロゴがぼやけているWebサイトに多く遭遇します。スマーフォンサイトではロゴ画像を2倍サイズで書き出してCSSで本来のサイズを指定して対応しているサイトが多いですが、PCサイズになるとぼやけてしまいます。そういったロゴを見ると多少残念な気持ちになります。

そこで、ロゴが配置されているヘッダー部分などは共通のファイルとして管理していることが多いので、日々の運用の中で改善できる一つの方法として、SVGを使用して鮮明なロゴに変更する方法をご紹介します。

SVG（Scalable Vector Graphics）とは何か

一般的にWebサイト上で使用されるGIF、JPEG、PNG画像は、ピクセルによって画像を描画するビットマップデータであり、1つの解像度にしか対応できません。また、高画質にするほどファイルは重くなります。

しかし、今回取り上げるSVGは、XMLで記述されたテキストデータで構成されたベクター画像のため、解像度に依存しません。そのため高解像度ディスプレイでも最適に表示されます。また、ユーザー側でブラウザを拡大表示、ピンチイン／アウトを行ってもデバイスフォントと同様になめらかに表現されます。

Can I useによるSVGのサポート状況は以下のとおりになります。

Internet Explorer 9以上
Firefox 3.0以上
Chrome 4.0以上
iOS Safari 3.2以上
Androidブラウザ 3.0以上

実装例

実装方法として次に紹介する4つの方法がありますが、静的なロゴを変更するだけでしたら「img要素にSVGファイルを使用」か「CSSによる背景画像の指定」で十分対応できます。他の2つの方法では実装する上での問題点とその解決方法を記載していますが、上記2つの方法で十分に対応できますので解決方法の詳細な仕様についてはリンクを貼るまでに留めさせていただきます。

img要素にSVGファイルを使用

ヘッダー部分を共通ファイルとして管理している場合は画像の差し替えと同じなので一番簡単に修正を行えます。

HTML：

<a href="/index.html">
<img src="logo.svg" alt="logo">
</a>

CSSによる背景画像の指定

紙媒体などではロゴのガイドラインに沿ってロゴの形状が変わります。それと同様にスクリーンサイズによってロゴの形状を変える考え方（Responsive Logos）もあり、こちらの方法ですとメディアクエリーによって柔軟にロゴの形状を変更することができます。

HTML：

<a href="/index.html" class="logo">ロゴ</a>

CSS：

.logo {
    display: block;
    position: relative;
    width: 200px; /* ロゴのサイズを指定 */
    height: 50px; /* ロゴのサイズを指定 */
    overflow: hidden;
}

.logo::before {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   content: "";
   width: 200px; /* ロゴのサイズを指定 */
   height: 50px; /* ロゴのサイズを指定 */
   background: #ffffff url(logo.svg) no-repeat center;
}

@media screen and (max-width:767px) {
   .logo {
      width: 100px; /* ロゴのサイズを指定 */
      height: 25px; /* ロゴのサイズを指定 */
   }

   .logo::before {
      width: 100px; /* ロゴのサイズを指定 */
      height: 25px; /* ロゴのサイズを指定 */
      background-image: url(logo-02.svg);
   }
}

object要素

SVGに対応していない環境に対してフォールバックを用意することができる利点がありますが、そのまま利用すると以下の問題が発生します。

スクリーンリーダーで代替テキストが読まれない。
object要素で埋め込んだSVGにa要素でリンクを設定すると、リンクがマウスカーソルでクリッカブルにならない。ロゴ部分をリンクにしているWebサイトにおいて、これは致命的な問題になります。
IE9はポインターがカーソルにならない。

WAI-ARIAが対応しているスクリーンリーダーでは次を指定することで代替テキストの読み上げが行われます。

role="img" を指定して、これが画像としての役割を持たせます。
aria-label プロパティに代替テキストに当たる内容を指定します。

HTML：

<a href="/index.html">
<object type="image/svg+xml" data="logo.svg" aria-label="logo" role="img">
<img src="logo.png" alt="logo">
</object>
</a>

リンクをクリッカブルにする方法は以下をCSSでスタイルづけすることで可能になります。

object要素はインライン要素の中で使われた場合はインライン要素として扱われるため、親の要素をCSSでブロック要素に変更して高さを確保します。
pointer-events: noneでobject要素のクリックイベントを無効にし、親要素であるa要素にイベントを渡します。
IE9でカーソルをポインターに変更するには疑似要素を使用してクリッカブル領域のカーソルを変更させます。

CSS:

object {
  pointer-events: none;
}

a {
  display: inline-block;
  position: relative;
}

a::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 100%;
  width: 100%;
  background-color: transparent;
  cursor: pointer;
}

SVG要素

HTML のように、SVG はドキュメントモデル（DOM）およびイベントを持ち、JavaScript からそれらへのアクセスが可能です。これにより、リッチアニメーションやインタラクティブな画像の制作が可能です。また、地図やグラフなど複雑な図版ではこちらの方法だとテキストデータとしてHTMLに直接記述するので、画像よりアクセシブルな状態を提供できます。しかし、object要素と同様にスクリーンリーダーで読まれないため、WAI-ARIAが対応しているスクリーンリーダーでは次を指定することで代替テキストの読み上げが行われます。

role="img" を指定して、これが画像としての役割を持たせます。
代替テキストに当たる内容の要素にID属性を付与し、aria-labelledbyプロパティにそのID属性値を関連付けます。

HTML:

<a href="/index.html">
<svg role="img" aria-labelledby="logo">
<title id="logo">logo</title>
<path d="～～"/>
</svg>
</a>

SVGを使用してるサイト例

実際にSVGがどのくらい普及しているのか最新版!｢新･企業力ランキング｣トップ300社に記載されている企業のコーポレートサイトを調べてみました。

結果はなんと・・・8件のみでした。（2016年6月23日における個人調査の元）

SVGのサポート状況から分かるとおりIE9からの対応となっていますので、当社のコラムでも紹介されているとおり今年からバージョン8以下のIEが完全にサポートの対象外になった状況を見ると、まだまだ浸透はしていないのも頷けます。

しかし、静的な画像でしたら十分に使用できる環境になっていますので、私としても今後は攻めの運用をしていく気持ちでSVGを使用していきたいです。

以下は、該当した上記8件になります。（五十音順）

2016年の記事一覧に戻る