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
Nuxt Server Components
Avatar for wattanx wattanx
0
270
3分でわかるatama plusのQA/about atama plus QA
Avatar for atama plus atamaplus
0
160
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
Avatar for JaiChangPark itsmedreamwalker
0
550
「効かない！」依存性注入（DI）を活用したAPI Platformのエラーハンドリング奮闘記
Avatar for Maki Hayashi mkmk884
1
330
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
Avatar for Marek Matulka super_marek
0
150
PCOVから学ぶコードカバレッジ #phpcon_odawara
Avatar for hideki kinjyo o0h
PRO
0
260
AI-DLC Deep Dive
Avatar for yuukiyo yuukiyo
8
3.3k
実用！Hono RPC2026
Avatar for yodaka yodaka
2
140
Codex CLIのSubagentsによる並列API実装 / Parallel API Implementation with Codex CLI Subagents
Avatar for 冨澤宝斗 takatty
2
910
t *testing.T は どこからやってくるの？
Avatar for Kotaro Otaka otakakot
0
490
KagglerがMixSeekを触ってみた
Avatar for Morim morim
0
380
JAWS-UG横浜 #100 祝・第100回スペシャル AWS は VPC レスの時代へ
Avatar for maroon1st maroon1st
0
120

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
160
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.5k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
110
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
110
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
950
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
370
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k

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