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

What I Learned About SVG

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Rachel Ober Rachel Ober
February 21, 2014
Programming
0
71

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
62
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
76
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
55
IE Classes
Avatar for Rachel Ober rachelober
0
56
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
63
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
85
Responsive Emails
Avatar for Rachel Ober rachelober
0
49
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
96
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
120

Other Decks in Programming

See All in Programming
Coding at the Speed of Thought: The New Era of Symfony Docker
Avatar for Kévin Dunglas dunglas
0
3.4k
AI時代のシステム設計：ドメインモデルで変更しやすさを守る設計戦略
Avatar for 増田 亨 masuda220
PRO
6
1.1k
おれのAgentic Coding 2026/03
Avatar for TsukasaSekiguchi tsukasagr
1
120
へんな働き方
Avatar for Yusuke Wada yusukebe
6
2.9k
20260315 AWSなんもわからん🥲
Avatar for Chiaki Okamoto chiilog
2
180
ローカルで稼働する AI エージェントを超えて / beyond-local-ai-agents
Avatar for geeawa gawa
1
190
OTP を自動で入力する裏技
Avatar for Megabits_mzq megabitsenmzq
0
130
Nuxt Server Components
Avatar for wattanx wattanx
0
210
「速くなった気がする」をデータで疑う
Avatar for Leaf senleaf24
0
110
最初からAWS CDKで技術検証してもいいんじゃない？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
4
180
AIと共にエンジニアとPMの “二刀流”を実現する
Avatar for Naruo Yoshiki naruogram
0
110
PHPで TLSのプロトコルを実装してみる
Avatar for higaki higaki_program
0
590

Featured

See All Featured
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
94
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
860
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
140
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
340
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.8k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.1k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
91

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