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
47

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
47
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
65
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
40
IE Classes
Avatar for Rachel Ober rachelober
0
47
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
40
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
84
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
97

Other Decks in Programming

See All in Programming
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
Avatar for lni_T lnit
1
110
OpenNext + Hono on Cloudflare で イマドキWeb開発スタックを実現する
Avatar for rokuosan rokuosan
0
110
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
Avatar for tomohiko.kuzuba tomohiko9090
0
110
AIエージェントによるテストフレームワーク Arbigent
Avatar for takahirom takahirom
0
280
#QiitaBash TDDでAIに設計イメージを伝える
Avatar for sigma ryosukedtomita
2
1.6k
Javaのルールをねじ曲げろ！禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
Avatar for nrs nrslib
1
440
TSConfig Solution Style & subpath imports to switch types on a per-file basis
Avatar for South maminami373
1
180
Agent Rules as Domain Parser
Avatar for Yoda Keisuke yodakeisuke
1
350
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
Avatar for CUEBiC Inc. cuebic9bic
2
270
當開發遇上包裝： AI 如何讓產品從想法變成商品
Avatar for Caesar Chi clonn
0
2.6k
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
Avatar for Tomohisa Takaoka tomohisa
1
160
TypeScript LSP の今までとこれから
Avatar for Yosuke Kurami quramy
0
140

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
41
2.6k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
183
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.3k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
850
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Building Adaptive Systems
Avatar for Chris Keathley keathley
41
2.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.6k

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