SVGとは？
状態:確認中
閲覧数:3,000
投稿日:2015-02-20
更新日:2015-03-17
XMLを記述したテキストファイル
・HTMLと同様にJavaScript（DOM API）による制御も可能
特徴
・XMLでベクトルグラフィックスを記述
・PNGなどの一般的な画像形式と異なり、ベクトルデータとして画像を表現
HTML
・タグによって文書の構造を記述
SVG
・タグで図形を記述
表示される図形
・svgタグの子（孫）要素として記述
・SVG 1.1 仕様 （第２版） 日本語訳
・HTMLと同様にJavaScript（DOM API）による制御も可能
特徴
・XMLでベクトルグラフィックスを記述
・PNGなどの一般的な画像形式と異なり、ベクトルデータとして画像を表現
HTML
・タグによって文書の構造を記述
SVG
・タグで図形を記述
表示される図形
・svgタグの子（孫）要素として記述
・SVG 1.1 仕様 （第２版） 日本語訳
HTML5でsvgタグを使用する際、xmlns属性は不要
XMLネームスペースは必要なの？
<svg xmlns="http://www.w3.org/2000/svg"> V.S. <svg>
・ネームスペースは不要
・<svg>だけで良い
※但し、SVG単体で使用する場合は、xmlns属性が必要
SVGをHTML内で表示する4つの方法
方法
A.objectタグ
B.imgタグ
C.CSS
D.svgタグ
A.objectタグ
SVG画像を表示したい箇所にobjectタグを挿入
・type属性に「image/svg+xml」を、data属性に表示するSVGファイルのURLを指定
・最も互換性が高い
・SVGをサポートしたほぼすべてのWebブラウザで動作
・JavaScriptによるSVGドキュメントへのアクセスも可能
<object type="image/svg+xml" data="★★.svg">
B.imgタグ
SVG画像を表示したい箇所にimgタグを挿入
・JavaScriptによる制御不可
<img src="★★.svg">
C.CSS
.クラス名 {background: url(★★.svg);}
<style>
.svgbg {
background: url(★★.svg);
width:430px; height:330px;
}
</style>
<div class="svgbg"></div>
D.svgタグ
インラインSVG
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="" cy="" r="" fill="" />
<rect x="" y="" width="" height="" fill="" />
</svg>
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="" cy="" r="" fill="" />
<rect x="" y="" width="" height="" fill="" />
</svg>
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="100" cy="100" r="100" fill="red" />
<rect x="130" y="130" width="300" height="200" fill="blue" />
</svg>
</body>
</html>
tutorial.jp/graph/svg/svgman.pdf
今年こそついにSVG元年？まだ間に合う！SVGの学習に役立つサイト紹介
Advent Calendar 3日目:SVG画像を1キロバイトでも削るダイエット術！
Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