gorogoronyan FC2

HTML: svg タグ

概略

SVG (Scalable Vector Graphics) はベクター形式の図形を扱える画像データです。 中身はテキストで記述され、XML フォーマットを使用します。

HTML の中に svg タグを入れることもできます。 また、svg に関係するタグ (例: text タグ, line タグなど) も CSS で装飾することもできます。

テキストのサンプル

TestSVG_text01.html
テキストを表示。
text タグ。
TestSVG_text_anchor01.html
テキストの配置を調整する。
text-anchor のサンプル。
TestSVG_title01.html
title 要素のサンプル。 マウスカーソルが来るとツールチップ風に表示する。

基本的な図形のサンプル

TestSVG_line_grid01.html
グリッド線。line 要素のサンプル。

TestHTML_img_svg01.html
img タグで svg 画像を表示する。
HTML img タグ
TestCSS_background_svg_grid01.html CSS background で svg 画像を表示する。
CSS background
TestSVG_arrow01.html
polyline 要素のサンプル。
三角形と四角形で矢印を描く。
svg タグ: transform で図形を操作
HTML をドローソフト代わりに使う (1)
TestSVG_circle_set_venn_diagram01.html
集合、ベン図のサンプル。
circle 要素 (円)、text 要素、path 要素など。
JavaScript: 集合の処理

svg 内の要素に CSS でスタイルを付ける

svg 画像が img でリンクした外部の画像ファイルではなく HTML 内に埋め込まれている場合は、CSS でスタイルを付けることができます。 svg の属性値で細かい装飾を指定をしなくても CSS で後から装飾することができます。

TestSVG_graph_bar01.html
棒グラフのサンプル。
棒の色やフォントなどを CSS で設定した例。 強調表示も :hover などで効果を付けることもできます。
SVG でグラフを描く
TestSVG_map01.html
HTML 内に格納した SVG の日本地図を CSS で装飾する。
HTML: svg タグ: 地図を表示する

g 要素で部品単位でグループ化する

TestSVG_alpha02_1.html
元のサンプル。単純な図形とテキストを表示。
TestSVG_alpha02_2.html
部品単位で g 要素でまとめ、 共通のスタイルを CSS で記述したサンプル。

参考: TestJS_canvas_draw01.html
canvasタグで描いた例。
canvas タグ

svg 内に画像を埋め込む

TestSVG_image01.html
SVG image タグのサンプル。 xlink:href でリンクした画像ファイルを svg 内に表示する。

アイコンや図のサンプル

TestSVG_igo01.html
SVG アイコンのサンプル。
JavaScript: GameBoard ノートアプリ
囲碁や連珠の盤を SVG 画像で表示する。
HTML で碁盤を表現する (2)
TestSVG_goban_table01.html
img タグのサンプル。
TestSVG_goban_table02.html
CSS background-image: url(SVGファイル名) で画像を並べるサンプル。
TestSVG_graph_axis01.html
グラフの軸などを描く。 線の色・太さやフォントは svg タグの属性ではなく CSS で設定した例。
SVG でグラフを描く

その他

関連

inserted by FC2 system