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
68

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
58
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
73
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
53
IE Classes
Avatar for Rachel Ober rachelober
0
54
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
61
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
85
Responsive Emails
Avatar for Rachel Ober rachelober
0
48
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
95
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
120

Other Decks in Programming

See All in Programming
モジュラモノリスにおける境界をGoのinternalパッケージで守る
Avatar for magavel magavel
0
3.5k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
370
TipKitTips
Avatar for Ryomm ktcryomm
0
160
Claude Code Skill入門
Avatar for maya mayahoney
0
130
「やめとこ」がなくなった — 1月にZennを始めて22本書いた AI共創開発のリアル
Avatar for atani atani14
0
370
API Platformを活用したPHPによる本格的なWeb API開発 / api-platform-book-intro
Avatar for Takashi Kanemoto ttskch
1
130
CDIの誤解しがちな仕様とその対処TIPS
Avatar for futokiyo futokiyo
0
190
NOT A HOTEL - 建築や人と融合し、自由を創り出すソフトウェア
Avatar for Hokuto Shimokawa not_a_hokuts
2
950
RAGでハマりがちな"Excelの罠"を、データの構造化で突破する
Avatar for harumi harumiweb
9
2.7k
SourceGeneratorのマーカー属性問題について
Avatar for tkym htkym
0
180
エンジニアの「手元の自動化」を加速するn8n 2026.02.27
Avatar for 西尾義英 symy2co
0
120
AI Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
120

Featured

See All Featured
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
200
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.8k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
75
5.1k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
190
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.8k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.1k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
540

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