Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
210
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
6
2.1k
AIコーディングエージェント（NotebookLM）
Avatar for kondai kondai24
0
170
connect-python: convenient protobuf RPC for Python
Avatar for Anuraag Agrawal anuraaga
0
400
エディターってAIで操作できるんだぜ
Avatar for kis9a kis9a
0
710
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
Avatar for SatoAoaka satoaoaka
0
240
ローターアクトEクラブ アメリカンナイト：川端 柚菜 氏（Japan O.K. ローターアクトEクラブ 会長）:2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
720
テストやOSS開発に役立つSetup PHP Action
Avatar for Atsushi Matsuo matsuo_atsushi
0
150
Developing static sites with Ruby
Avatar for Masafumi Okura okuramasafumi
0
260
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
Avatar for Matsumoto Moeka moeka__c
6
3k
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
Avatar for ZOZO Developers zozotech
PRO
8
5.5k
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
Avatar for Ryota Nakamura nowaki28
0
400

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.8k

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