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

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

Alex Danilo

目を引くモバイルコンテンツを作成するには、ダウンロード量と視覚的なインパクトのバランスを取る必要があります。ベクターグラフィックは、最小限の帯域幅で驚くほど視覚的な効果をもたらす優れた方法です。

多くの人はキャンバスをウェブ上でベクターとラスターを組み合わせて描画する唯一の方法だと考えていますが、いくつかの利点のある代替手段もあります。ベクター描画には、HTML5 の主要部分である Scalable Vector Graphics（SVG）の使用がおすすめです。

レスポンシブデザインがさまざまな画面サイズを処理するうえで大きな役割を果たし、SVG がさまざまなサイズの画面を簡単に処理するのに理想的であることは周知の事実です。

SVG はベクターベースの線画を表現するのに最適な方法で、ビットマップを補完します。後者は、連続色調の画像に適しています。

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

Google ドライブの図形描画アプリケーション、Inkscape、Illustrator、Corel Draw、その他多くの一般的なオーサリングツールは SVG を生成するため、さまざまな方法でコンテンツを生成できます。 SVG アセットのいくつかの使用方法と最適化のヒントを紹介します。

スケーリングの基礎

まずはシンプルなシナリオから考えてみましょう。ウェブページ全体のグラフィックをウェブページの背景にしたいと思っています。会社のロゴなど、常に全画面表示になっていると便利でしょう。ただし、当然ながら、世の中のあらゆる画面サイズで適切に処理するのは実に困難です。わかりやすいように、シンプルな HTML5 ロゴから説明します。

HTML5 のロゴを以下に示します。これはご想像のとおり、これは SVG ファイルとして生成されたものです。

ロゴをクリックして最新のブラウザで確認してみてください。どのサイズのウィンドウにも美しくスケーリングされます。お好みのブラウザで開いてみて、ウィンドウのサイズを変更すると、どの倍率でも画像がくっきり表示されることを確認します。ビットマップ画像で試す場合、発生する可能性のある画面ごとにさまざまなサイズを提供するか、ひどくピクセル化されたスケーリングされた画像を用意せざるを得なくなります。

何が重要なのでしょうかお気づきでないかもしれませんが、使用しているデバイスとは独立してスケーリングできる唯一のフォーマットです。そのため、ユーザーの画面やウィンドウサイズを把握しなくても、ユーザーに 1 つのアセットを配信するだけで済みます。

しかし、それだけではありません。HTML5 ロゴのサイズはたったの 1, 427 バイトです。これは非常に小さいため、読み込み時にモバイルデータプランを損なうことはほとんどありません。そのため、読み込みが速くなり、ユーザーにとって安価で高速になります。

SVG ファイルのもう一つの利点は、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 と品質は変わらないため、ファイルサイズと鮮明度の両方で、すべてのアカウントに有用です。

ベクター背景を作成する

ベクターファイルをページの背景として使用する方法を見ていきましょう。簡単な方法の一つは、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 の不透明度プロパティを使用するか、SVG ファイル自体で不透明度を使用すると簡単に実現できます。これを行うには、CSS コンテンツに次のコードを追加するだけです。

#bg {
  opacity: 0.2;
}

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

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

優れたソリューション

元の 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 グラデーションを使用しても理にかなっていますが、グラデーション自体が DOM 内に存在することが SVG の利点の一つです。つまり、スクリプトを使用して要素を変更できますが、さらに重要なこととして、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 オーバーヘッドを最小限に抑えて美しいアニメーションを作成できます。

ただし、このスタイルのアニメーションをまったく処理しないブラウザもありますが、その場合、きれいな色の背景が表示されますが、その背景は変わりません。スクリプト（および requestAnimationFrame）を使用するとこの問題を回避できますが、この記事の内容は少し続きます。

もう一つ注意すべき点は、この非圧縮 SVG ファイルはわずか 2,922 バイトで、これほどリッチなグラフィック効果を実現するには非常に小さいことです。そのため、ユーザーとそれらのデータプランはプロセスにおいて満足のいくものとなります。

ここからどこへ行く？

多くの場合、SVG は理想的ではなく、写真や動画は他の形式のほうが適切に表現されます。テキストもその一つです。一般に、ネイティブ HTML と CSS の方がはるかに効果的です。ただし、線画アート用の武器としては、これが理想的な選択肢になり得ます。

SVG グラフィックの基本的な使い方をいくつか紹介し、最小限のダウンロードで全画面表示の鮮明なグラフィックを提供する小さなコンテンツを簡単に生成できることを示します。コンテンツを少し改善するだけで、わずかなマークアップで、グラフィカルな画像を簡単に作成できます。次回の記事では、SVG に組み込まれたアニメーションを使って、よりシンプルで強力な効果を実現する方法について詳しく説明します。また、SVG と canva を比較して、モバイルグラフィックサイトの作成に適したツールを選択する方法についても説明します。

その他の参考情報

Inkscape: SVG をファイル形式として使用するオープンソースの描画アプリケーション。
Open Clip Art: 数千もの SVG 画像を含んだ大規模なオープンソースのクリップアートライブラリ。
仕様やリソースなどへのリンクを含む W3C SVG ページ。
Raphaël: SVG コンテンツの描画やアニメーション化に便利な API を提供する JavaScript ライブラリで、古いブラウザ向けの優れた代替機能を備えています。
スリッパリーロック大学の SVG リソース - 役立つ SVG Primer へのリンクがあります。

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

スケーリングの基礎

ベクター背景を作成する

背景を調整してきれいにする

優れたソリューション

勾配を効率的に使用する

簡単にアニメーション化

ここからどこへ行く？

その他の参考情報

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