週刊SVG

SVGの最新ニュースや制作のコツなどの情報を毎週お知らせします

大統領選候補者におけるSVGの使い方を比較してみた

#column

今年11月に予定されているアメリカ大統領選挙を控え、二大政党である民主党・共和党ともに候補者による熾烈な指名争いが行われています。先日アイオワ州、ニューハンプシャー州の予備選挙も終了し、共和党では撤退する候補者も出て、徐々に候補が絞られてきました。

（いらすとやから「アメリカの大統領選挙のイラスト」）

アメリカでは昨年から選挙関連の話題は連日ニュースになり関心が高いわけですが、各陣営は少しでも支援者を増やそうとSNS、とくに Twitter, Facebook, Instagramなどを熱心に更新しています。

中でも公式サイトは自らの政治信条や政策、またイベントの告知などを伝えるのに重要な役割を果たします。そんな全米から、そして世界中から大きな注目を集める各候補者のサイトに今回は着目してみました。

というのも、このブログ「週刊SVG」らしくSVGをテーマに、公式サイトにSVGが利用されているか？またどういった使い方をしているのか？といった視点でそれぞれ比較していきます。


なぜなら、調べてみると候補者によって様々な使い方をしており、なかなか面白い結果になったんですよね。

民主党の候補者

民主党で予備選を争っている候補は現在2人です。

ヒラリー・クリントン氏とバーニー・サンダース氏、それぞれの公式サイトはこちら。

候補者ヒラリー・クリントンバーニー・サンダース
Webサイト
ロゴ

いずれの候補者もロゴにSVGを使っています。

しかし詳しく調べていくと、その使い方はとても対称的でした。

ヒラリー・クリントン

ロゴに関係した部分を抜き出すと、こうした構成になっています。

<!DOCTYPE html>
<html lang="en" class="no-js lang-en  auth-unknown" manifest="//a.hrc.onl/app.manifest">
<head>
  <script src="//a.hrc.onl/js/modernizr.min.js"></script>
  <script>
    (function(Modernizr, html){
      'use strict';
      html.className += ' ' + (Modernizr.mq('only all') ? '' : 'no-') + 'mq';

      if(!Modernizr.placeholder) {
        var
        script = document.createElement('script');
        script.src = '//a.hrc.onl/js/placeholders.min.js';
        html.appendChild(script);
        html.className = html.className.replace('no-placeholder', 'placeholder placeholder-polyfilled');
      }
    })(window.Modernizr, document.getElementsByTagName('html')[0]);
  </script>

<!-- 中略 -->

</head>
<body class="homepage" id="">

<!-- 中略 -->

  <div class="container-restricted-width js_main-container">
    <header class="site-top-bar" role="banner">
      <div class="container-restricted-width">
        <nav class="site-nav">
          <ul class="nav-list">
            <li class="nav-item nav-item-brand">

              <!-- ロゴ部分 -->
              <a href="/" title="Hillary for America" class="site-brand site-brand-widescreen">Hillary for America</a>

Modernizrを利用しているので、SVGに対応しているブラウザでアクセスした場合は、

<!DOCTYPE html>
<html lang="en" class="lang-en  js flexbox no-touch geolocation history backgroundsize cssanimations csstransforms3d localstorage sessionstorage svg inlinesvg boxsizing object-fit cssfilters placeholder mq auth-logged-out loaded fb-unknown" manifest="//a.hrc.onl/app.manifest">

html要素のclass属性にsvgが付きます。

さらに言えば、SVG以外にも対応している機能に応じてclass属性が付く仕組みになっています（上記例はChrome48で検証）。

もしもこれがSVGに未対応な環境であれば

<!DOCTYPE html>
<html lang="en" class="lang-en no-svg （略）" manifest="//a.hrc.onl/app.manifest">

とno-svgになります。


またJavaScript無効であれば

<!DOCTYPE html>
<html lang="en" class="no-js lang-en  auth-unknown" manifest="//a.hrc.onl/app.manifest">

とno-jsになります。

そのため、CSSでこのように指定することで

