このページは Cloud Translation API によって翻訳されました。

レスポンシブサイトでベクターグラフィックをスプラッシュする

Alex Danilo

魅力的なモバイルコンテンツを作成するには、ダウンロードするデータ量と最大限の視覚効果のバランスを取る必要があります。ベクターグラフィックは、最小限の帯域幅で優れたビジュアルエフェクトを実現するのに適しています。

多くの人は、キャンバスはベクターとラスターが混在する画像をウェブ上に描画する唯一の方法だと考えていますが、いくつかの利点がある代替手段もあります。ベクター描画を行うには、HTML5 の重要な要素である Scalable Vector Graphics（SVG）を使用するのがおすすめです。

レスポンシブデザインは、さまざまな画面サイズに対応するうえで重要な要素です。SVG は、さまざまなサイズの画面を簡単に処理するのに最適です。

SVG はベクターベースの線画を表示するのに適しており、ビットマップの補完として優れています。ビットマップは連続トーン画像に適しています。

SVG の最も便利な点の一つは、解像度に依存しないことです。つまり、デバイスのピクセル数を気にする必要はありません。結果は常にブラウザによってスケーリングされ、見栄えが良く最適化されます。

Google ドライブの描画アプリケーション、Inkscape、Illustrator、Corel Draw などの一般的な作成ツールは SVG を生成するため、コンテンツを生成するための方法は数多くあります。ここでは、SVG アセットの使用方法と、最適化に関するヒントについて説明します。

スケーリングの基本

簡単なシナリオから始めましょう。ウェブページの背景にフルページのグラフィックを表示したいとします。会社のロゴや、そのようなものを常に全画面でバックグラウンドに表示すると便利ですが、さまざまな画面サイズに対応してうまく表示するのは非常に困難です。説明のため、まずは HTML5 ロゴを例に挙げましょう。

以下に示す HTML5 ロゴは、SVG ファイルから作成されています。

ロゴをクリックして最新のブラウザで確認してみてください。あらゆるサイズのウィンドウに適切に拡大縮小されます。任意のブラウザで開き、ウィンドウのサイズを変更して、どの拡大率でも画像が鮮明であることを確認します。ビットマップ画像でこれを試すには、発生する可能性のある画面ごとに多数の異なるサイズを提供するか、ひどくピクセル化されたスケーリングされた画像を用意せざるを得なくなります。

では、重要なポイントは何でしょうか。ご存じないかもしれませんが、この形式は、表示に使用するデバイスとは独立してスケーリングされる唯一の形式です。つまり、ユーザーの画面サイズやウィンドウサイズを把握することなく、1 つのアセットをユーザーに提供すればよいのです。

さらに、HTML5 ロゴのサイズはわずか 1,427 バイトです。読み込み時にモバイルデータプランの使用量がほとんど増えないため、読み込みが速く、ユーザーにとっても低コストで高速です。

SVG ファイルのもう 1 つの利点は、GZIP 圧縮してさらにサイズを小さくできることです。このように SVG を圧縮する場合は、ファイル拡張子を .svgz に変更する必要があります。HTML5 ロゴの場合、圧縮するとわずか 663 バイトになります。ほとんどの最新ブラウザで簡単に処理できます。

注: 一部のブラウザでは GZIP ファイルの読み込みは問題ありませんが、<img> タグを介した読み込みは失敗します。HTTP では GZIP 圧縮を使用できるため、GZIP 圧縮を利用するには、ウェブサーバーを適切にセットアップすることをおすすめします。

最新のデバイスでサンプルファイルを使用すると、圧縮されたベクトルデータを使用すると 60 倍のメリットが得られます。また、これらの比較は PNG ではなく JPEG と SVG 間で行われています。ただし、JPEG は非可逆形式であるため、SVG や PNG よりも画質が低下します。PNG を使用すると、80 倍以上のメリットが得られます。

ただし、PNG と JPEG は同じではありません。最適化に関する多くのヒントでは、PNG ではなく JPEG を使用するよう推奨されていますが、必ずしもそれが最善とは限りません。以下の画像をご覧ください。左側の画像は、HTML5 ロゴの右上部分を 6 倍に拡大した PNG 画像です。右側の画像は同じ画像ですが、JPEG でエンコードされています。

JPEG でファイルサイズを小さくすると、シャープなエッジに色のアーティファクトが発生し、眼鏡が必要だと錯覚するほどです。JPEG は写真用に最適化されているため、ベクターアートには適していません。いずれにしても、SVG バージョンの品質は PNG と同じであるため、ファイルサイズと鮮明さの両方で優れています。

