SVGとそれに関連する各種技術について学ぶ。
するほどのものでもないかもしれないけど、いちおう伝統として。
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="saddlebrown"/>
<text x="50" y="50" text-anchor="middle" alignment-baseline="middle" font-family="sans-serif" font-size="15" fill="white">
Hello, World!
</text>
</svg>適当なSVGビューア(Chromeなどのブラウザがオススメ)で開いて、以下のように表示されれば成功。
Scalable Vector Graphics の略。現代においてベクター形式の画像データを表現するファイル形式のうち、最も広く使われているものである。
そもそも画像データには大別すると以下の2つの形式がある。
- ラスター画像(ビットマップ画像): 画像データをピクセルとして保持する
- ベクター画像: 画像データを表現したいモノの位置や形の情報として保持する
SVGは2016年現在において最も広く使われているベクター画像のフォーマットであり、Webとも深い関わりがある。
ちなみに、SVG以外のベクター画像フォーマットには以下のようなものがある。
- EPS: 今でもLaTeX界隈ではよく使われる。
- AI: Adobe Illustrator の保存フォーマット。プロプライエタリ。
- PostScript: ある意味ではベクター画像フォーマット。プリンタでの利用から発展して、PDFやフォントなどの内部表現で広く用いられる。
- オープンスタンダード
- XMLベース
- 多機能(アニメーション・インタラクション・内部定義フォントなど)
SVGはWebにおいて、PNGやJPEGなどと同じように画像データとして扱うことができる。
SVGはPNGやJPEGなどのラスター画像とくらべて、以下のような利点がある。
- スマホなどの高解像度デバイスでも綺麗に画像を表示できる
- 単純な図形で構成された画像の場合、PNGなどよりもファイルサイズが小さくなる
MNEMOでは背景画像やクリア後の「CLEAR!」という文字などでSVGを使用している。
以下のサイトが参考になる。
http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html
以下補足。
SVGではHTMLと同じようにstyle要素でスタイルシートを記述できる。
先ほどの Hello, World! は以下のようにも記述できる。
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 100 100">
<style>
.rect {
width: 100px;
height: 100px;
fill: saddlebrown;
}
.text {
text-anchor: middle;
alignment-baseline: middle;
font-family: sans-serif;
font-size: 15px;
fill: white;
}
</style>
<rect class="rect" x="0" y="0"/>
<text class="text" x="50" y="50">
Hello, World!
</text>
</svg>ただし、SVGのCSSはHTMLのCSSとは別物なので注意(HTMLのCSSにfillやtext-anchorのような属性はない)。
WebとSVGの関係を語る上で欠かせないのが、インラインSVGの存在である。
HTML5では、外部リンクなどではなく直接HTML内にSVG要素を埋め込むことができる。
<!DOCTYPE html>
<html>
<head>
<title>Inline SVG in HTML</title>
<style>
.rect {
width: 100px;
height: 100px;
fill: saddlebrown;
}
.text {
text-anchor: middle;
alignment-baseline: middle;
font-family: sans-serif;
font-size: 15px;
fill: white;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 100 100">
<rect class="rect" x="0" y="0"/>
<text class="text" x="50" y="50">
Hello, World!
</text>
</svg>
</body>
</html>これにより、JavaScriptからDOMを通して直接SVGの要素を操作することができるようになった。
ほげ
http://www.slideshare.net/ssuser99dc16/html5fun-svg-accessibility
JS界隈にはインラインSVGを利用した様々なライブラリが存在する。
Adobeが開発しているライブラリ。単純なAPIでSVGを描いたり動かしたりできる。
博多市が一昨年の駒場祭で展示したyayanaruはSnap.svgを使用している。
SVGを用いたデータ可視化ライブラリ。D3とは Data-Driven Documents の略。
博多市が制作した艦娘沼マップはD3.jsを使用している。
- SVG.js
- vis.js
- anime.js
Snap.svgを用いて簡単なシューティングゲームを実装しよう。
https://gist.github.com/hakatashi/4758a05502fec1da8ed2cf7a77e4862e
- Snap.svgのドキュメント
- 自機の大きさは5x5px, 弾の半径は1px, Game Over のフォントサイズは15pxである。
- 自機のtransformをtranslate(-2.5, -2.5)に設定すると x, y が中心の座標を指すようになる。
- 弾の形を三角にしてみる。
- 回転めんどくさそう
- 別の弾幕を実装する
- そのほかいろいろ