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