ベクター背景の作成

ベクターファイルをページの背景として使用する方法を見てみましょう。簡単な方法の 1 つは、CSS の固定位置指定を使用して背景ファイルを宣言することです。

<style>
#bg {
  position:fixed; 
  top:0; 
  left:0; 
  width:100%;
  z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>

ディスプレイのサイズに関係なく、画像は適切なサイズで表示され、エッジはシャープで鮮明です。

もちろん、背景の上にコンテンツを配置します。

ご覧のとおり、テキストを読み取ることができないため、結果は理想的ではありません。では、どうすればよいでしょうか。

背景を調整して見栄えを良くする

当然、背景画像の色をすべて明るくする必要があります。これは、CSS の opacity プロパティを使用するか、SVG ファイル自体で opacity を使用すると簡単に実現できます。これを実現するには、CSS コンテンツに次のコードを追加するだけです。

#bg {
  opacity: 0.2;
}

次のような結果が得られます。

このソリューションは簡単ですが、モバイルデバイスではパフォーマンスの問題になる可能性があります。既存のほとんどのモバイルブラウザでは、不透明なオブジェクトと比較して、opacity プロパティを使用すると描画に非常に時間がかかります。

優れたソリューション

元の SVG コンテンツの色を変更する方が、CSS で透明度を設定するよりもはるかに優れています。次の HTML5 ロゴは、使用する色を変更し、その過程で不透明度プロパティを完全に回避することにより、薄い色に見えるように変更しています。そのため、下の背景画像は不透明度を変更した場合の結果とまったく同じに見えますが、実際には塗りつぶしがはるかに速く、CPU 時間を節約し、貴重なバッテリーを節約できます。

基本的な部分を理解できたところで、他の機能に進みましょう。

グラデーションを効率的に使用する

ボタンを作成するとします。まず、角が丸い長方形を作成します。次に、ボタンに質感を出すために、きれいなリニアグラデーションを追加します。コードは次のようになります。

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blueshiny">
      <stop stop-color="#a0caf6" offset="0"/>
      <stop stop-color="#1579df" offset="0.5" />
      <stop stop-color="#1675d6" offset="0.5"/>
      <stop stop-color="#115ca9" offset="1"/>
    </linearGradient>
  </defs>
  <g id="button" onclick="alert('ouch!');">
    <rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
    <text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
  </g>
</svg>

作成されたボタンは次のようになります。

追加したグラデーションが左から右に向かっていることに注目してください。これは SVG のデフォルトのグラデーションの方向です。しかし、美観とパフォーマンスの観点から、さらに改善の余地があります。グラデーションの方向を変更して、見栄えを良くしてみましょう。リニアグラデーションの x1、y1、x2、y2 属性を設定すると、塗りつぶし色の方向を制御できます。

「y2」属性のみを設定すると、グラデーションを斜めに変更できます。次のような小さなコード変更を行います。

<linearGradient id="blueshiny" y2="1">

ボタンの外観が変わり、下の画像のようになります。

この小さなコードの変更で、グラデーションを上から下に行くように簡単に変更することもできます。

<linearGradient id="blueshiny" x2="0" y2="1">

最終的には下の画像のようになります。

では、グラデーションの角度について、なぜこれほど多くの議論が交わされているのでしょうか？

結果として、最後の例（グラデーションが上から下に走っているもの）が、ほとんどのデバイスで最も速く描画されます。ブラウザコードを記述するグラフィックギークの間ではあまり知られていませんが、垂直（上から下）のグラデーションは、単色とほぼ同じ速さでペイントされます。（理由は、オブジェクトのペイントはページの下方向に水平線で行われるためです。描画コードの内部では、各行で色が変化しないことを理解し、最適化します）。

そのため、ページのデザインでグラデーションを使用する場合は、垂直方向のグラデーションの方が高速で、副次的な効果としてバッテリーの消費も少なくなります。このスピードアップは CSS グラデーションにも適用されるため、SVG だけの問題ではありません。

新しいグラデーションの知識を駆使して冒険心をくすぐりたい場合は、次のコードを追加して HTML5 ロゴの背後にクールなグラデーションを追加できます。

