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
97
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
70
IE Classes
Avatar for Rachel Ober rachelober
0
90
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
89
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
99
Responsive Emails
Avatar for Rachel Ober rachelober
0
68
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
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
Avatar for Yu Sugawara yusuga
1
540
GitHubハンズオン講座 — 実務レベルのチーム開発のフローを身につけよう
Avatar for junhat6 junhat6
0
110
App Storeの外へ──日本のiOSサイドローディング入門 for iOSDC Japan 2026
Avatar for 野瀬田　裕樹 yuukiw00w
0
250
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
270
難しいけど、読めた。- OSSの入口に立った話。
Avatar for shota sts11142
0
120
一人だけ、Kiroが静止する日
Avatar for Hideyuki Nagata hideg
0
130
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
580
JPUG勉強会 OSSデータベースの内部構造を理解しよう(第２回)
Avatar for Atsushi Ogawa oga5
0
270
ゲームコントローラやキーボードのファームウェアをSwiftで書く
Avatar for Kishikawa Katsumi kishikawakatsumi
1
260
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
Avatar for Keisuke Kobayashi kobakei
0
140
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
260
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
320

Featured

See All Featured
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
250
Building an army of robots
Avatar for Kyle Neath kneath
307
46k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
How to make the Groovebox
Avatar for あそなす asonas
2
2.5k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
5M
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.5k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
4
10k

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