Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What I Learned About SVG

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Rachel Ober Rachel Ober
February 21, 2014
Programming
89
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
72
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
89
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
65
IE Classes
Avatar for Rachel Ober rachelober
0
89
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
88
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
93
Responsive Emails
Avatar for Rachel Ober rachelober
0
63
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
110
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
140

Other Decks in Programming

See All in Programming
新人はどこまで自力でやり、どこからAIに頼るべきか／エンジニア育成に向き合う_先輩たちの悩みと知見共有会
Avatar for TOPPAN ict toppan_digital_dev
1
460
Vibes Containers 〜AIで変わるコンテナ設計と運用〜
Avatar for Tetsuya Kikuchi tkikuc
0
150
初めての模倣学習とVLA
Avatar for Minoru Natsutani natsutan
0
410
数年滞っていたダークモード対応をおよそ2週間で完了させる
Avatar for Kazuki Chigita chigichan24
0
210
プロポーザルを書いてもらう
Avatar for pvcresin pvcresin
0
600
ソフトウェアエンジニアにとっての生成AI - 特性を知って使い倒す / generative ai for software enginner
Avatar for Naoki Kishida kishida
7
2.3k
Go 1.27 における memory allocation の高速化
Avatar for ANDPAD inc andpad
0
370
Jindong: Introducing Declarative Haptics in Compose Multiplatform
Avatar for HyunWoo Lee l2hyunwoo
0
140
DroidKaigi 2026 「個人開発という実験場: Android エンジニアが手にする4つの自由」
Avatar for SlashNephy slashnephy
0
190
T3DD26: From RAGs to Riches
Avatar for Martin Helmich martinhelmich
0
130
My Marp Sample
Avatar for Shota Inoue sinoue0108
0
140
AIの中の人になってみる
Avatar for tkym htkym
0
150

Featured

See All Featured
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.1k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.6k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.7k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
340
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
460
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
790

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