[Webデザイン]SVGとは？
SVGとは何ぞや？という出発点から、SVGに関することについてあれこれ紹介。
Webサイトで、SVGを使う基本的な知識などもまとめて紹介します。
SVGとは？
SVGとは、Scalable Vetor Graphicsの略称で画像データになります。
画像データで言うと、jpgやpngが有名ですが、その違いはビットマップデータではなく、ベクターデータにあります。
ちょっと何言っているか分からないですね。
簡単に言うと、SVGはillustratorで作成するようなベクター形式のデータなので拡大しても画像がギザギザになるようなことはありません。
jpgやpngは突き詰めるとドットの集合なので、高解像度のディスプレイで見た場合にはギザギザが目立つ場合もあります。
拡大すれば一発でその違いは分かります。
Webデザインでは、例えばロゴやアイコン(SNSのシェアボタンなど)をSVGデータで作成すると見栄えの良いデザインに仕上がります。
SVGはCSSで柔軟な指定ができる
SVGを使うメリットとは、単に画像の美しさだけではありません。
画像でありながら、CSSで柔軟に指定することができます。jpgやpngのような画像ファイルもCSSで大きさやグラデーションを指定できますが、SVGはそれ自体の色を変更することもできます。
例えば、TwitterのSVGアイコンの色を黒色からサイトの色彩に合わせて他の色に変更できます。
ちなみにSVGはエディタでも開くことができます。
ちょっとTwitterのSVGファイルを確認してみましょう。
真っ黒なアイコンですが、大きさやアイコンの色をCSSで変更することができます。
SVGの真骨頂はアニメーション
ここまでSVGのメリットを紹介しまましたが、まだ物足りませんか？
SVGはロゴやアイコンだけの利用に留めるのはもったいないです。
その真価はアニメーションで発揮されます。
SVGをWebで使用するには？
SVGをWebで利用するには大きく分けて二つの方法があります。
一つは、imgタグやobjectタグを使って反映させる方法。
<img src="/image/xxx.svg"/>
しかし、この場合だとJavaScriptやCSSを適用させることはできません。
その場合にはインラインで直接書き込むこともできます。
