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
49

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
51
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
67
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
45
IE Classes
Avatar for Rachel Ober rachelober
0
48
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
45
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
72
Responsive Emails
Avatar for Rachel Ober rachelober
0
41
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
89
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
100

Other Decks in Programming

See All in Programming
PicoRuby on Rails
Avatar for makicamel makicamel
3
150
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
Avatar for Yutaro Muta yutailang0119
0
170
リバースエンジニアリング新時代へ！
GhidraとClaude DesktopをMCPで繋ぐ/findy202507
Avatar for @tkmru tkmru
3
1.1k
PHPカンファレンス関西2025　基調講演
Avatar for SUGIMOTO Kei sugimotokei
4
570
AI コーディングエージェントの時代へ：JetBrains が描く開発の未来
Avatar for Masaru Horioka masaruhr
1
210
The Niche of CDK Grant オブジェクトって何者？/the-niche-of-cdk-what-isgrant-object
Avatar for hassaku63 hassaku63
1
630
LT 2025-06-30: プロダクトエンジニアの役割
Avatar for Keisuke Yamamoto yamamotok
0
880
テスト駆動Kaggle
Avatar for ねぼすけAI isax1015
1
760
Claude Code で Astro blog を Pages から Workers へ移行してみた
Avatar for Kei Kamikawa codehex
0
120
코딩 에이전트 체크리스트: Claude Code ver.
Avatar for nacyot nacyot
0
960
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
Avatar for Yusuke Suto sutochin26
1
7.4k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ～継続的な取り組みを添えて～
Avatar for Takuya TAKAHASHI takutakahashi
4
1.3k

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
300
21k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
It's Worth the Effort
Avatar for 3n 3n
185
28k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.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