.site-brand {
  display: inline-block;
  width: 72px;
  height: 62px;
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
  background-image: url("../img/mark-h.png");
  background-repeat: no-repeat;
  border-left: 10px solid transparent;
  color: transparent;
}
.svg .site-brand {
  background-image: url("../img/mark-h.svg");
  background-size: 72px 62px;
}

SVG未対応の環境、またはJavaScript無効の環境では代替のPNG画像が表示されるよう設定されています。古い環境であっても、適切にロゴが表示できるようきちんと配慮されており、SVGの利用の仕方としてはお手本のような手堅い構成です。

選挙活動をする上で最新の技術を使うよりも、幅広い環境で適切に利用できるよう堅実に整備するのは当然のことかもしれません。

しかし対立候補であるサンダース氏のWebサイトでのSVG使用方法は意外なものでした。

バーニー・サンダース

サンダース氏のWebサイトでもロゴにSVGを使っています。

関連する部分を抜き出すとこのようになります。

<header role="banner" class="clearfix custom">
  <a class="logo sanders-logo" href="https://berniesanders.com/" title="Home">
    <h1>Bernie Sanders </h1>
      <svg viewBox="0 0 480 200">
        <use xlink:href="https://berniesanders.com/wp-content/themes/berniesanders2016/images/icns/sanders-logo.svg#logo">
        </use>
      </svg>
  </a>

use要素を使っていますね。

しかし、このブログでも何度か書いたように、この手法では問題があります。

主だったところではIE9～IE11及びMS Edge 12以下ではuse要素で外部ファイルを参照できないため、このままではロゴが表示されません。

参考記事

そのためFallbackなり、Polyfillなり、何らかの対応策を取る必要があるのですが、サンダース氏のWebサイトでは全く何も対策をしていないため、IE9～IE11及びMS Edge 12以下で閲覧した場合にはロゴが表示されません。

IE11によるスクリーンショットChrome48
IE11によるスクリーンショットChrome48によるスクリーンショット

（※ちなみに背景写真も表示されません）

SVG未対応・JavaScript無効でも表示されるようきちんと制作されたクリントン氏のWebサイトに対し、IE9-11及びMS Edge12以下ではロゴが全く見れないサンダース氏のWebサイトはダメな見本のような構成でとても対照的です。

正直、候補者のWebサイトなのにIEでの検証もしてないのか？と呆れるよりも驚いていますし、制作会社はどういうつもりなのだろう？とか、支援者でこの問題を指摘する人はいないのだろうか？など様々な疑問は湧くのですが、ではこうした状態に対してどのような改善ができるのか、というのを実例を挙げて解説していきます。

適切に対策してきちんとSVGを活用しているWebサイトは既にいくつもあるので。

use要素の使い方 その1 HTMLファイル内に記述する

手軽な方法は、HTMLファイルに記述する方法です。

具体的な利用例としては LiveJournal や、米国ノースカロライナ州の デューク大学 のサイトでのuse要素の使い方が参考になるでしょう。

（LiveJournal）
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="flaticon--menu" viewBox="0 0 30 28.8">
    <path d="M3.6,0C1.612, （略）"></path>
  </symbol>
  <!-- 中略 -->
<svg>

<!-- 中略 -->

<svg xml:base="http://www.livejournal.com/" xmlns="http://www.w3.org/2000/svg" class="svgicon flaticon flaticon--menu" style="pointer-events: none; visibility: hidden;">
  <use xlink:href="#flaticon--menu"></use>
</svg>

非表示にしたインラインSVGにsymbol要素を配置することで、外部ファイルへのアクセスをすることなくuse要素で利用できます。

ただしその反面、HTMLファイルが肥大化してしまいますし、そして外部ファイルと異なりキャッシュが効かない……といった問題点があります。

use要素の使い方 その2 JavaScriptで読み込む

例えば Japan America Society of Colorado（コロラド日米協会） のWebサイトではサンダース氏のサイトと同様に、use要素で外部SVGファイルを指定しています。

