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
49

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
51
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
48
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
46
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
73
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
100

Other Decks in Programming

See All in Programming
AHC051解法紹介
Avatar for eijirou eijirou
0
180
DynamoDBは怖くない！〜テーブル設計の勘所とテスト戦略〜
Avatar for hiroto_0411 hyamazaki
0
190
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
Avatar for ktr ktr_0731
0
240
React は次の10年を生き残れるか：3つのトレンドから考える
Avatar for Yuka O’oka oukayuka
41
16k
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
Avatar for Date Huang tjjh89017
0
280
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜（奥田りさ）The Basics of Agent Development with ADK — A Demo-Focused Introduction
Avatar for RisaTube risatube
PRO
6
1.4k
Strands Agents で実現する名刺解析アーキテクチャ
Avatar for omiya omiya0555
1
110
decksh - a little language for decks
Avatar for Anthony Starks ajstarks
4
21k
なぜ今、Terraformの本を書いたのか？ - 著者陣に聞く！『Terraformではじめる実践IaC』登壇資料
Avatar for Ryoma Fujiwara fufuhu
4
520
物語を動かす行動"量" #エンジニアニメ
Avatar for konifar konifar
13
3.7k
AI Ramen Fight
Avatar for Yusuke Wada yusukebe
0
130
中級グラフィックス入門～効率的なメッシュレット描画～
Avatar for Pocol projectasura
4
2.5k

Featured

See All Featured
Navigating Team Friction
Avatar for Lara Hogan lara
188
15k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.8k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Fireside Chat
Avatar for paigeccino paigeccino
38
3.6k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
540
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k

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