Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

What I Learned About SVG

Avatar for Rachel Ober Rachel Ober
February 21, 2014
Programming
0
61

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
54
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
69
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
48
IE Classes
Avatar for Rachel Ober rachelober
0
50
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
53
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
79
Responsive Emails
Avatar for Rachel Ober rachelober
0
43
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
91
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
110

Other Decks in Programming

See All in Programming
Cell-Based Architecture
Avatar for Luram Archanjo larchanjo
0
120
これだけで丸わかり！LangChain v1.0 アップデートまとめ
Avatar for os1ma os1ma
6
1.8k
新卒エンジニアのプルリクエスト with AI駆動
Avatar for Yuta Fukunaga fukunaga2025
0
220
Findy AI+の開発、運用におけるMCP活用事例
Avatar for starfish719 starfish719
0
330
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
Avatar for mouson(墨嗓) mouson
0
160
AIエージェントを活かすPM術 AI駆動開発の現場から
Avatar for gyuta gyuta
0
410
S3 VectorsとStrands Agentsを利用したAgentic RAGシステムの構築
Avatar for とすり tosuri13
6
310
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
Avatar for matsu_chara matsu_chara
2
220
Github Copilotのチャット履歴ビューワーを作りました～WPF、dotnet10もあるよ～ #clrh111
Avatar for KatsuYuzu katsuyuzu
0
110
MAP, Jigsaw, Code Golf 振り返り会 by 関東Kaggler会|Jigsaw 15th Solution
Avatar for s.konishi hasibirok0
0
240
リリース時」テストから「デイリー実行」へ！開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
Avatar for goataka (GOAMI Takaaki) goataka
0
130
俺流レスポンシブコーディング 2025
Avatar for TAK tak_dcxi
14
8.7k

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
730
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
970
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.2k

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