SVGで図形を再利用する

よく見る「～～ジェネレータ」など

いくつかフォームの値を利用して動的にSVGを生成するといったようなことをやってみたいなと思い立ったのでやってみた

あまり知らなかったので学んだことをつらつら書いていく

以降Reactでインライン埋め込みしてレンダリングしているためタグの属性名にハイフンが入っている場合はキャメルケースにしている

図形を描画する

SVGのタグは全然知らなかったのでとりあえず下記参考にしてpolygon使うことにした

SVGの基本(使い方, 主な図形, CSSでスタイルづけ) - わくわくBank

www.wakuwakubank.com

各種指定する

• pointsで頂点の座標
• strokeで枠線の色
• fillで各頂点を結んだ枠内を塗る色

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  width="500"
  height="300"
>
  <polygon
    points="100,100 200,100 200,200, 100,200"
    stroke="#000000"
    fill="#cccccc"
    strokeWidth="1"
  />
</svg>

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  width="500"
  height="300"
>
  <polygon
    points="100,100 200,100 200,200"
    stroke="#000000"
    fill="#cccccc"
    strokeWidth="1"
  />
</svg>

再利用する

defsタグを使うことで事前に定義したベクタ情報を使いまわしできるというのを知った

defs内で定義を行ってpolygonタグのidに指定した値をuseで呼び出す(#を頭につける)

xlinkHrefをHTMLで使う場合はxlink:hrefとする

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  width="1200"
  height="800"
>
  <defs>
    <polygon
      id="circle"
      points="100,100 200,100 200,200, 100,200"
      stroke="#000000"
      fill="#cccccc"
      strokeWidth="1"
    />
  </defs>

  <use xlinkHref="#circle"></use>
  <use x="100" y="100" xlinkHref="#circle"></use>
  <use x="0" y="200" xlinkHref="#circle"></use>
</svg>

簡単に再利用できた

再利用時にパラメータを渡す

defs内で定義した図形を再利用する際にこの呼び出し時はこの属性値にする

ということができる

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  width="1200"
  height="800"
>
  <defs>
    <polygon
      id="circle"
      points="100,100 200,100 200,200, 100,200"
      stroke="#000000"
      strokeWidth="1"
    />
  </defs>

  <use xlinkHref="#circle" fill="red"></use>
  <use x="100" y="100" xlinkHref="#circle" fill="green"></use>
  <use x="0" y="200" xlinkHref="#circle" fill="blue"></use>
</svg>

呼び出し時にfill(塗りつぶし色)をそれぞれ違う値で渡している

属性が適用される優先順位

use,defs内ともにfillやstrokeを指定できるがuseで呼び出した場合はdefsの中で指定した値が優先されるので可変にしたいパラメーはdefsでは指定しないほうが良い

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  width="1200"
  height="800"
>
  <defs>
    <polygon
      id="circle"
      points="100,100 200,100 200,200, 100,200"
      fill="#ccc"
      strokeWidth="1"
    />
  </defs>

  <use xlinkHref="#circle" fill="red" stroke="red"></use>
  <use x="100" y="100" xlinkHref="#circle" fill="green" stroke="green"></use>
  <use x="0" y="200" xlinkHref="#circle" fill="blue" stroke="blue"></use>
</svg>

use時にfill(塗りつぶし色),stroke(枠線の色)を指定しているが、呼び出しているpolygonの中でfillの値を指定しているのでこちらの値#cccが採用されている

習作

これらを組み合わせて、習作で次のようなよくスライドで出てきそうなSVGを作れるページを作ってみた

Arrow Flow Generator

まとめ

• SVGでdefs内にID指定して定義した図形は使い回しができる
• 呼び出し時にパラメータを渡すことができる
• 呼び出し時と定義時両方パラメータが指定されていた場合は定義時に指定した値が優先される

ちょっとだけSVGと仲良くなれた気がする

何かピンとくるネタを思いついたらサクッと作れそう

色々やったあとに再度調べたらsymbolで複数の図形をまとめて図形として扱えるなどさらにいろいろできることが分かったので、次ネタがあったら活用してみたい