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
82
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
67
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
86
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
62
IE Classes
Avatar for Rachel Ober rachelober
0
79
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
82
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
90
Responsive Emails
Avatar for Rachel Ober rachelober
0
57
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
110
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
130

Other Decks in Programming

See All in Programming
さぁV100、メモリをお食べ・・・
Avatar for nilpe nilpe
0
150
AI時代のUIはどこへ行く？その2！
Avatar for Yusuke Wada yusukebe
22
7.4k
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
Avatar for Yuku Kotani yukukotani
3
4.3k
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
13
6.3k
エージェンティックRAGにAWSで入門しよう！
Avatar for Har1101 har1101
8
1.7k
New "Type" system on PicoRuby
Avatar for pocke pocke
1
980
代数的データ型って何が嬉しいの？ #frontend_phpcon_do
Avatar for Takuma Kajikawa kajitack
8
3.7k
A2UI という光を覗いてみる
Avatar for SatohJohn satohjohn
1
140
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
370
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
Avatar for Estela Franco guaca
0
190
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
550
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
Avatar for Manfred Steyer manfredsteyer
PRO
0
160

Featured

See All Featured
エンジニアに許された特別な時間の終わり
Avatar for watany watany
107
250k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
610
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.1k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
140
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
210
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
620
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
170
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.5k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6k

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