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
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
99
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
72
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
70
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
Vue Fes Japan の “作る側”に関わってみて
Avatar for Naoki Haba naokihaba
0
160
Findy - エンジニア向け会社紹介/Findy Company Deck
Avatar for Findy findyinc
6
400k
Next.js: The final boss of Web Performance
Avatar for Estela Franco guaca
0
260
Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.
Avatar for r-kagaya rkaga
8
2.2k
R8 の設定見直しでアプリサイズ削減
Avatar for ANDPAD inc andpad
0
220
JIS keyboard support in Omarchy
Avatar for LEF lef237
0
120
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
Avatar for Kobujee_53 oku053
0
180
Domain-Driven Transformation
Avatar for Henning Schwentner hschwentner
2
2.3k
AIに “答え“を書かせるのを やめてみた
Avatar for akari ___akari11
0
120
npm との違いを手がかりにGo の依存管理を理解したい
Avatar for OPTiM optim
0
380
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
270
AWSに止められる覚悟してますか？
Avatar for モリゾー morizo_1984
2
540

Featured

See All Featured
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
192
12k
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.7k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.6k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
1k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
870
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
2
35k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
2
360
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
600
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
620
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.4k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.7k

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