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
75
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
81
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
59
IE Classes
Avatar for Rachel Ober rachelober
0
67
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
72
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
88
Responsive Emails
Avatar for Rachel Ober rachelober
0
53
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
「OSSがあるなら自作するな」は AI時代も正しいか ── Build vs Adopt の新しい判断基準
Avatar for Kumo Ishikawa kumorn5s
4
1.4k
Kingdom of the Machine
Avatar for yui-knk yui_knk
2
1.4k
How We Benchmarked Quarkus: Patterns and anti-patterns
Avatar for Holly Cummins hollycummins
1
180
cloudnative conference 2026 flyle
Avatar for azihsoyn azihsoyn
0
110
Claude Code × Gemini × Ebitengine ゲーム制作素人WebエンジニアがGoでゲームを作った話
Avatar for webzawa webzawa
0
220
運転動画を検索可能にする〜Cosmos-Embed1とDatabricks Vector Searchで〜/cosmos-embed1-databricks-vector-search
Avatar for 開発室Graph studio_graph
1
650
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
Avatar for ShoheiMitani shoheimitani
4
970
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
Avatar for Kiichi Sugihara kiichisugihara
1
260
My daily life on Ruby
Avatar for Akira Matsuda a_matsuda
3
180
セグメントとターゲットを意識するプロポーザルの書き方 〜採択の鍵は、誰に刺すかを見極めるマーケティング戦略にある〜
Avatar for memory m3m0r7
PRO
0
750
20260514_its_the_context_window_stupid.pdf
Avatar for heita heita
0
430
20260514 - build with ai 2026 - build LINE Bot with Gemini CLI
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
250

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.4k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.1k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
49k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
55k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
160
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
180
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.5k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k

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