おふとんから眺めるSVG

#
おふとん
から
眺める
SVG
(:3[※※]

#
あんただれ
こく
筑波大学情報科学類
Webっぽい感じの人
@cocu_628496
typowriter.org
「おふとん svg」でググる
おふとんクラスタ

#
What is SVG?
スケーラブルなベクターグラフィックス
拡大しても綺麗な画像形式

#
ボケないSVG
-retinaやスマホへの対応
にゅっと拡大 → ぼけてる(´・ω・｀)
-ファイルサイズ削減
移動中でもさくさくと

#
SVGを使っているところ

#
SVGを使っているところ
-アイコン、logoなど
-グラフ
-フォント(svg font)
おふとん

#
htmlに組み込む
<img src="wo-class.svg"/>
<object data="wo-class.svg"/>
→静的なsvg向け(iconとか)
→動的なsvg向け(ぐりぐり動く系)

#
inline svg (html5)
<html>
<body>
<svg>
<circle r="100" ﬁll="red"/>
</svg>
</body>
</html>

#
htmlにも埋め込める
ブラウザでも使える
めっちゃ楽しい!!!!٩( 'ω' )‫و‬

#
( ˘⊖˘) 。o(でも、SVGって動かないの…?)
( ◠‿◠ )☛それグリグリ動かせるぞ
▒▓█▇▅▂٩( 'ω' )‫▒▓█▇▅▂و‬

#
SVGはグリグリ動かせる!!!
-アニメーションができる

#
transform rotate(no javascript)

#
SVGはグリグリ動かせる!!!
-アニメーションができる
-javascriptが動く

#
javascriptでぐりぐり動かす!!!
- 手書きでゴリゴリ

#
javascriptでぐりぐり動かす!!!
- d3.js, raphael.js, snap.js

#
SVGってどうやって作るの?
-SVG職人が一行一行手書き
-inkscape
-Adobe Illustrator
-javascriptで生成しちゃう

#
XSSもできてしまう!!!
<svg>
　<circle r="100" ﬁll="red"/>
　<script>alert('Hacked!!')</script>
</svg>
→セキュリティが少しこわい
→画像というよりhtmlの気分で扱う

#
伝えたかったこと
・SVGという画像形式が存在する
・ブラウザで見ることができる
・可視化が楽しい!!!
SVG楽しい
✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌

Recommended