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

What I Learned About SVG

Avatar for Rachel Ober Rachel Ober
February 21, 2014
Programming
91
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
99
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
73
IE Classes
Avatar for Rachel Ober rachelober
0
97
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
96
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
100
Responsive Emails
Avatar for Rachel Ober rachelober
0
71
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
Coding with AI: How to trust the storyteller (AWS Community Day Adria, Ljubljana 2026)
Avatar for Slobodan Stojanović slobodan
0
130
dotNET_vulnclicker_intro.pdf
Avatar for Tomohiko Morita deka_morita
0
160
Event is what happens
Avatar for MOROHASHI Kyosuke moro
2
2.3k
No More NoSuchMethodError
Avatar for TATSUNO Yasuhiro exoego
1
120
Kotlinize Is Not Just Converting to Kotlin
Avatar for Kazuki Chigita chigichan24
1
200
우리의 Nitro Modules는 당신의 Turbo Modules보다 아름답다
Avatar for HyunWoo Lee l2hyunwoo
0
240
Vue.jsで作る空間解析アプリとCapacitorプラグインのData Bridge
Avatar for Hal hal_spidernight
1
130
気持ちぃ〜角丸 Squircle
Avatar for ryu ryu1013
0
370
社内AIエージェント「Askワンバン」における コストチューニングの取り組み
Avatar for t0yohei t0yohei
0
120
當我們開始不讀 Code - AI Agent 時代，Code Review 與 Clean Code 還剩下什麼？
Avatar for James Wang jame2408
1
350
GraphQL の onError と Nullability のこれから
Avatar for Yosuke Kurami quramy
0
200
クラウドゲーミングのパフォーマンス最適化に挑む / Cloud Gaming Performance Tuning
Avatar for viviON vivion
0
310

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
550
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
570
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
500
Designing for Performance
Avatar for Lara Hogan lara
612
70k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
540
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
650
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
780
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
371
20k
Design in an AI World
Avatar for tapps tapps
1
380

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