SVGとは?
状態:確認中
閲覧数:1,717
投稿日:2015-02-20
更新日:2015-03-17
XMLを記述したテキストファイル
・HTMLと同様にJavaScript(DOM API)による制御も可能
特徴
・XMLでベクトルグラフィックスを記述
・PNGなどの一般的な画像形式と異なり、ベクトルデータとして画像を表現
HTML
・タグによって文書の構造を記述
SVG
・タグで図形を記述
表示される図形
・svgタグの子(孫)要素として記述
・SVG 1.1 仕様 (第2版) 日本語訳
・HTMLと同様にJavaScript(DOM API)による制御も可能
特徴
・XMLでベクトルグラフィックスを記述
・PNGなどの一般的な画像形式と異なり、ベクトルデータとして画像を表現
HTML
・タグによって文書の構造を記述
SVG
・タグで図形を記述
表示される図形
・svgタグの子(孫)要素として記述
・SVG 1.1 仕様 (第2版) 日本語訳
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バイトでも削るためのコードゴルフ
Twitter検索結果。「SVG」に関する最新ツイート
@MASTER_SVG ありがとうございます😭 2023/02/05 07:05
@VERTEX_EDGE きちゃうっすね笑 2023/02/05 06:40
再開直前SVGのウィービングは問題ないんだ
あのルール撤廃された? 2023/02/05 06:37
@muramura_svg おめでとう㊗🎉 2023/02/05 06:36
SVGはニュージーランドでした
https://t.co/R1E2tmccmo
#IGTC #B12Hr 2023/02/05 06:32
@Umino_cos7 死なば諸共!(手榴弾ピン抜き←) 2023/02/05 06:32
@hiro_svg_cos 神父「令呪をもって命ずる。自害せよランサー」 2023/02/05 06:31
SVGってブランパンGTのチャンピオンじゃなかった 2023/02/05 06:31
@Umino_cos7 ( ^ω^ )つ✂️ 2023/02/05 06:30
@hiro_svg_cos ( ᐛ)バナナ 2023/02/05 06:29
GT3でも普通に早いSVGすごい
#IGTC #B12Hr 2023/02/05 06:29
@Umino_cos7 当たり前だよなぁ?← 2023/02/05 06:27
@hiro_svg_cos そして ヒロ は
考えることを やめた 2023/02/05 06:27
あれ、今日のトスカって動画投稿者大集合の予感? 2023/02/05 06:26
@Umino_cos7 (˘^˘ )ダガコトワル 2023/02/05 06:25
@hiro_svg_cos 日本語勉強してもろて 2023/02/05 06:24
@Umino_cos7 ( ˙꒳˙ )チョトナニイッテルカワカンナイ 2023/02/05 06:23
@Umino_cos7 (ง ˙ω˙)ว☆))Д´) ドカッ 2023/02/05 06:21
@hiro_svg_cos だめだが? 2023/02/05 06:19
@Umino_cos7 ダメなの? 2023/02/05 06:18
@hiro_svg_cos ん? 2023/02/05 06:17