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
75
0

What I Learned About SVG

Avatar for Rachel Ober

Rachel Ober

February 21, 2014

More Decks by Rachel Ober

See All by Rachel Ober
So, You Want to Organize a Conference
Avatar for Rachel Ober rachelober
0
65
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
81
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
59
IE Classes
Avatar for Rachel Ober rachelober
0
67
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
72
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
88
Responsive Emails
Avatar for Rachel Ober rachelober
0
53
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
100
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
130

Other Decks in Programming

See All in Programming
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
Avatar for Kiichi Sugihara kiichisugihara
1
260
Liberating Ruby's Parser from Lexer Hacks
Avatar for ydah ydah
2
2.6k
書き換えて学ぶTemporal #fukts
Avatar for Hiroyuki ANAI pirosikick
2
350
Claude Code × Gemini × Ebitengine ゲーム制作素人WebエンジニアがGoでゲームを作った話
Avatar for webzawa webzawa
0
220
t *testing.T は どこからやってくるの？
Avatar for Kotaro Otaka otakakot
1
900
AIを導入する前にやるべきこと
Avatar for Negima negima
2
330
SREに優しいTerraform構成 modulesとstateの組み方
Avatar for hiyanger hiyanger
2
170
GoogleCloudとterraform完全に理解した
Avatar for Terisuke terisuke
1
190
Spec-Driven Development with AI Agents (Workshop, May 2026)
Avatar for Anton Arhipov antonarhipov
2
310
書籍「ユーザーストーリーマッピング」が私のバイブル
Avatar for asumikam asumikam
4
480
AIと共に生きる技術選定 2026
Avatar for Sugar Sato sgash708
0
120
ソースコード→AST→オペコード、の旅を覗いてみる
Avatar for hideki kinjyo o0h
PRO
1
130

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
270
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
190
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
130
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
180
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.4k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.1k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k

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