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
55

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
53
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
67
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
47
IE Classes
Avatar for Rachel Ober rachelober
0
49
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
48
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
77
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
110

Other Decks in Programming

See All in Programming
AI時代もSEOを頑張っている話
Avatar for しらはま shirahama_x
0
130
AIエージェントでのJava開発がはかどるMCPをAIを使って開発してみた / java mcp for jjug
Avatar for Naoki Kishida kishida
4
750
[堅牢.py #1] テストを書かない研究者に送る、最初にテストを書く実験コード入門 / Let's start your ML project by writing tests
Avatar for Shunsuke KITADA shunk031
11
5.3k
Herb to ReActionView: A New Foundation for the View Layer @ San Francisco Ruby Conference 2025
Avatar for Marco Roth marcoroth
0
180
Java_プロセスのメモリ監視の落とし穴_NMT_で見抜けない_glibc_キャッシュ問題_.pdf
Avatar for NTTドコモソリューションズ　Java担当 ntt_dsol_java
0
220
flutter_kaigi_2025.pdf
Avatar for Kyohei Ito kyoheig3
1
350
競馬で学ぶ機械学習の基本と実践 / Machine Learning with Horse Racing
Avatar for ShoheiMitani shoheimitani
14
13k
詳細の決定を遅らせつつ実装を早くする
Avatar for shimabox shimabox
1
1.3k
チーム開発の “地ならし"
Avatar for konifar konifar
8
5.7k
スタートアップを支える技術戦略と組織づくり
Avatar for pospome pospome
8
8.8k
モデル駆動設計をやってみよう Modeling Forum2025ワークショップ/Let’s Try Model-Driven Design
Avatar for haru860 haru860
0
170
CloudflareのSandbox SDKを試してみた
Avatar for syumai syumai
0
170

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.1k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.2k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
760
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
33k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
6.1k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k

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