カテゴリー:
SVG
閲覧数:677 配信日:2015-07-21 22:39
方法
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バイトでも削るためのコードゴルフ