Skip to content

Instantly share code, notes, and snippets.

@hakatashi hakatashi/sig-web-13.md
Last active Nov 30, 2016

Embed
What would you like to do?
TSG 第13回Web分科会 カンペ

TSG 第13回Web分科会 カンペ

SVGとそれに関連する各種技術について学ぶ。

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">
  <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などのブラウザがオススメ)で開いて、以下のように表示されれば成功。

SVGとは

Scalable Vector Graphics の略。現代においてベクター形式の画像データを表現するファイル形式のうち、最も広く使われているものである。

そもそも画像データには大別すると以下の2つの形式がある。

  • ラスター画像(ビットマップ画像): 画像データをピクセルとして保持する
  • ベクター画像: 画像データを表現したいモノの位置や形の情報として保持する

SVGは2016年現在において最も広く使われているベクター画像のフォーマットであり、Webとも深い関わりがある。

ちなみに、SVG以外のベクター画像フォーマットには以下のようなものがある。

  • EPS: 今でもLaTeX界隈ではよく使われる。
  • AI: Adobe Illustrator の保存フォーマット。プロプライエタリ。
  • PostScript: ある意味ではベクター画像フォーマット。プリンタでの利用から発展して、PDFやフォントなどの内部表現で広く用いられる。

SVGの特徴

  • オープンスタンダード
  • XMLベース
  • 多機能(アニメーション・インタラクション・内部定義フォントなど)

Web上での利用

SVGはWebにおいて、PNGやJPEGなどと同じように画像データとして扱うことができる。

SVGはPNGやJPEGなどのラスター画像とくらべて、以下のような利点がある。

  • スマホなどの高解像度デバイスでも綺麗に画像を表示できる
  • 単純な図形で構成された画像の場合、PNGなどよりもファイルサイズが小さくなる

MNEMOでは背景画像やクリア後の「CLEAR!」という文字などでSVGを使用している。

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にfilltext-anchorのような属性はない)。

HTML5のインラインSVG

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

インラインSVGを扱うためのライブラリ

JS界隈にはインラインSVGを利用した様々なライブラリが存在する。

Snap.svg

Adobeが開発しているライブラリ。単純なAPIでSVGを描いたり動かしたりできる。

博多市が一昨年の駒場祭で展示したyayanaruはSnap.svgを使用している。

D3.js

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 が中心の座標を指すようになる。

余力があったら

  • 弾の形を三角にしてみる。
    • 回転めんどくさそう
  • 別の弾幕を実装する
  • そのほかいろいろ
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.