Upgrade to Pro — share decks privately, control downloads, hide ads and more …

いまどきのSVG

Avatar for hashrock hashrock
November 18, 2013
Technology
1
270

 いまどきのSVG

そろそろ使おうSVG。LazynightでLTしたもの

Avatar for hashrock

hashrock

November 18, 2013
Tweet

More Decks by hashrock

See All by hashrock
8分でわかるVue.js
Avatar for hashrock hashrock
3
4.7k
CSS知らなかったこと
Avatar for hashrock hashrock
1
220
これだけ覚える CSS3 アニメーション
Avatar for hashrock hashrock
1
400

Other Decks in Technology

See All in Technology
エンタープライズ企業における開発効率化のためのコンテキスト設計とその活用
Avatar for sergicalsix sergicalsix
1
360
明日から真似してOk！NOT A HOTELで実践している入社手続きの自動化
Avatar for kajinari nkajihara
1
100
ステートレスなLLMでステートフルなAI agentを作る - YAPC::Fukuoka 2025
Avatar for FUJI Goro gfx
6
850
なぜインフラコードのモジュール化は難しいのか - アプリケーションコードとの本質的な違いから考える
Avatar for Gosuke Miyashita mizzy
47
13k
AWS資格は取ったけどIAMロールを腹落ちできてなかったので、年内に整理してみた
Avatar for Hiroto hiro_eng_
0
210
AIエージェントは「使う」だけじゃなくて「作る」時代！ 〜最新フレームワークで楽しく開発入門しよう〜
Avatar for みのるん minorun365
11
1.6k
Pythonで構築する全国市町村ナレッジグラフ: GraphRAGを用いた意味的地域検索への応用
Avatar for negi111111 negi111111
8
3.4k
“それなりに”安全なWebアプリケーションの作り方
Avatar for Ryusei Ishikawa xryuseix
0
300
Amazon ECS デプロイツール ecspresso の開発を支える「正しい抽象化」の探求 / YAPC::Fukuoka 2025
Avatar for FUJIWARA Shunichiro fujiwara3
11
1.9k
マイクロリブート ~ACEマインドセットで実現するアジャイル~
Avatar for ソニー株式会社 sony
0
280
エンジニアに定年なし！ AI時代にキャリアをReboot — 学び続けて未来を創る
Avatar for JunjiKoide junjikoide
0
180
CloudFormationコンソールから、 実際に作られたリソースを辿れるようになろう！
Avatar for amixedcolor amixedcolor
1
170

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.3k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.2k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k

Transcript

  1. ͍·Ͳ͖ͷSVG 13೥11݄18೔݄༵೔

  2. SVGͱ͸ • Scalable Vector Graphics • ֦େՄೳͳϕΫλάϥϑΟοΫε • 2001೥ʹW3Cඪ४ͱͳΔ •

    ௕͍͜ͱ࢖ΘΕͳ͍ࢠ(ݹ͍IE͕ରԠͤͣ) 13೥11݄18೔݄༵೔

  3. ͳ͔ͥ • ॏ͍ʢඳը͕ʣ http://codepen.io/adrianosmond/pen/LCogn • ରԠϒϥ΢βগͳ͍ • ࢓༷ʹϑϧରԠͨ͠ΤσΟλͳ͠ • ͜Ε͸ࠓ΋

    13೥11݄18೔݄༵೔

  4. 13೥11݄18೔݄༵೔

  5. ͳͥࠓSVG͔ • XML • DOM͔ΒฤूՄೳʢAJAX࢖͑Δʣ • ࣗવͱRetinaରԠ 13೥11݄18೔݄༵೔

  6. ࠓSVG͕೤͍ • Snap.svg (http://snapsvg.io/) • d3.js (http://d3js.org/) 13೥11݄18೔݄༵೔

  7. ࡞Γํ • Inkscape(Ұ୒) • खܰʹ΍ΔͳΒSVG-Edit • https://code.google.com/p/svg-edit/ 13೥11݄18೔݄༵೔

  8. ࢖͍ํ • HTMLʹ௚ຒΊࠐΈ • SVGeneration (http://svgeneration.com/) 13೥11݄18೔݄༵೔

  9. ·ͱΊ • iOS޲͚ʹ͸طʹ࢖͑Δٕज़ • ࡞Δͷ͕·ͩେม • d3Λ͸͡Ίͱͯ͠ɺ কདྷଟ༻͞ΕΔՄೳੑ͋Γ ͦΖͦΖ࢖͍࢝Ί͓ͯ͘ͱ٢ 13೥11݄18೔݄༵೔