svgで遊んでみた話
1 like1,351 views
とちゅうのモザイクの部分は、svgで実装したslideのなかにtwitterのTLが見れてつぶやけるようになってましたが、プライバシーの関係でモザイクかけました,
![HH MM: :SS
Who are you?
こく cocu
@cocu_628496
typowriter.org
情報科学類(coins)(esysLTへの刺客)
ｳｪｯﾌﾞ屋さん
Python, ArchLinux
[SVG おふとん]で検索](https://image.slidesharecdn.com/index-140430052830-phpapp02/85/svg-4-320.jpg)
svgで遊んでみた話
- 3. HH MM: :SS Who are you?
- 4. HH MM: :SS Who are you? こく cocu @cocu_628496 typowriter.org 情報科学類(coins)(esysLTへの刺客) ｳｪｯﾌﾞ屋さん Python, ArchLinux [SVG おふとん]で検索
- 5. HH MM: :SS SVGなLT 3回連続なう klisLT と coinsの新歓LT と esysLT で 全部同じSVGネタ もうみんなきっと飽きてるよ！
- 6. HH MM: :SS ＿⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈＿ ＞ 筑波のSVGおじさんになる＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣ </雑談> <本題> SVGをもっと布教して… 私は…
- 7. HH MM: :SS What is SVG? Scalable Vector Graphics 拡大縮⼩可能なベクター画像形式 <svg xmlns="http://www.w3.org/2000/svg"> <circle r="100" fill="red"/> </svg>
- 8. HH MM: :SS ボケる人 ボケない人
- 9. HH MM: :SS Where is SVG used. icon
- 10. HH MM: :SS Where is SVG used. Web(ブラウザで閲覧可) グラフ フォント(svg�font) デザイン(ｲｹﾒｿｻｲﾄ) ちなみにこのスライドもSVG 可視化(d3.js)
- 11. HH MM: :SS
- 12. HH MM: :SS
- 13. HH MM: :SS What can SVG do? -javascriptが動かせる画像形式 -cssが使える画像形式 -xslが使える画像形式 -アニメーションもUIも(⼀応)できる ( ´◔ ‸◔`)こいつ本当に画像か？
- 16. HH MM: :SS まだまだこれから ₍₍ ◝('ω'◝) ⁾⁾ ₍₍ (◟'ω')◟ ⁾⁾
- 17. HH MM: :SS Violent SVG without Javascript ぐりぐり動かす!
- 18. HH MM: :SS <animateTransform aributeName="transform" type="rotate"/> Violent SVG without Javascript
- 19. HH MM: :SS ₍₍ (ง ˙ω˙)ว ⁾⁾ようやく体が暖かくなったゾ
- 20. HH MM: :SS Violent SVG with Javascript
- 21. HH MM: :SS やってること 3次元空間 個々の点の軌道は手計算(20時間ぐらい) 直行基底ベクトル変換 即席自前ライブラリ SVGに描画 2次元空間 詳しいことは「SVG 書き初め」で検索
- 23. HH MM: :SS Violent SVG with Javascript 私「svgでtwitter client 作れるんじゃね?」 今朝(徹夜)の私の突然の思いつき
- 24. HH MM: :SS Violent SVG with Javascript 作った・ω・
- 26. HH MM: :SS Violent SVG with Javascript UserStraem APItornado (Python) this slide (SVG) WebSocket SVGを画像形式とか 言ったやつ〜 ほぼHTMLやないけ〜 ちなみにXSS脆弱性あります
- 29. HH MM: :SS gooood points of SVG. -拡大しても綺麗 -htmlとの親和性高し -Flashなしで自由度の高いデザイン -低容量なので移動中でも高速に読み込み canvasに重ねがけして使い分ける SVGはクリックしたオブジェクトがわかるのでUI向き AndroidでもiOSでもWinでもMacでもLinuxでも… Retina, スマホ対応のために
- 30. HH MM: :SS SPAM points of SVG. -複雑だとレンダリングに時間がかかる -究極のノウハウ不足 -javscriptが動くため、XSSの危険がある -ブラウザ(のバージョン)によって挙動が違う 日本でSVG手書きする人材が私の知る限り片手で数えられる lessのような上位言語やｲｹﾒｿﾂｰﾙがない(作るつもり) セキュリティの不安要素、<img>とかCSPとか使うと安心 普通に使えば問題ない、凝るとCSS3並 （☝ ՞ਊ ՞）☝IE IE IE IE IE IE IE IE chrome chrome firefox firefox opera saf(ry