Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

What I Learned About SVG

Avatar for Rachel Ober Rachel Ober
February 21, 2014
Programming
0
62

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
54
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
69
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
48
IE Classes
Avatar for Rachel Ober rachelober
0
50
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
54
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
79
Responsive Emails
Avatar for Rachel Ober rachelober
0
43
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
91
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
110

Other Decks in Programming

See All in Programming
Cell-Based Architecture
Avatar for Luram Archanjo larchanjo
0
140
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
250
Navigation 3: 적응형 UI를 위한 앱 탐색
Avatar for Sungyong An fornewid
1
380
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
Avatar for IKEDA Yasunobu clockmaker
18
7.6k
Microservices rules: What good looks like
Avatar for Chris Richardson cer
PRO
0
1.6k
Developing static sites with Ruby
Avatar for Masafumi Okura okuramasafumi
0
310
tparseでgo testの出力を見やすくする
Avatar for utagawa kiki utgwkk
2
260
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
Avatar for ZOZO Developers zozotech
PRO
9
5.8k
S3 VectorsとStrands Agentsを利用したAgentic RAGシステムの構築
Avatar for とすり tosuri13
6
360
AIエージェントの設計で注意するべきポイント6選
Avatar for Har1101 har1101
5
1.3k
ゆくKotlin くるRust
Avatar for TATSUNO Yasuhiro exoego
1
110
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
Avatar for n0bisuke n0bisuke2
3
1.3k

Featured

See All Featured
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
180
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
110
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
87
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.3k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
0
270
How to make the Groovebox
Avatar for あそなす asonas
2
1.8k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.5k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.8k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
46

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