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

What I Learned About SVG

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Rachel Ober Rachel Ober
February 21, 2014
Programming
0
67

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
57
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
72
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
52
IE Classes
Avatar for Rachel Ober rachelober
0
53
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
59
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
84
Responsive Emails
Avatar for Rachel Ober rachelober
0
46
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
94
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
120

Other Decks in Programming

See All in Programming
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
ノイジーネイバー問題を解決する 公平なキューイング
Avatar for Shoichi Ochi occhi
0
110
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
izumin5210のプロポーザルのネタ探し #tskaigi_msup
Avatar for izumin5210 izumin5210
1
140
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
200
24時間止められないシステムを守る-医療ITにおけるランサムウェア対策の実際
Avatar for kouki.miura koukimiura
1
110
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
180
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
SourceGeneratorのススメ
Avatar for tkym htkym
0
200
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
220

Featured

See All Featured
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.5k
Between Models and Reality
Avatar for mayunak mayunak
1
190
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
140
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
Abbi's Birthday
Avatar for Violet Bock coloredviolet
1
4.8k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.5k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
98
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
250
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
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