Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
90
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
73
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
97
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
70
IE Classes
Avatar for Rachel Ober rachelober
0
90
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
89
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
99
Responsive Emails
Avatar for Rachel Ober rachelober
0
68
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
120
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
140

Other Decks in Programming

See All in Programming
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
9
5.1k
海上で動くGoサーバー: goroutineとchannelでさばく航行データストリーム
Avatar for Atsuki Seo atsuki_seo
0
970
アクセシビリティから考える情報設計
Avatar for high-g high_g_engineer
0
420
ゲームコントローラやキーボードのファームウェアをSwiftで書く
Avatar for Kishikawa Katsumi kishikawakatsumi
1
260
AGENTS.md Is Not Enough: Build Skills, Don't Download Them
Avatar for Alex T lx_t
0
130
20260914 AIエージェント時代のPlatform Engineering　LLM基盤とプロダクトの責務境界線
Avatar for Taiki Kanzaki kanfab1
7
2.2k
新卒PdEのリアル
Avatar for ryu ryu1013
1
520
Security issues being discussed on Web Platforms
Avatar for petamoriken / 森建 petamoriken
0
1.3k
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.8k
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ！ ~
Avatar for po3rin po3rin
1
4.2k
難しいけど、読めた。- OSSの入口に立った話。
Avatar for shota sts11142
0
130
App Storeの外へ──日本のiOSサイドローディング入門 for iOSDC Japan 2026
Avatar for 野瀬田　裕樹 yuukiw00w
0
260

Featured

See All Featured
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.3k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
11k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
610
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.8k
Visualization
Avatar for Eitan Lees eitanlees
153
17k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
250
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k

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