$30 off During Our Annual Pro Sale. View Details »

What I Learned About SVG

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

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
53
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
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
Avatar for Shoma Okamoto shmokmt
5
2.3k
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
6
2.1k
AIコーディングエージェント（Manus）
Avatar for kondai kondai24
0
170
Microservices Platforms: When Team Topologies Meets Microservices Patterns
Avatar for Chris Richardson cer
PRO
1
1k
connect-python: convenient protobuf RPC for Python
Avatar for Anuraag Agrawal anuraaga
0
400
FluorTracer / RayTracingCamp11
Avatar for kugi kugimasa
0
230
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
Avatar for SatoAoaka satoaoaka
0
240
Cell-Based Architecture
Avatar for Luram Archanjo larchanjo
0
110
dnx で実行できるコマンド、作ってみました
Avatar for Tomohisa Takaoka tomohisa
0
140
なあ兄弟、 余白の意味を考えてから UI実装してくれ！
Avatar for Ryomm ktcryomm
11
11k
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
Avatar for Ryota Nakamura nowaki28
0
400
dotfiles 式年遷宮 令和最新版
Avatar for masawada masawada
1
750

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.2k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
58
6.1k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
700
Navigating Team Friction
Avatar for Lara Hogan lara
191
16k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.3k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k

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