Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What I Learned About SVG

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Rachel Ober Rachel Ober
February 21, 2014
Programming
82
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
68
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
88
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
63
IE Classes
Avatar for Rachel Ober rachelober
0
85
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
85
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
90
Responsive Emails
Avatar for Rachel Ober rachelober
0
58
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
110
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
130

Other Decks in Programming

See All in Programming
なぜ関数型プログラミングで「型」と「証明」が語られるのか #fp_matsuri
Avatar for Takuma Kajikawa kajitack
3
940
【やさしく解説 設計編 #1】「ドメイン駆動」と「実装駆動」ってなに？ 〜設計の考え方を、たとえ話で学ぼう〜
Avatar for HideyukiKitao panda728
PRO
1
120
5分で問診！Composer セキュリティ健康診断
Avatar for コドモン開発チーム codmoninc
0
270
act1-costs.pdf
Avatar for Sumedh Bala sumedhbala
0
230
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
Avatar for TAKASE Kazuyuki guvalif
PRO
1
170
壊れたパーサから始める関数型設計と構成的なパーサ #fp_matsuri
Avatar for ライガー raiga0310
2
230
Apache Hive: Toward a Cloud Native Lakehouse
Avatar for okumin okumin
0
130
自作OSでスライド発表する
Avatar for uyuki uyuki234
1
3.8k
共通化で考えるべきは、実装より公開する型だった
Avatar for code-egg codeegg
0
240
フィードバックで育てるAI開発
Avatar for Kota Minato kotaminato
1
120
Terraform標準の組織で AWS CDKをどう使うか
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
0
230
AIキャラアプリkaiwaの低遅延音声通話基盤をどう作ったか - AWS Gravitonで支える低遅延・低コストAI Agent基盤
Avatar for 最上土川 mogamit
0
170

Featured

See All Featured
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
180
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
500
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
420
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Design in an AI World
Avatar for tapps tapps
1
260
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k

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