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
43
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
43
Front End Workshop 2015
rachelober
0
63
Front End Overview for Interns 2015
rachelober
1
38
IE Classes
rachelober
0
44
Front End Overview (2014)
rachelober
0
38
Team Communication Through Code
rachelober
0
68
Responsive Emails
rachelober
0
37
Paperless Post Sass
rachelober
1
79
SassConf Custom Framework/Style Guide Panel
rachelober
0
95
Other Decks in Programming
See All in Programming
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
技術を根付かせる / How to make technology take root
kubode
1
240
Immutable ActiveRecord
megane42
0
130
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
Writing documentation can be fun with plugin system
okuramasafumi
0
120
『品質』という言葉が嫌いな理由
korimu
0
160
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Facilitating Awesome Meetings
lara
51
6.2k
How to Ace a Technical Interview
jacobian
276
23k
Code Review Best Practice
trishagee
66
17k
The Cult of Friendly URLs
andyhume
78
6.2k
Become a Pro
speakerdeck
PRO
26
5.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing for Performance
lara
604
68k
The Language of Interfaces
destraynor
156
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
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