（Japan America Society of Colorado）
<a href="https://twitter.com/JapanColorado" target="_blank" class="sqs-svg-icon--wrapper twitter" style="">
  <div>
    <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
      <use class="sqs-use--background" xlink:href="/universal/svg/social-accounts.svg#background"></use>
      <use class="sqs-use--icon" xlink:href="/universal/svg/social-accounts.svg#twitter-icon"></use>
      <use class="sqs-use--mask" xlink:href="/universal/svg/social-accounts.svg#twitter-mask"></use>
    </svg>
  </div>
</a>

このままでは同じようにIE9-11, MS Edge12以下では表示されませんが、JavaScriptで対象のファイルを読み込み

<a href="https://twitter.com/JapanColorado" target="_blank" class="sqs-svg-icon--wrapper twitter" style="">
  <div>
    <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
      <g class="sqs-use--background">
        <g class="svg-background">
          <circle cx="32" cy="32" r="31" />
        </g>
      </g>
      <g class="sqs-use--icon">
        <g class="svg-icon">
          <path d="M 48 22.1 c -1.2 0.5 -2.4 0.9 -3.8 1 c 1.4 -0.8 2.4 -2.1 2.9 -3.6 c -1.3 0.8 -2.7 1.3 -4.2 1.6 C 41.7 19.8 40 19 38.2 19 c -3.6 0 -6.6 2.9 -6.6 6.6 c 0 0.5 0.1 1 0.2 1.5 c -5.5 -0.3 -10.3 -2.9 -13.5 -6.9 c -0.6 1 -0.9 2.1 -0.9 3.3 c 0 2.3 1.2 4.3 2.9 5.5 c -1.1 0 -2.1 -0.3 -3 -0.8 c 0 0 0 0.1 0 0.1 c 0 3.2 2.3 5.8 5.3 6.4 c -0.6 0.1 -1.1 0.2 -1.7 0.2 c -0.4 0 -0.8 0 -1.2 -0.1 c 0.8 2.6 3.3 4.5 6.1 4.6 c -2.2 1.8 -5.1 2.8 -8.2 2.8 c -0.5 0 -1.1 0 -1.6 -0.1 c 2.9 1.9 6.4 2.9 10.1 2.9 c 12.1 0 18.7 -10 18.7 -18.7 c 0 -0.3 0 -0.6 0 -0.8 C 46 24.5 47.1 23.4 48 22.1 Z" />
        </g>
      </g>
      <g class="sqs-use--mask">
        <g class="svg-mask">
          <path d="M 0 0 v 64 h 64 V 0 H 0 Z M 44.7 25.5 c 0 0.3 0 0.6 0 0.8 C 44.7 35 38.1 45 26.1 45 c -3.7 0 -7.2 -1.1 -10.1 -2.9 c 0.5 0.1 1 0.1 1.6 0.1 c 3.1 0 5.9 -1 8.2 -2.8 c -2.9 -0.1 -5.3 -2 -6.1 -4.6 c 0.4 0.1 0.8 0.1 1.2 0.1 c 0.6 0 1.2 -0.1 1.7 -0.2 c -3 -0.6 -5.3 -3.3 -5.3 -6.4 c 0 0 0 -0.1 0 -0.1 c 0.9 0.5 1.9 0.8 3 0.8 c -1.8 -1.2 -2.9 -3.2 -2.9 -5.5 c 0 -1.2 0.3 -2.3 0.9 -3.3 c 3.2 4 8.1 6.6 13.5 6.9 c -0.1 -0.5 -0.2 -1 -0.2 -1.5 c 0 -3.6 2.9 -6.6 6.6 -6.6 c 1.9 0 3.6 0.8 4.8 2.1 c 1.5 -0.3 2.9 -0.8 4.2 -1.6 c -0.5 1.5 -1.5 2.8 -2.9 3.6 c 1.3 -0.2 2.6 -0.5 3.8 -1 C 47.1 23.4 46 24.5 44.7 25.5 Z" />
        </g>
      </g>
    </svg>
  </div>
</a>

このように適切に変換されます。

こうしたテクニックは以前から知られていますし（参考記事：Ajaxing for your SVG Sprite | CSS-Tricks）、同様の手法は オーストリアの大手スーパーマーケット「BILLA」 のWebサイトでも使われています。

