吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【SVG】SVGとは

2015年2月15日 / category : svg

SVGについて色々と記事を書いてみます。
と言っても、私自身、SVGを使用した経験がないため、知識がゼロです。
ということで、まずSVGとはなんぞや、というところからスタートしたいと思います。

SVGとは

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)
の略らしい。と言っても、よくわからない。もう少し具体的な言葉がほしい。

1.XMLをベースとした2次元のベクター画像形式である
2.アニメーションや、ユーザーインタラクションをサポートしている
3.仕様はW3Cによって開発されている

ふむふむ。もう少し具体的に。

1.XMLなので、ブラウザ上で閲覧できる。
2.XMLなので、テキストエディタで編集ができる。
3.ハイパーリンクを設定できる。
4.JavaScriptとも連携できる
5.ベクター形式なので、拡大・縮小しても劣化しない
6.拡大・縮小のほかに、回転、移動などもできる

サポートしているブラウザは、

■IE
IE9以降

■Google Chrome
最初のバージョンから

■Firefox
FIrefox1.5以降

■Safari
Safari3.0以降

■Android
Android3.0以降

ふむふむ。ここまでで出てきた疑問点は

1.IE8以下は対応できないのか?
2.canvasとの違い

この辺は、以後勉強しながら解決していきたい。

他の画像形式と比較

とりあえず、他の形式と比較してみた。
100×105の画像を、gif・png8・png24・png32・svgそれぞれ用意し、等倍・2倍で埋め込んでみた。
svg以外の2倍サイズは、やはり劣化しますね。svgは綺麗、さすがです。これがまずsvgの最大の特徴ですね。

  • 形式:gif サイズ:等倍
    形式:gif サイズ:2倍
  • 形式:png8 サイズ:等倍
    形式:png8 サイズ:2倍
  • 形式:png24 サイズ:等倍
    形式:png24 サイズ:2倍
  • 形式:png32 サイズ:等倍
    形式:png32 サイズ:2倍
  • 形式:svg サイズ:等倍
    形式:svg サイズ:2倍