SVG画像を使用するメリットについて

SVG画像は、XMLベースのマークアップ言語のデータファイルのため、テキストで編集が可能が画像になります。

例えば、こちらのような画像になりますが、一般的には単純なアイコンや図形などのイラスト画像で使用されています。

通常のjpgの写真画像などもSVG形式に変換して使用することができますが、複雑な画像をSVG形式で表示するのには向いておらず、単調なイラストを作成する際に向いています。

このSVG画像のフォーマットは、ベクター画像と呼ばれており、画像を拡大縮小をしても、ぼやけたりはせず、鮮明に表示されるのが特徴です。また、マークアップ形式の画像ファイルのため、ファイル容量が小さいメリットがあります。

加えて、テキストデータとして容易に編集することができます。

例えば、上記の画像を拡大させる方法ですが、元のSVGデータが以下のようになっていたとします。

この場合、最初の二つが位置を表し、それぞれ左上のX座標、Y座標を示すため、0 0 では左上の位置に表示されることを意味します。次の「800 600」が表示領域のwidthとheightになります。

これを半分に縮小する場合、アスペクト比を保持したまま、width="400" height="300"を追加して以下のようにすることで縮小することができます。

拡大する場合も同様に、width="1600" height="1200"などと指定しますが、解像度に合わせて設定することをおすすめします。

SVG画像を拡大・縮小する際のポイントは、viewboxの値を指定した上で、widthとheightも指定する点にあります。viewboxを指定していない状態でwidthとheightを指定した場合、画像がくずれてしまうことがあるため、注意しましょう。

実際にSVG画像を表示させる際には、XMLデータファイルのため、通常のフォトビューワで開くとエラーとなり、ブラウザなどで表示することができます。

そのため、ページのリソースとして外部の画像ファイルを指定する必要はなく、HTMLファイルにそのまま埋め込むことができるため、ファイルサイズが小さく、表示速度が速い傾向があります。

ただし、HTMLに埋め込む場合は、ブラウザがキャッシュして再利用できないデメリットがあるため、その場合は「.svg」画像として使用するとよいでしょう。

カテゴリ: 画像処理