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
速いWebフレームワークを作る
Avatar for Yusuke Wada yusukebe
4
1.6k
さようなら Date。 ようこそTemporal！ 3年間先行利用して得られた知見の共有
Avatar for 8-beeeaaat!!! 8beeeaaat
0
250
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
Avatar for Marco Roth marcoroth
0
300
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
Avatar for Itaru Ota ota1022
5
1.9k
OSS開発者という働き方
Avatar for ANDPAD inc andpad
5
1.6k
サーバーサイドのビルド時間87倍高速化
Avatar for PLAID Tech plaidtech
PRO
0
690
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
300
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
Avatar for ivargrimstad ivargrimstad
0
300
Improving my own Ruby thereafter
Avatar for monochrome sisshiki1969
1
150
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
Avatar for Tomoki Kobayashi temoki
0
150
AIレビュアーをスケールさせるには / Scaling AI Reviewers
Avatar for technuma technuma
2
240
個人軟體時代
Avatar for Ethan Huang ethanhuang13
0
290

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.5k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.5k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
840
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.6k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.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