カテゴリー:
SVG
閲覧数:749 配信日: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> <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バイトでも削るためのコードゴルフ