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
48

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

Other Decks in Programming

See All in Programming
関数型まつり2025登壇資料「関数プログラミングと再帰」
Avatar for Taison Tsukada taisontsukada
2
840
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
Avatar for yukyan n3xem
0
670
FormFlow - Build Stunning Multistep Forms
Avatar for Yonel Ceruto González yceruto
1
190
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
1
200
エンジニア向け採用ピッチ資料
Avatar for 犬飼嵩 inusan
0
150
『自分のデータだけ見せたい！』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
Avatar for AkitoTsukahara akitotsukahara
1
380
Result型で“失敗”を型にするPHPコードの書き方
Avatar for Takuma Kajikawa kajitack
4
120
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
Avatar for Kenichi SUZUKI knih
11
2k
AIネイティブなプロダクトをGolangで挑む取り組み
Avatar for nmatsumoto4 nmatsumoto4
0
120
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
Avatar for Akira Kobori koboriakira
0
240
GoのWebAssembly活用パターン紹介
Avatar for syumai syumai
3
10k

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
790
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Side Projects
Avatar for Sacha Greif sachag
455
42k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
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