問1 SVG(Scalable Vector Graphics)

Web問題集HTML5レベル2グラフィックス・アニメーション

SVG(Scalable Vector Graphics)について、正しいものはどれか。(全て選択)






正解!おめでとう!

解説

SVG(Scalable Vector Graphics)は、HTML5で図形の描画をする技術のこと。

同じくHTML5で図形の描画をする技術にCanvasというものがあって、CanvasとSVGの比較を表にまとめたよ。

                         
Canvas SVG
形式 ビットマップ形式ベクター形式
拡大縮小 拡大縮小で画像が劣化することがある拡大縮小で画像が劣化することはない
複雑な画像 複雑な画像を表現することができる複雑な画像には向いていない
アニメーションの表示 CSSやJavaScriptを用いることで可能CSSやJavaScriptを用いることで可能

ビットマップ形式は、色のついた点で画像を表す方法のこと。

ベクター形式は、点を線で繋いで画像を表す方法のこと。

SVGはベクター形式で、線・色・曲線などを数値にしているため、その数値を修正することで拡大縮小ができる。そのため、拡大縮小しても画像が劣化することはないよ。


SVGの特徴として、ベクター形式の画像である、CSSやJavaScriptでアニメーションを表示することができる、複雑な画像には向いていないの3つが正解。

ピクセル形式の画像である、拡大縮小で画像が劣化することがあるはCanvasの特徴のため不正解。

おしい…もう一度…!

Comment