Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What I Learned About SVG

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Rachel Ober Rachel Ober
February 21, 2014
Programming
0
66

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
56
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
71
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
51
IE Classes
Avatar for Rachel Ober rachelober
0
51
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
57
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
83
Responsive Emails
Avatar for Rachel Ober rachelober
0
45
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
93
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
110

Other Decks in Programming

See All in Programming
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
170
AIエージェントの設計で注意するべきポイント6選
Avatar for Har1101 har1101
7
3.3k
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
200
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
210
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
280
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
Avatar for Suhyeon Kim wisemuji
0
180
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
620
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
1.4k
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
5.9k
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
0
810
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1k
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
3.8k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
660
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
500
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k

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