SVGとは？
状態:確認中
閲覧数:1,717
投稿日: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バイトでも削るためのコードゴルフ
Twitter検索結果。「SVG」に関する最新ツイート
そうらい @SoraiCG
HORI パワポ師 / 資料術 @YuU_Holy
せんとん(戦豚)@次回主催貸切2/12エアコキ大戦✨次回出撃予定→2/5ガルボイサバ @senton2013@MASTER_SVG ありがとうございます😭 2023/02/05 07:05
7LOL @tkpnender
おゆまる @oyumaru_svg@VERTEX_EDGE きちゃうっすね笑 2023/02/05 06:40
60417 @saigonoritou再開直前SVGのウィービングは問題ないんだ
あのルール撤廃された？ 2023/02/05 06:37
マークンMKN @kakutousidoukan@muramura_svg おめでとう㊗🎉 2023/02/05 06:36
すめらぎ - Sumeragi : 2/5 #B12Hr @0mrgSVGはニュージーランドでした
https://t.co/R1E2tmccmo
#IGTC #B12Hr 2023/02/05 06:32
ヒロ@ @hiro_svg_cos@Umino_cos7 死なば諸共！(手榴弾ピン抜き←) 2023/02/05 06:32
うみの@コスプレ垢 @Umino_cos7@hiro_svg_cos 神父「令呪をもって命ずる。自害せよランサー」 2023/02/05 06:31
Chö @HOMUGP001SVGってブランパンGTのチャンピオンじゃなかった 2023/02/05 06:31
ヒロ@ @hiro_svg_cos@Umino_cos7 ( ^ω^ )つ✂️ 2023/02/05 06:30
うみの@コスプレ垢 @Umino_cos7@hiro_svg_cos ( ᐛ)ﾊﾞﾅﾅ 2023/02/05 06:29
すめらぎ - Sumeragi : 2/5 #B12Hr @0mrgGT3でも普通に早いSVGすごい
#IGTC #B12Hr 2023/02/05 06:29
ヒロ@ @hiro_svg_cos@Umino_cos7 当たり前だよなぁ？← 2023/02/05 06:27
うみの@コスプレ垢 @Umino_cos7@hiro_svg_cos そして ヒロ は
考えることを やめた 2023/02/05 06:27
SHICA mili@2/18 初参加者を連れてOPSさん @SHICA_SVGあれ、今日のトスカって動画投稿者大集合の予感？ 2023/02/05 06:26
サバゲが好きな残念な姉BOT @svg_ane_botヒロ@ @hiro_svg_cos@Umino_cos7 (˘^˘ )ﾀﾞｶﾞｺﾄﾜﾙ 2023/02/05 06:25
うみの@コスプレ垢 @Umino_cos7@hiro_svg_cos 日本語勉強してもろて 2023/02/05 06:24
ヒロ@ @hiro_svg_cos@Umino_cos7 ( ˙꒳˙ )ﾁｮﾄﾅﾆｲｯﾃﾙｶﾜｶﾝﾅｲ 2023/02/05 06:23
ヒロ@ @hiro_svg_cos@Umino_cos7 (ง ˙ω˙)ว☆))Д´) ﾄﾞｶｯ 2023/02/05 06:21
うみの@コスプレ垢 @Umino_cos7@hiro_svg_cos だめだが？ 2023/02/05 06:19
ヒロ@ @hiro_svg_cos@Umino_cos7 ダメなの？ 2023/02/05 06:18
うみの@コスプレ垢 @Umino_cos7@hiro_svg_cos ん？ 2023/02/05 06:17