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
99
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
72
IE Classes
Avatar for Rachel Ober rachelober
0
97
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
96
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
100
Responsive Emails
Avatar for Rachel Ober rachelober
0
70
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
最近”作らせてる” ローカルAIアプリの話
Avatar for ITO Akihiro akit37
0
470
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
Avatar for akase244 akase244
0
150
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
160
dotNET_vulnclicker_intro.pdf
Avatar for Tomohiko Morita deka_morita
0
140
Atomic Design, Enforced: Scaling Mobile Design Systems (next.app devCon / droidCon Berlin 2026)
Avatar for Stelios Frantzeskakis steliosf
PRO
0
170
パスワード再設定メールのURLについて知っておこう
Avatar for uyuki uyuki234
0
160
コードで差別化できない時代の ソフトウェアエンジニアリング / Software Engineering in an Era Where Code Doesn’t Differentiate
Avatar for Naoki Kishida kishida
2
180
contenteditable と日本語入力に向き合う
Avatar for taki colorful12
0
200
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
7
13k
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
160
Verilogで学ぶCPU自作入門
Avatar for uyuki uyuki234
8
4.1k
半永久的に提供し続けられるプライベートクラウドを目指して ― 利用者の認知負荷を抑えるAPI抽象化とハードウェア世代交代の基盤設計
Avatar for Tomofumi Kondo tomokon
0
500

Featured

See All Featured
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
970
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.8k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
1k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.8k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.5k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
10
1.2k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
300

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