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
74
0

What I Learned About SVG

Avatar for Rachel Ober

Rachel Ober

February 21, 2014

More Decks by Rachel Ober

See All by Rachel Ober
So, You Want to Organize a Conference
Avatar for Rachel Ober rachelober
0
65
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
80
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
59
IE Classes
Avatar for Rachel Ober rachelober
0
60
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
68
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
87
Responsive Emails
Avatar for Rachel Ober rachelober
0
52
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
100
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
130

Other Decks in Programming

See All in Programming
煩雑なSkills管理をSoC（関心の分離）により解決する――関心を分離し、プロンプトを部品として育てるためのOSSを作った話 / Solving Complex Skills Management Through SoC (Separation of Concerns)
Avatar for nrs nrslib
4
890
Radical Imagining - LIFT 2025-2027 Policy Agenda
Avatar for LIFT lift1998
0
290
VueエンジニアがReactを触って感じた_設計の違い
Avatar for kouki.miura koukimiura
0
170
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
Avatar for ShoheiMitani shoheimitani
4
780
飯MCP
Avatar for Yusuke Wada yusukebe
0
510
Running Swift without an OS
Avatar for Kishikawa Katsumi kishikawakatsumi
0
800
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
Avatar for hadashiA hadashia
1
260
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
Avatar for Rodrigo Serradura serradura
0
320
iOS機能開発のAI環境と起きた変化
Avatar for Ryu-nakayama ryunakayama
0
180
ふりがな Deep Dive try! Swift Tokyo 2026
Avatar for watura watura
0
210
AWS re：Invent 2025の少し振り返り ＋ DevOps AgentとBacklogを連携させてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
3
160
의존성 주입과 모듈화
Avatar for Sungyong An fornewid
0
130

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
180
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
100
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
220
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.5k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
170
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
740
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
260
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k

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