WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順)

<svg> 「svgでグラフィックを描く」[読み方:エスブイジー]

<svg>タグは、コードを記載して画像を描画することが出来ます。
JPEGやPNGなどのビットマップデータと比べて、拡大してもぼやけずにきれいな状態で表示出来ます。

HTML規格HTML4.01HTML5
使用可否×
<svg>は、HTML5で追加されたタグです
ブラウザ別の対応状況
下記サイトで確認できます。
「Can I use」(英語のサイトです)
広告

<svg> の属性

【構文】
<svg width="60px" height="40px" viewBox="0 0 55 40">
~描画するためのxmlを記載する~
</svg>
属性意味値のサンプルなど
width="幅"画像表示する領域の幅
(ピクセルで指定)
「60」
height="高さ"画像表示する領域の高さ
(ピクセルで指定)
「40」
viewBox="幅"画像の表示範囲
4つの数字で指定 "Ⅹ座標 Y座標 幅 高さ"
「0 0 55 40」
描画するためのxml要素 描画の形状
要素意味
line直線を描く
polyline折れ線を描く
rect四角形を描く
circle円を描く
ellipse楕円を描く
polygon多角形を描く
path複雑な形状を描く
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<svg>タグのサンプル

画像を描画
<!-- 円 -->
<svg width="600" height="100" viewBox="0 0 600 100">
<circle cx="100" cy="50" r="50" fill="red"></circle>
<!-- cx=中心のx座標 cy=中心のy座標 r=半径 -->
</svg>
<!-- 楕円 -->
<svg width="600" height="100" viewBox="0 0 600 100">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="blue"></ellipse>
<!-- cx=中心のx座標 cy=中心のy座標 rx=半径x方向 ry=半径y方向 -->
</svg>
<!-- 長方形 -->
<svg width="600" height="100" viewBox="0 0 600 100">
<rect x="50" y="25" width="100" height="50" rx="10" ry="10" fill="green"></rect>
<!-- x=始点のx座標 y=始点のy座標 rx=角の丸みx方向 ry=角の丸みy方向 -->
</svg>
<!-- 直線 -->
<svg width="600" height="150" viewBox="0 0 600 150">
<line x1="50" y1="0" x2="200" y2="150" stroke="#000"></line>
<!-- x1=始点のx座標 y1=始点のy座標 x2=終点のx座標 y2=終点のy座表 -->
</svg>
<!-- 折れ線 -->
<svg width="600" height="150" viewBox="0 0 600 150">
<polyline points="50,25 50,75 100,75 100,125 150,125" stroke="#000" fill="none"></polyline>
<!-- points=始点のx座標 y座標 次点のx座標 y座標 ~ 終点のx座標 y座標 -->
</svg>
<!-- 多角形 -->
<svg width="600" height="180" viewBox="0 0 600 180">
<polygon points="0,50 75,0 150,50 150,150 0,150" fill="yellow"></polygon>
<!-- polylineと同様。但し、始点と終点がつながる -->
</svg>
<!-- 複雑な形状 -->
<svg width="600" height="200" viewBox="0 0 600 200">
<path d="M25,25 L150,150 C200,200 250,50 50,25 Z"></path>
<!-- M=始点のx座標 y座標 L=直線で次点のx座標 y座標 C=曲線で次点、中間2点のx座標 y座標 Z=閉じる -->
</svg>
ページTOP

留意事項

  • 描画するためのxmlは、要素ごとに設定する属性が決まっています。要素に対応した属性の設定が必要です。
  • 上記のサンプル以外に、画像にリンクを指定したり、画像にグラデーションをつけるなどいろいろなことが可能です。
ページTOP

関連するHTMLタグ

<canvas><canvas>で確保したエリアに、スクリプト言語で、図形を描けます。
<img>svgファイルの画像を表示出来ます。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン