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
52
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
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
470
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.6k
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.8k
Developer Joy - The New Paradigm
hollycummins
1
370
AI Agent 時代的開發者生存指南
eddie
4
2.2k
What's new in Spring Modulith?
olivergierke
1
170
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
210
品質ワークショップをやってみた
nealle
0
650
Leading Effective Engineering Teams in the AI Era
addyosmani
7
660
CSC509 Lecture 06
javiergs
PRO
0
270
Featured
See All Featured
Thoughts on Productivity
jonyablonski
71
4.9k
Why Our Code Smells
bkeepers
PRO
340
57k
Making Projects Easy
brettharned
120
6.4k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
130
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
660
How to Think Like a Performance Engineer
csswizardry
27
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Site-Speed That Sticks
csswizardry
13
930
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