WEB制作ワークフローの効率化・高速化が進むに伴い、ビジュアル表現に通常のビットマップ画像を使う以外の手段が選択肢に入りやすくなりました。SVG画像の利用について解説します。
伸縮の必要なデザインに対応する手段として見直されてきたのがベクターの画像ファイル形式、SVG(Scalable Vector Graphics)です。
SVGはXMLで記述されておりテキストエディタでも編集可能ですが、通常はイラストレーターのようなベクター画像制作ソフトで制作したものを書き出して使用します。
SVGの一番の特徴はピクセルに依存しないため、拡大 ⇔ 縮小に強い。
ただし、ベクターデータの性質上、複雑な形状と諧調を持つ写真のような画像には不向きであり、用途は選ぶ必要があります。それからコンテンツ自体にSVG使うことも多々あります。
Snap.svg(http://snapsvg.io/)は、SVGを使いやすくするためのJavaScriptのライブラリです。JavaScriptからSVGをコントロールすることができ、アニメーションや、外部から読み込んだSVG画像の変形や色の変更まで行うことができます。