Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
What I Learned About SVG
Search
Rachel Ober
February 21, 2014
Programming
0
50
What I Learned About SVG
Rachel Ober
February 21, 2014
Tweet
Share
More Decks by Rachel Ober
See All by Rachel Ober
So, You Want to Organize a Conference
rachelober
0
52
Front End Workshop 2015
rachelober
0
67
Front End Overview for Interns 2015
rachelober
1
47
IE Classes
rachelober
0
49
Front End Overview (2014)
rachelober
0
46
Team Communication Through Code
rachelober
0
74
Responsive Emails
rachelober
0
41
Paperless Post Sass
rachelober
1
89
SassConf Custom Framework/Style Guide Panel
rachelober
0
100
Other Decks in Programming
See All in Programming
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
950
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
120
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
760
Cursorハンズオン実践!
eltociear
2
1.2k
モテるデスク環境
mozumasu
3
1.3k
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
440
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
380
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
870
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
Featured
See All Featured
Scaling GitHub
holman
463
140k
Fireside Chat
paigeccino
41
3.7k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Statistics for Hackers
jakevdp
799
220k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Building Applications with DynamoDB
mza
96
6.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Automating Front-end Workflow
addyosmani
1371
200k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
How to Ace a Technical Interview
jacobian
280
24k
Transcript
What I learned about SVG In 5 minutes or less
Scalable Vector Graphics
Goal: Provide both a retina and non-retina solution for our
graphic needs.
None
Product Design
None
120 Lines of Code
120 Lines of Code - 11KB
96 Lines of Code - 9KB
96 Lines of Code - 9KB
None
5 Paths - 8KB
5 Paths - 8KB dramatization of actual events
#svg-full-logo { height: 26px; width: 49px; path { fill: #777;
} } To Manipulate Inline SVG with CSS
None
None
Tips Tricks Gotchas • CSS can only be used on
an inline SVG, not an SVG embedded as an <img> • There’s a new Rails Helper for that! • Need to make sure it has a view port size • Add a class for each path/shape • Preferably add an id for the main SVG