Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

いまどきの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
Power of Kiro : あなたの㌔はパワステ搭載ですか？
Avatar for r3_yamauchi r3_yamauchi
PRO
0
150
Gemini でコードレビュー知見を見える化
Avatar for ZOZO Developers zozotech
PRO
1
260
因果AIへの招待
Avatar for Shohei SHIMIZU sshimizu2006
0
980
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
Avatar for Satoshi Kobayashi scova0731
0
160
AWSを使う上で最低限知っておきたいセキュリティ研修を社内で実施した話 ~みんなでやるセキュリティ~
Avatar for maimyyym maimyyym
2
1.2k
意外とあった SQL Server 関連アップデート + Database Savings Plans
Avatar for Takuya Shibata stknohg
PRO
0
320
大企業でもできる！ボトムアップで拡大させるプラットフォームの作り方
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
1
770
品質のための共通認識
Avatar for KAKEHASHI kakehashi
PRO
3
260
LLM-Readyなデータ基盤を高速に構築するためのアジャイルデータモデリングの実例
Avatar for Kashira kashira
0
250
学習データって増やせばいいんですか？
Avatar for fumihiko takahashi ftakahashi
2
340
re:Invent2025 3つの Frontier Agents を紹介 / introducing-3-frontier-agents
Avatar for tomoki10 tomoki10
0
110
生成AI活用の型ハンズオン〜顧客課題起点で設計する7つのステップ
Avatar for Nakao Yushin yushin_n
0
180

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
39k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
730
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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೔݄༵೔