SVGはホームページで、画像やアニメーションに使われている画像ファイルの一形式です。PNGやjpgなどの画像ファイルと違い、拡大してもぼやけることなく綺麗に表示できる特徴を持っています。SVGはScalable Vector Graphicsの略。拡大縮小しても画像がきれいなままで、ベクターグラフィックスと言われています。それに対して、PNGやjpgは、ラスターグラフィックスと言われています。SVGの編集には、イラストレータやCorelDRAW、フリーソフトで作ることができます。
筆者が記事を作るときにSVGを使うのは、図や表を使って説明をしたいときにぼやけない画像にすることができるからです。 現在のパソコン、タブレット、スマホでは、ディスプレイの大きさに合わせて、OSが表示を拡大縮小したり、ブラウザで文字を見やすくするために拡大縮小が行われています。
下の図は、SVGとPNGで同じ画像を出力したものです。ブラウザの拡大機能、CTRL+マウスホイールで拡大してみると、PNGはぼやけやシャギー(輪郭のギザギザ)が目立っています。
PNGやjpgといった画像は、情報をピクセルとして持っているので、拡大すると粗さやぼやけが目立ってしまします。しかし、SVGは、ピクセルデータではなくコードや座標でデータを構成するので、拡大縮小しても綺麗に表示することができます。最近では、Retinaや4Kといった高解像度のディスプレイが使われています。これらのディスプレイに、ディスプレイよりも解像度の低いPNGやjpgを表示すると、拡大が起こり画像がぼやける原因になってしまいます。
ホームページの記事には、文章と一緒に図表を載せます。図表はグラフィックスソフトで作ります。説明に文字を入れてPNGやjpgとして表示すると、高解像度のデバイスでは文字のぼやけが起こり読みにくくなります。そのため、図表をSVGにして保存することで、低解像度から高解像度のディスプレイまで読みやすい図表になります。
また、ホームページでtableタグを使って、表を作る場合ですが、テーブルをSVGに替えることもできます。テーブルの作成では、セルの色など、デザインを工夫したいときは結構苦労した経験があると思います。ドロー系のグラフィックスソフト、Corel Drawやイラストレータなどを使って表を作り、SVGで出力すると、デザイン性と見やすさを重視した表を簡単に作ることが可能です。
例) 通常はテーブルタグで作る表。
CorelDRAW＋SVGで作成。表現力をアップさせた。
PNG、jpgを使って、パソコン、スマホなどのマルチデバイスに対応するには、解像度の異なる画像を複数用意しておく必要があります。高解像度の画像を１つだけ用意しておくことも考えられますが、ファイルサイズで不利になります。また、解像度によって表示する画像を変更するためにHTML/CSSを書かなければならないので、数段階の手間がかかります。SVGなら画像は１つだけ、HTML/CSSの部分は、今までと同様にimgタグで表示することができます。また、SVGファイルが１つだけなので、記憶容量を小さくできる利点もあります。
SVGはホームページの部品、図表に向いています。グラフ、チャート、ロゴ、アイコン、アニメーション、ゲーム、絵(ドロー系)などにつかわれます。ドロー系のグラフィックスならSVGに置き換え可能です。デジカメの写真やスクリーンショットは、SVGの中にイメージを埋め込んで表示できますが、スケーリングが起こった場合にはイメージはぼやけます。
SVGはインタラクティブに変更することが可能です。CSSを使うことで、色、位置、フォントやエフェクトなど、さまざまな要素を自在に変更できます。
有料デスクトップアプリで、イラストレータと並び古くから使われている。使いやすさに定評がある。買取タイプのアプリなので一度買うと長く使える。→CorelDRAW
有料デスクトップアプリ、プロも使用している。月や年単位で契約して使用するサブスクリプションタイプで、お金を払っている限り使い続けられる。→Adobe Illustrator
無料のデスクトップアプリ、ドロー系グラフィックスソフトで、インターフェイスがわかりやすく使いやすい。SVGで出力するときには、多少の設定が必要。→Microsoft Expression Design 4
無料デスクトップアプリ。→INKSPACE
ウェブブラウザベースの無料アプリ。→SVG-EDIT。(移動後、ページ中盤の「Try SVG-edit here」より実行)
トップ