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
46

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
44
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
64
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
39
IE Classes
Avatar for Rachel Ober rachelober
0
46
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
39
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
69
Responsive Emails
Avatar for Rachel Ober rachelober
0
38
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
82
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
96

Other Decks in Programming

See All in Programming
REALITY コマンド作成チュートリアル
Avatar for にしうり らく nishiuriraku
0
120
Cloudflare Workersで進めるリモートMCP活用
Avatar for syumai syumai
5
650
カウシェで Four Keys の改善を試みた理由
Avatar for ike ike002jp
1
140
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
Avatar for Koki Senda thousanda
1
120
generative-ai-use-cases(GenU)の推しポイント ～2025年4月版～
Avatar for Hideyuki Nagata hideg
1
410
UMAPをざっくりと理解 / Overview of UMAP
Avatar for kaityo256 kaityo256
PRO
3
1.6k
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
Avatar for Ernest Chiang dwchiang
0
140
Orleans + Sekiban + SignalR でリアルタイムWeb作ってみた
Avatar for Tomohisa Takaoka tomohisa
0
250
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
Avatar for nrs nrslib
0
300
2025-04-25 GitHub Copilot Agent ライブデモ（スクリプト）
Avatar for GOAMI Takaaki goataka
0
120
開発者フレンドリーで顧客も満足？Platformの秘密
Avatar for ALGO ARTIS algoartis
0
230
KANNA Android の技術的課題と取り組み
Avatar for Yosuke Watanabe watabee
1
530

Featured

See All Featured
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.6k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
40
7.3k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
227
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
91
6k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
420
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
160
15k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.3k

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