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
49

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
45
IE Classes
Avatar for Rachel Ober rachelober
0
47
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
45
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
72
Responsive Emails
Avatar for Rachel Ober rachelober
0
40
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
iOS 26にアップデートすると実機でのHot Reloadができない？
Avatar for Aoi Umigishi umigishiaoi
0
130
LT 2025-06-30: プロダクトエンジニアの役割
Avatar for Keisuke Yamamoto yamamotok
0
780
Is Xcode slowly dying out in 2025?
Avatar for 上ちょ / uetyo uetyo
1
280
Team operations that are not burdened by SRE
Avatar for zosokh kazatohiei
1
310
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
Avatar for Yuichi Maekawa kaelaela
10
5.7k
PicoRuby on Rails
Avatar for makicamel makicamel
2
130
AI時代のソフトウェア開発を考える（2025/07版） / Agentic Software Engineering Findy 2025-07 Edition
Avatar for Takuto Wada twada
PRO
91
30k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
おやつのお供はお決まりですか？@WWDC25 Recap -Japan-\(region).swift
Avatar for gangan shingangan
0
140
「Cursor/Devin全社導入の理想と現実」のその後
Avatar for Ryoichi Saito saitoryc
0
830
型で語るカタ
Avatar for irof irof
0
130

Featured

See All Featured
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k

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