SVGという画像フォーマット
SVGは、XMLベースのベクター形式画像フォーマットです。
要するに、以下の特徴があります。
- 基本図形（矩形、折れ線、ベジエ曲線、テキスト…）の組み合わせ
- JPGやPNGと違い、拡大しても「ギザギザ」にならない
- 単純な図形であれば容量を小さくできる
使い方
普通の画像ファイルと同じように使えます
<img src="hoge.svg" alt="ほげほげ">
body {
background: url(hoge.svg);
}
HTMLに埋め込む
HTML5では、 svgタグをHTML中に埋め込むことができます。
<svg x="0" y="0" width="400" height="300"> <circle cx="200" cy="150" r="100" fill="black" /> </svg>
JavaScriptで動かす
JavascriptでDOM操作をすることで、動的に変更することができます。
<svg x="0" y="0" width="400" height="300" onclick="document.getElementById('svg3').setAttribute('fill','red')">
<circle cx="200" cy="150" r="100" fill="black" id="svg3" />
</svg>
CSSを適用する
SVGの要素自体にCSSを適用できます。
<svg x="0" y="0" width="400" height="300""> <circle cx="200" cy="150" r="100" id="svg4" /> </svg>
#svg4 {
fill:red;
}
コメントをお書きください