SVGを触ってみた。

今回はSVGを触ってみます。

Content created by AXY のほうで
グラフを書きたいと思ってD3.dsを触りながらDOMの書き換えで「なにこれ便利ー」って思ってたんだけど、
ＳＶＧでグラフ書くとこでちょっと引っかかったのでした。
そんなわけで、ＳＶＧを直接書いてみようという訓練をしてみました。

それでは本編。

目次

• 目標
• サンプルコード
• ポイント！
• 終わりに

目標

SVGで国旗を描いてみよう。
ただし、寸法的に正確であるのか不安な感じなので、あくまでポイものとします。

サンプルコード

日本 ポイもの

<svg width="310" height="210" xmlns="http://www.w3.org/2000/svg">   <rect x="0" y="0" width="610" height="400" fill="#999999" />   <g transform="translate(5,5)">      <rect x="0" y="0" width="300" height="200" fill="#FFFFFF" />      <circle cx="150" cy="100" r="60" fill="#FF0000" />   </g> </svg>

アイルランド ポイもの

<svg width="310" height="210" xmlns="http://www.w3.org/2000/svg">   <rect x="0" y="0" width="310" height="210" fill="#999999" />   <g transform="translate(5,5)">     <rect x="0" y="0" width="100" height="200" fill="#169b62" />     <rect x="100" y="0" width="100" height="200" fill="#FFFFFF" />     <rect x="200" y="0" width="100" height="200" fill="#ff8832" />   </g> </svg>

クウェート ポイもの

<svg width="310" height="210" xmlns="http://www.w3.org/2000/svg">   <rect x="0" y="0" width="310" height="210" fill="#999999" />   <g transform="translate(5,5)">     <rect x="0" y="0" width="300" height="67" fill="#308060" />     <rect x="0" y="67" width="300" height="67" fill="#FFFFFF" />     <rect x="0" y="133" width="300" height="67" fill="rgb(200,0,0)" />     <polygon points="0,0 60,67 60,133 0,200" fill="#000000" />   </g> </svg>

コンゴ ポイもの

<svg width="310" height="210" xmlns="http://www.w3.org/2000/svg">   <rect x="0" y="0" width="310" height="210" fill="#999999" />   <g transform="translate(5,5)">     <polygon points="0,0 200,0 0,200" fill="#30a060" />     <polygon points="200,0 0,200 100,200 300,0" fill="#EFEF00" />     <polygon points="300,0 100,200 300,200" fill="#FF0000" />   </g> </svg>

ベトナム ポイもの

<svg width="310" height="210" xmlns="http://www.w3.org/2000/svg">   <rect x="0" y="0" width="310" height="210" fill="#999999" />   <g transform="translate(5,5)">     <rect x="0" y="0" width="300" height="200" fill="#DD0000" />     <g transform="translate(150,100) rotate(36 0 0)">       <polygon points="         0,50 11.75,16.18 47.55,15.45 19.02,-6.18         29.38,-40.45 0.34,-19.99 -29.38,-40.45         -19.02,-6.18 -47.55,15.45 -11.75,16.18 -0.87,49.99"        fill="#FFFF00" />     </g>   </g> </svg>

ポイント！

基本事項なんでしょうが、最低限以下は覚える必要がありそう。

• rect,circle,g,polygonのタグ。そして今回は使わなかったlineタグ。
  特にgタグのtransformで基準座標を変更するのは多用したので、
  大事な知識と思いました。
• 後から記述したものがレイヤーとして上に描画される。

そして多分数学知識、今回は原則ライブラリは使用しない縛りだったので、
ベトナムっぽいものの星はエクセルで座標計算したものを流用していますが、
この座標手で求めるのもライブラリ使うにも基本の数学は必要かなと・・・。
高校数学？かな。

終わりに

今回はSVGで国旗を描いてみました。
題材の国旗を調べるにあたって　ウィキペディアの国旗の一覧を参考にしたのですが、
実は、この記事に掲載されている国旗自体がSVGで作成されていたりしました。
気が付いたとき、ソースを開いていたんですがすぐ閉じました。
修行にならないので。(笑)

次回はグラフを描いてみたいと思います。

参考になれば幸いです。

ご利用は自己責任で。