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

いまどきのSVG

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for hashrock hashrock
November 18, 2013
Technology
270
1

 いまどきのSVG

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

Avatar for hashrock

hashrock

November 18, 2013

More Decks by hashrock

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

Other Decks in Technology

See All in Technology
AI前提とはどういうことか
Avatar for どすこい daisuketakeda
0
110
OCI技術資料 : ロード・バランサ 概要 - FLB・NLB共通
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
4
27k
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
62k
互換性のある（らしい）DBへの移行など考えるにあたってたいへんざっくり
Avatar for Takanori Sejima sejima
PRO
0
550
本番環境でPHPコードに触れずに「使われていないコード」を調べるにはどうしたらよいか？
Avatar for Sohei Iwahori egmc
1
140
ハーネスエンジニアリング×AI適応開発
Avatar for Ryohei Kamiya aictokamiya
3
1.5k
今年60歳のおっさんCBになる
Avatar for Hiroo Katoh kentapapa
1
180
JSTQB Expert Levelシラバス 「テストマネジメント」日本語版のご紹介
Avatar for ymty ymty
0
130
2026-04-02 IBM Bobオンボーディング入門
Avatar for YutaNonaka yutanonaka
0
220
40代からのアウトプット ― 経験は価値ある学びに変わる / 20260404 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
5
840
Strands Agents × Amazon Bedrock AgentCoreで パーソナルAIエージェントを作ろう
Avatar for yoko / Naoki Yokomachi yokomachi
2
170
【PHPカンファレンス小田原2026】Webアプリケーションエンジニアにも知ってほしい オブザーバビリティ の本質
Avatar for Futoshi Endo fendo181
0
200

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
310
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
340
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
100
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
560
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
470
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
95

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