[Webデザイン]SVGとは?

0

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ファイルを確認してみましょう。

See the Pen mLBqZg by code-school (@code-school) on CodePen.

真っ黒なアイコンですが、大きさやアイコンの色をCSSで変更することができます。

SVGの真骨頂はアニメーション

ここまでSVGのメリットを紹介しまましたが、まだ物足りませんか?

SVGはロゴやアイコンだけの利用に留めるのはもったいないです。

その真価はアニメーションで発揮されます。
以下でSVGを使ったアニメーションの例を紹介します。

See the Pen Handwriting: SVG animation by Lars Munkholm (@munkholm) on CodePen.

 

See the Pen CSS/SVG Animated Circles by Kyle Edwards (@kyledws) on CodePen.

See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.

SVGをWebで使用するには?

SVGをWebで利用するには大きく分けて二つの方法があります。

一つは、imgタグやobjectタグを使って反映させる方法。

 

しかし、この場合だとJavaScriptやCSSを適用させることはできません。

その場合にはインラインで直接書き込みます。

 

このケースだとHTMLファイルが冗長になってしまうので、適選使い分けることをおすすめします。








 

関連記事



About Author

Comments are closed.