またPolyfillもあります。

実際に利用する際にはこうしたライブラリを活用した方が便利ですね。

他の対応策

それ以外の対応策としては、クリントン氏のサイトのようにbackground-imageで使う、またimg要素で使う、というのもありでしょう。

Polyfillも使わず、なぜサンダース氏のWebサイトはあんなSVGの利用の仕方をしているのか？不具合があるなら別にSVGにこだわらずにPNG画像に差し替えたって良いわけですから、誰も現状に問題を感じないのだろうか？という点が理解に苦しみますね……。

共和党の候補者

現時点で予備選に残っている候補者は6人です。

候補者名（名前順）SVG利用の有無
ジェブ・ブッシュ○
ジョン・ケーシック×
テッド・クルーズ○
ドナルド・トランプ×
ベン・カーソン○
マルコ・ルビオ○

6人中、4人のWebサイトでSVGの利用を確認しました。とは言え、ちょっとしたアイコン程度での使用もあります。

ジェブ・ブッシュ

Newsのページで「LOAD MORE POSTS」のローディング画像にSVGを使っています。

SMILアニメーションで回転させているだけなので、IE, MS Edgeでは動きません……。

テッド・クルーズ

クルーズ氏のWebサイトはアイコンにもSVGが使われていますが、特筆すべきは地図にSVGを用いている点ですね。

ベン・カーソン

カーソン氏はロゴのSVGをimg要素で表示させています。

 

だからと言って、ヤンキースのWebサイトのようにFallbackが用意されているわけでもなく、SVG未対応ブラウザでアクセスした場合はロゴは表示されません。

マルコ・ルビオ

Photosのページのアイコンでdata URI schemeのSVGが使われています。ただ、これは何らかのライブラリのものかもしれませんね。

まとめ

以上、民主党・共和党の各候補者のWebサイトでのSVG使用状況の調査でした。

なぜ今回このような調査を行ったか？というと、SVGの現在の利用状況を理解して欲しかった、というのが大きいですね。このブログ「週刊SVG」を運営していると、感想として

「SVGってまだあったのか」

とか、

「未対応のブラウザがまだあるのに、使えるの？」

といった意見を目にすることが多々あります。

2001年にSVG1.0のW3C勧告以来、長らくブラウザでの標準対応が進んでいなかったこともあって、SVGは未だに知名度が低いのは事実ではあるものの2016年の現在、人々の大きな関心を集める大統領選候補者サイトの多くで利用されているわけです。

さらに言えばFallbackも、Polyfillもせずにいる（個人的にはそれはどうかと思いますが）、というのも現状だったりします。

サンダース氏のWebサイトもそれだけIEや古いブラウザのシェアが米国では低く、モダンブラウザが普及しているため……であるとも言えるのかもしれませんね。

またSVGを制作現場で利用しようとした際、実際の問題としてクライアントや同僚・上司からの理解が得られない状況はままあると思います、そうした時に各候補者のWebサイトで利用されている現状を示せば説得しやすい……だろう、というのもこの記事を書いた理由でもあります。

関連記事

SVGを使用してる企業・団体のサイトを22ヶ国、160件以上調べてみた

2015年5月に書いた記事で、企業・団体によるSVG利用状況を調査しました。この記事も、同様の理由で実際の活用事例を提示すれば制作の場で意見を通しやすくなるかな、と考えて執筆した次第です。

おまけ・補足・蛇足

候補者以外のWebサイトでのSVG利用状況です。

バラク・オバマ現大統領

現職のオバマ大統領のWebサイトでもロゴにSVGが使われています。

 
.nav-main .nav .brand a {
  background-image: url('../../images/logos/ofa/color/ofa_risingsun_color.png');
  background-image: url('../../images/logos/ofa/color/ofa_risingsun_color.svg'), none;
  /* 略 */
}

FallbackはシンプルなCSSで、背景画像の複数指定に対応していない古いブラウザがほぼSVG未対応ブラウザと重複することを利用した手法ですね。

予備選から撤退を表明した候補者

既に予備選から撤退を表明した候補者でSVGを利用しているWebサイトです。

民主党
共和党