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
48

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
49
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
65
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
44
IE Classes
Avatar for Rachel Ober rachelober
0
47
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
44
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
70
Responsive Emails
Avatar for Rachel Ober rachelober
0
38
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
87
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
100

Other Decks in Programming

See All in Programming
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
43
29k
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
Avatar for yukyan n3xem
0
670
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
Avatar for yimajo yimajo
2
210
データベースコネクションプール(DBCP)の変遷と理解
Avatar for k.fujikawa8 fujikawa8
1
270
プロダクト志向ってなんなんだろうね
Avatar for RightTouch righttouch
PRO
0
110
[初登壇＠jAZUG]アプリ開発者が気になるGoogleCloud/Azure＋wasm/wasi
Avatar for asaringo asaringo
0
130
ASP.NETアプリケーションのモダナイズ インフラ編
Avatar for tomokusaba tomokusaba
1
390
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
Avatar for nrs nrslib
1
200
Using AI Tools Around Software Development
Avatar for inouehi inouehi
0
1.2k
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
Avatar for mackey0225 mackey0225
2
530
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
2
140
「Cursor/Devin全社導入の理想と現実」のその後
Avatar for Ryoichi Saito saitoryc
0
110

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
It's Worth the Effort
Avatar for 3n 3n
184
28k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
277
23k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.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