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
80
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
66
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
83
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
60
IE Classes
Avatar for Rachel Ober rachelober
0
72
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
78
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
89
Responsive Emails
Avatar for Rachel Ober rachelober
0
56
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
デフォルト運用のCodeRabbit、1年で何が変わったか / How CodeRabbit Changed Our Code Review in 1 Year
Avatar for bake0937 bake0937
1
110
AI Agent と正しく分析するための環境作り
Avatar for yosh_yumyum yoshyum
3
640
AIとRubyの静的型付け
Avatar for ukin0k0 ukin0k0
0
440
SPMマルチモジュールで テストカバレッジを取得する技法
Avatar for yosshi yosshi4486
0
130
Old Dog, New Tricks: The Java 25 Reinvention - JNation
Avatar for A N M Bazlur Rahman bazlur_rahman
0
130
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
110
Skillは並べた。動かなかった。契約で繋いだ。— 65個のSkillから、自走する開発サイクルへ
Avatar for じゅん junholee
0
790
Inspired By RubyKaigi (EN)
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
420
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
Avatar for hideki kinjyo o0h
PRO
2
190
色即是空、空即是色、データサイエンス
Avatar for KamoNeggi kamoneggi
1
210
~ 秘伝のタレ化した『神スプシ』と戦う ~ 関数型パラダイムで壊れない仕組みへ
Avatar for ほりしょー h0r15h0
1
140
[KCD Czech] eBPF Meets the GPU: Future of AI Infra Observability
Avatar for Donia Chaiehloudj doniacld
0
120

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3.2k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
230
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.9k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
320
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
820
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
820
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
180
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
22k

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