広島大学ITエンジニアアドベントカレンダー Advent Calendar 2019の15日目の記事です。

SVGとは

ざっくりいうとHTMLっぽいフォーマットでお絵かきできる言語です。グラフ描画ライブラリなどで利用されています。参考：

、

グラフ描画ライブラリを作ろうと思っていて、必要となったので勉強してみました。

土台

<svg viewBox = "0 0 300 300" width = "300" height = "300">
  
</svg>

body {
  background-color: #ccc;
}

svg {
  background: #fff;
}

f:id:imikoko:20191215230622p:plain

直線

<svg viewBox = "0 0 300 300" width = "300" height = "300">
      <line x1 = "0" y1 = "0" x2 = "300" y2 = "300" stroke = "red" stroke-width = "3"/>
 </svg>

f:id:imikoko:20191215230711p:plain

長方形

<svg viewBox="0 0 300 300" width="300" height="300">
    <rect x = "50" y = "50" width = "150" height = "50" stroke-width = "5" stroke = "green" fill = "yellow"/>
</svg>

f:id:imikoko:20191215230723p:plain

角丸長方形

<svg viewBox="0 0 300 300" width="300" height="300">
    <rect x = "50" y = "50" width = "150" height = "50" stroke-width = "5" stroke = "green" fill = "yellow" rx = "10" ry = "10"/>
</svg>

f:id:imikoko:20191215230735p:plain

文字列

<svg viewBox="0 0 300 300" width="300" height="300">
    <text = font-family = "Arial" x = "150" y = "150" font-size = "30">
      imiko
</svg>

f:id:imikoko:20191215230747p:plain

合わせ技

<svg version     = "1.1"
     baseProfile = "full"
     xmlns       = "http://www.w3.org/2000/svg"
     width       = "300"
     height      = "200">
  <rect width = "100%" height = "100%" fill = "red" />
  <circle cx = "150" cy = "100" r = "80" fill = "green" />
  <text x = "150" y = "125" font-size = "60" text-anchor="middle" fill="white"> SVG
</svg>

f:id:imikoko:20191215230806p:plain

色々

<svg width="200" height="250" version="1.1" >
  //長方形
  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  //角丸長方形
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  //◯
  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  //楕円
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
  
  //直線
  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  //ギザギザ線
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>
  //お星様
  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  //波線
  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

f:id:imikoko:20191215230818p:plain