IT用語
図形を数式(ベクター)で表す画像の形式。拡大しても荒れず、CSSやJavaScriptで色や動きを変えられる。
SVG(Scalable Vector Graphics)は、図形や線を座標や数式(ベクター)で表す画像の形式です。中身は XML のテキストで書かれています。
特徴
- 拡大・縮小しても画質が荒れない
- アイコンやロゴ、図などの単純な図形では、ファイルサイズが小さい
- HTML に直接書くと、CSS で色を変えたり、JavaScript で動かしたりできる
- 写真のように色が複雑な画像には向かない(JPEG・WebP などを使う)
使い方
- img 要素や CSS の background-image で、画像ファイルとして読み込む
- HTML の中に svg 要素を直接書く(インライン SVG)
- アニメーションは、CSS や JavaScript のライブラリで付ける
セキュリティ上の注意
SVG はテキストで書かれているため、中にスクリプトを含めることができます。利用者がアップロードした SVG をそのまま表示すると、XSS の原因になるおそれがあります。WordPress が標準で SVG のアップロードを許可していないのは、このためです。外部から受け取る SVG は、不要な要素を取り除く処理(サニタイズ)を行ってから使います。







