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
0
49

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
51
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
67
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
47
IE Classes
Avatar for Rachel Ober rachelober
0
49
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
46
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
73
Responsive Emails
Avatar for Rachel Ober rachelober
0
41
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
89
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
100

Other Decks in Programming

See All in Programming
時間軸から考えるTerraformを使う理由と留意点
Avatar for Ryoma Fujiwara fufuhu
16
4.8k
楽して成果を出すためのセルフリソース管理
Avatar for clipnote clipnote
0
190
Navigation 2 を 3 に移行する（予定）ためにやったこと
Avatar for yokomii yokomii
0
350
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
Avatar for Daichi Takeya taked137
0
190
個人軟體時代
Avatar for Ethan Huang ethanhuang13
0
330
機能追加とリーダー業務の類似性
Avatar for Rinchoku rinchoku
2
1.3k
ファインディ株式会社におけるMCP活用とサービス開発
Avatar for starfish719 starfish719
0
2.1k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
Avatar for Takeshi Hagikura thagikura
0
170
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
Avatar for Takahashi Ikki takahashiikki
1
120
個人開発で徳島大学生60％以上の心を掴んだアプリ、そして手放した話
Avatar for akidon0000 akidon0000
1
150
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
420
Azure SRE Agentで運用は楽になるのか？
Avatar for KAMEGAWA Kazushi kkamegawa
0
2.5k

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.9k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
74
5k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
26
1.9k

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