SVGについて
スマホの普及などにより再注目されているSVG形式について授業で習ったのでまとめます。
Illustratorで描いてSVGで保存すれば一応SVGファイルは作れますが、余分なコードがたくさん出てきます。なのでここでは直接テキストでHTMLファイルに記述していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG</title> <style> svg { background-color: #ddd; } </style> </head> <body> <svg id="svg01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 300 300" version="1.1"> <defs><!-- symbolをdefsで囲むと画面に描画されない --> <symbol id="lamp"><!-- symbol要素で使いまわすことが簡単になる --> <circle cx="100" cy="200" r="40" /> </symbol> </defs> <rect x="100" y="200" width="300" height="100" rx="50" ry="50" fill="#fff" stroke="#000" stroke-width="5" /> <use xlink:href="#lamp" x="150" y="50" fill="rgba(255,255,0,1)" fill="#fff" stroke="#000" stroke-width="5" /> <use xlink:href="#lamp" x="60" y="50" fill="rgba(0,0,255,1)" fill="#fff" stroke="#000" stroke-width="5" /> <use xlink:href="#lamp" x="240" y="50" fill="rgba(255,0,0,1)" fill="#fff" stroke="#000" stroke-width="5" /> </svg> </body> </html> |
信号機を描くコードをサンプルとして載せました。
ぞれぞれ解説します。
SVGは要素なので、CSSで背景の色を指定できます。今回はわかりやすいようにグレーにしました。
xmlns属性とxmlns:xlink属性は必ず書きましょう。今後バージョンが上がる可能性もあるのでバージョンも書いておいた方が無難です。このSVG要素の中に信号機の丸や矩形(四角形)を書いていきます。
defs要素は画面上には出ませんが、中にある図形を定義しています。symbol要素で囲んである部分がひとつの図形です。
circleは文字通り丸を書いています。cxが原点(左上)からのX軸の距離、cyが原点からのY軸の距離です。rは半径です。信号機を描く場合、丸は使いまわす方が楽なのでシンボル要素で囲んでいます。
rectは矩形(四角形)です。信号機は正確には角丸の四角形なのでrxとry横と縦の半径を指定しています。
symbolを使いまわすにはuse要素を使います。symbol要素に付けたID名を付けることで使いまわすことができ、ここでfill(塗りの色)やstroke(線の色)、stroke-width(線の太さ)を書くことでいろんな丸を描けます。色は真ん中が黄色、左が青、右が赤です。use要素のxとyは原点からではなく元のsymbolのcxとcyからの位置ですので気を付けましょう。
次はSVGでローディングアニメーションについて書きます。