SVG画像の基礎知識
写真や画像を編集して書き出す際によく目にするのが『SVG』という単語です。
JPEGやGIFなどと同様に画像拡張子の一つとして用いられているSVGには、どのような特徴があるのでしょうか？まずは、SVG画像の基礎知識についてみていきましょう。
SVG画像とは
SVG画像とは、『Scalable Vector Graphics』の略称で、JPEGなどと同じ画像拡張子の一つです。この拡張子は、アイコンなどに用いられることが多いという特徴があります。
インターネットが私たちの日常に浸透したことにより、Web上で使用でき、拡大や縮小ができるベクター画像の需要が高まりました。これにより、近年SVG画像にも注目が集まってきています。
JPEGやPNG・GIFとの違い
SVGは、同じ画像拡張子として知られているJPEG・PNG・GIFと比べてどのような違いがあるのでしょうか。
これら画像拡張子は、大きく分けると二つのデータに分類できます。JPEGやPNG・GIFは『ビットマップデータ』に分類され、SVGは『ベクターデータ』に分類されます。
ビットアップデータは、色彩豊かで複雑なオブジェクトに対応できるという特徴があります。一眼レフなどで撮影した写真データや、自分でデザインしたイラストなどの質を落としたくないときには、ビットアップデータを使って保存するのがよいでしょう。
ベクターデータには、拡大などの変形ができ、データ容量が小さいという特徴があります。同じ画像拡張子であっても特徴が異なるので、基本的な二つの分類とその特徴について押さえておきましょう。
SVG画像の特徴
SVG画像は、ベクターデータに分類されることを紹介してきましたが、さらに具体的にその特徴について探っていきます。
ほかの拡張子と比べたときにメリットとデメリットはどのような点なのでしょうか。それぞれの特徴をおさえ、用途にあった拡張子を選択して使いましょう。
メリット
SVG画像のメリットは、代表的なものをあげると二つあります。一つ目が『いろいろなディスプレイに対応できる』という点です。
先ほど簡単に触れたように、ベクターデータの画像には、拡大などの変形や後からの編集ができるという特徴があります。
近年、スマートフォンやパソコンなどいろいろな端末で画像を利用するようになりましたが、あらゆる端末に対応した画像表示ができるというのがSVGの魅力の一つです。
二つ目が『CSSやJavaで加工できる』という点です。プログラミング言語に対応している画像であるため、アニメーションをつけるなどの編集もできます。
デメリット
SVG画像には、ベクターデータ独特のデメリットもあります。その一つが、『複雑なオブジェクトに対応していない』という点です。
SVG画像は、いろいろな端末に合わせた編集や設定が可能ですが、単色のアイコンに向いているという特徴があります。そのため、色彩豊かな画像などを表現したいのであればJPEGなどのビットアップデータの方が適しています。
SVG画像は圧縮して使う
SVG画像の魅力の一つでもあるのが『データの容量を小さくできる』という点です。
SVG画像のデータを作成したら、最適化・軽量化を行ってできるだけサイズを小さくしておくとよいでしょう。
SVG画像を圧縮できるサイト
SVG画像を圧縮するためのサイトにはいろいろありますが、中でも多くのユーザーから利用されているサイトがあります。
SVG画像のメリットを生かすためにも圧縮する作業は必要なため、どのようなサイトがあるのかチェックしていきましょう。
JPEGやPNGにも対応のCompressor.io
SVG画像だけでなく、JPEGやPNGにも対応している画像を圧縮できるサイトが『Compressor.io』です。このサイトでは、最大90%のファイルサイズを削減できます。
JPEG・PNG・GIF・SVGの四つのファイルフォーマットに対応していて、無損失か損失の2種類の圧縮法から選べる上に、数百キロバイトまで節約できる高圧縮機能を使うことができます。
Compressor.io - optimize and compress JPEG photos and PNG images
簡単に圧縮できるSVGOMG
SVG画像のファイルから不要なデータを簡単に取り除き、ファイルサイズを削減する機能をブラウザ上で利用できるのが『SVGOMG』です。
このサイトではいろいろな機能を使えます。たとえば、属性値内の重複する空白や改行を削除したり、データ内にある空のコンテンツを削除したりすることができます。
実際のSVGファイルの変化を確認しつつ作業を進めることができるため、分かりやすく簡単にSVG画像のデータを最適化することができます。
まとめ
SVG画像の扱い方は多岐に渡ります。この拡張子のメリットは、多様化するインターネット社会に適応しやすいものであるため需要はさらに増加していくでしょう。
SVG画像の特徴や使い方をしっかり押さえ、あらゆるシーンでうまく活用できるようにしましょう。