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

What I Learned About SVG

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Rachel Ober Rachel Ober
February 21, 2014
Programming
74
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
65
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
80
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
59
IE Classes
Avatar for Rachel Ober rachelober
0
60
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
68
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
87
Responsive Emails
Avatar for Rachel Ober rachelober
0
52
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
AWS re：Invent 2025の少し振り返り ＋ DevOps AgentとBacklogを連携させてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
3
160
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
Avatar for hadashiA hadashia
1
250
レガシーPHP転生 〜父がドメインエキスパートだったのでDDD+Claude Codeでチート開発します〜
Avatar for panda_program panda_program
0
880
PDI: Como Alavancar Sua Carreira e Seu Negócio
Avatar for Marcel dos Santos marcelgsantos
0
120
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
Avatar for higaki higaki_program
0
200
Claude Codeをカスタムして自分だけのClaude Codeを作ろう
Avatar for Terisuke terisuke
0
120
L’IA au service des devs : Anatomie d'un assistant de Code Review
Avatar for Thomas Boileau toham
0
240
Don't Prompt Harder, Structure Better
Avatar for Yusuke Kita kitasuke
0
740
煩雑なSkills管理をSoC（関心の分離）により解決する――関心を分離し、プロンプトを部品として育てるためのOSSを作った話 / Solving Complex Skills Management Through SoC (Separation of Concerns)
Avatar for nrs nrslib
4
890
今年もTECHSCOREブログを書き続けます！
Avatar for 平奥真一（ひらおくしんいち） hiraoku101
0
250
感情を設計する
Avatar for nakamichi ichimichi
5
1.4k
GNU Makeの使い方 / How to use GNU Make
Avatar for kaityo256 kaityo256
PRO
16
5.6k

Featured

See All Featured
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
64
53k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
500
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
470
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
320
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
170
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
690
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
370

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