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

What I Learned About SVG

Avatar for Rachel Ober Rachel Ober
February 21, 2014
Programming
0
50

What I Learned About SVG

Avatar for Rachel Ober

Rachel Ober

February 21, 2014
Tweet

More Decks by Rachel Ober

See All by Rachel Ober
So, You Want to Organize a Conference
Avatar for Rachel Ober rachelober
0
51
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
67
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
47
IE Classes
Avatar for Rachel Ober rachelober
0
49
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
46
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
74
Responsive Emails
Avatar for Rachel Ober rachelober
0
41
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
89
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
100

Other Decks in Programming

See All in Programming
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
Avatar for nrs nrslib
7
3.9k
iOSエンジニア向けの英語学習アプリを作る！
Avatar for yukawashouhei yukawashouhei
0
180
Pythonスレッドとは結局何なのか？ CPython実装から見るNoGIL時代の変化
Avatar for curekoshimizu curekoshimizu
4
1.3k
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
Avatar for Yunosuke Sakai ski
0
350
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
Avatar for Shia riseshia
0
150
Back to the Future: Let me tell you about the ACP protocol
Avatar for Benedikt Terhechte terhechte
0
130
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう！ #FEC余熱NIGHT
Avatar for Masayuki Izumi izumin5210
3
410
Serena MCPのすすめ
Avatar for wadakatu wadakatu
4
900
クラシルを支える技術と組織
Avatar for raku rakutek
0
190
『毎日の移動』を支えるGoバックエンド内製開発
Avatar for yutautsugi yutautsugi
2
200
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
Avatar for ukitaka ukitaka
0
400
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
140

Featured

See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
9
580
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.8k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k

Transcript

  1. What I learned about SVG In 5 minutes or less

  2. Scalable Vector Graphics

  3. Goal: Provide both a retina and non-retina solution for our

    graphic needs.
  4. None

  5. Product Design

  6. None

  7. 120 Lines of Code

  8. 120 Lines of Code - 11KB

  9. 96 Lines of Code - 9KB

  10. 96 Lines of Code - 9KB

  11. None

  12. 5 Paths - 8KB

  13. 5 Paths - 8KB dramatization of actual events

  14. #svg-full-logo { height: 26px; width: 49px; path { fill: #777;

    } } To Manipulate Inline SVG with CSS
  15. None
  16. None

  17. 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