<defs>
<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0" />
    <stop stop-color="#CCCCFF" offset="0.2" />
    <stop stop-color="#CCFFCC" offset="0.4" />
    <stop stop-color="#FFFFCC" offset="0.6" />
    <stop stop-color="#FFEDCC" offset="0.8" />
    <stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>

上記のコードでは、HTML5 ロゴの背景に、垂直方向にフェードした線形グラデーションを追加して、単色の背景と同じように滑らかなマルチカラーの色合いを加えています。

デスクトップブラウザでコンテンツを読み込み、極端なアスペクト比にサイズを変更すると、上部 / 下部または左側 / 右側に白いバーが表示されます。上記のコード変更を行った後の背景は次のようになります。

簡単にアニメーション化する

ここまで読んで、ページの背景として SVG グラデーションを使用することに疑問を感じた方もいるかもしれません。確かに、CSS グラデーションを使用すると便利ですが、SVG の利点の一つは、グラデーション自体が DOM に存在することです。つまり、スクリプトで変更できるだけでなく、SVG の組み込みアニメーション機能を利用して、コンテンツに微妙な変化を加えることもできます。

たとえば、線形グラデーションの定義を次のコードに変更して、カラフルな HTML5 ロゴを変更します。

<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0">
    <animate attributeName="stop-color"
        values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCCCFF" offset="0.2">
    <animate attributeName="stop-color"
        values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCFFCC" offset="0.4">
    <animate attributeName="stop-color"
        values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFFFCC" offset="0.6">
    <animate attributeName="stop-color"
        values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFEDCC" offset="0.8">
    <animate attributeName="stop-color"
        values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFCCCC" offset="1">
    <animate attributeName="stop-color"
        values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
</linearGradient>

上記の変更による影響については、以下の画像をご覧ください。

このコードは、定義したさまざまなカラーストップをすべて通過して、線形グラデーションの色を変更します。実行には 20 秒かかります。この効果により、グラデーションが止まらない連続的な動きでページを上に移動していくように見えます。

スクリプトは不要です。そのため、このページから参照される画像として実行されますが、スクリプトが必要なくなるため、モバイル CPU のワークロードも軽減されます。

また、ブラウザ自体がペイントに関する知識を活用して、派手なアニメーションの実行に使用する CPU オーバーヘッドを最小限に抑えることができます。

1 つ注意点があります。一部のブラウザでは、このスタイルのアニメーションがまったく処理されません。その場合、背景はきれいな色になりますが、変化しません。これはスクリプト（および requestAnimationFrame）を使用して回避できますが、この記事では説明しません。

もう一つ注目すべき点は、この非圧縮 SVG ファイルはたった 2,922 バイトで、これほど豊かなグラフィック効果を出すには信じられないほど小さく、ユーザーとデータプランをプロセスに満足させることができるということです。

ここからどこへ？

SVG が理想的とは言えないことが多く、写真や動画は他の形式でより適切に表現されます。テキストも同様で、ネイティブの HTML と CSS の方が一般的に適しています。ただし、線画アートワークのツールとしては理想的な選択肢です。

SVG グラフィックの基本的な用途についていくつか説明しました。ダウンロード量を最小限に抑えながら、フルスクリーンの鮮やかなグラフィックを提供する小さなコンテンツを簡単に生成できることを説明しました。コンテンツを少しだけ強化すると、わずかなマークアップで驚くほど優れたグラフィック結果を簡単に作成できます。次のセクションでは、SVG に組み込まれたアニメーションをよりシンプルで強力な効果に使用できる方法について詳しく説明します。また、キャンバスと SVG の使用を比較して、モバイルグラフィックサイトの作成に適したツールを選択します。

その他の参考情報

Inkscape: SVG をファイル形式として使用するオープンソースの描画アプリケーション。
Open Clip Art: 数千の SVG 画像を含む巨大なオープンソースのクリップアートライブラリ。
仕様やリソースへのリンクを含む W3C SVG ページ。
Raphaël: SVG コンテンツを描画してアニメーション化するための便利な API を提供する JavaScript ライブラリです。古いブラウザにも対応しています。
スリッパリーロック大学の SVG リソース - 優れた SVG 入門へのリンクが含まれています。

レスポンシブ サイトでベクター グラフィックをスプラッシュする

スケーリングの基本

ベクター背景の作成

背景を調整して見栄えを良くする

優れたソリューション

グラデーションを効率的に使用する

簡単にアニメーション化する

ここからどこへ？

その他の参考情報

レスポンシブサイトでベクターグラフィックをスプラッシュする