SVG(HTML) - Images

SVG 要素を表示する

<svg xmlns="http://www.w3.org/2000/svg" width="350" height="150" viewBox="0 0 350 150" style="background-color:lightblue; ">
</svg>

テキストを表示する

テキストの描画は文字の下部が基準になるため、font-size が 30 の場合、y 属性を 30 にしないと描画領域からはみ出して表示されます。

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150" style="background-color:lightblue; ">
  <text x="0" y="60" font-size="30" fill="#ffffff">Hello World!</text>
</svg>
Hello World! 
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150" style="background-color:lightblue; ">
  <text x="70" y="90" font-size="30" fill="#ffffff">Hello World!</text>
</svg>
Hello World!

四角形

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150" style="background-color:lightblue; ">
  <rect x="20" y="20" width="80" height="60" />
</svg>
属性 内容
x 左上の x 座標
y 左上の y 座標
width 幅
height 高さ
rx 角の丸みの x 方向の半径
ry 角の丸みの y 方向の半径 
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150" style="background-color:lightblue; ">
  <rect x="10" y="10" width="80" height="80" rx="10" stroke="black" stroke-width="8" fill="rgba(0,0,0,0)"/>
  <rect x="100" y="10" width="80" height="80" rx="40" ry="40" stroke="black" stroke-width="4" fill="deeppink"/>
</svg>

circle（正円）

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150" style="background-color:lightblue; ">
  <circle cx="50" cy="50" r="40"/>
  <circle cx="150" cy="50" r="40" stroke="black" stroke-width="4" fill="rgba(0,0,0,0)"/>
</svg>
属性 内容
cx 円の中心の x 座標
cy 円の中心の y 座標
r 円の半径

ellipse（楕円）

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150" style="background-color:lightblue; ">
  <ellipse cx="110" cy="60" rx="100" ry="50"/>
</svg>
属性 内容
cx 楕円の中心の x 座標
cy 楕円の中心の y 座標
rx 楕円の x 軸方向の半径
ry 楕円の y 軸方向の半径

line（直線）

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150" style="background-color:lightblue; ">
  <line x1="0" y1="50" x2="100" y2="50" stroke="black" stroke-width="5"/>
</svg>
属性 内容
x1 始点の x 座標
y1 始点の y 座標
x2 終点の x 座標
y2 終点の y 座標

polyline（ポリライン/折れ線）

points 属性に x と y の座標のペアを列挙して形状を指定します。

各々の点は X 座標と Y 座標の2つの値を持たなければなりません。次の記述はすべて同じ折れ線を描画します。

<polyline points="0,50 50,90 100,50" stroke="black" stroke-width="5"/>
<polyline points="0 50,50 90,100 50" stroke="black" stroke-width="5"/>
<polyline points="0 50 50 90 100 50" stroke="black" stroke-width="5"/>
<polyline points="0,50,50,90,100,50" stroke="black" stroke-width="5"/>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150" style="background-color:lightblue; ">
  <polyline points="0 50,50 90,100 50" stroke="black" stroke-width="1"/>
</svg>

fill="none" にした場合は、次のようになります。

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150" style="background-color:lightblue; ">
  <polyline points="0 50,50 90,100 50" stroke="black" stroke-width="1" fill="none"/>
</svg>

polygon（多角形）

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150" style="background-color:lightblue; ">
  <polygon points="0 10,30 50,60 10"/>
  <polygon points="0 80,0 100,20 100,20 80"/>
</svg>