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
55

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
53
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
48
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
77
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
110

Other Decks in Programming

See All in Programming
モデル駆動設計をやってみよう Modeling Forum2025ワークショップ/Let’s Try Model-Driven Design
Avatar for haru860 haru860
0
170
開発生産性が組織文化になるまでの軌跡
Avatar for ふくすけ tonegawa07
0
180
スタートアップを支える技術戦略と組織づくり
Avatar for pospome pospome
8
8.8k
GraalVM Native Image トラブルシューティング機能の最新状況（2025年版）
Avatar for NTTドコモソリューションズ　Java担当 ntt_dsol_java
0
160
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
Avatar for Matsumoto Moeka moeka__c
0
380
Evolving NEWT’s TypeScript Backend for the AI-Driven Era
Avatar for Rodrigo Ramirez xpromx
0
150
[堅牢.py #1] テストを書かない研究者に送る、最初にテストを書く実験コード入門 / Let's start your ML project by writing tests
Avatar for Shunsuke KITADA shunk031
11
5.3k
社内オペレーション改善のためのTypeScript / TSKaigi Hokuriku 2025
Avatar for dachi023 dachi023
1
110
Chart.jsで長い項目を表示するときのハマりどころ
Avatar for yumechi(Motoki Hirao) yumechi
0
140
Atomics APIを知る / Understanding Atomics API
Avatar for TOMIKAWA Sotaro ssssota
1
160
CloudNative Days Winter 2025: 一週間で作る低レイヤコンテナランタイム
Avatar for ternbusty ternbusty
7
1.6k
関数の挙動書き換える
Avatar for takato fukui takatofukui
4
740

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
760
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k

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