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
64

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
56
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
71
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
49
IE Classes
Avatar for Rachel Ober rachelober
0
51
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
56
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
81
Responsive Emails
Avatar for Rachel Ober rachelober
0
45
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
92
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
110

Other Decks in Programming

See All in Programming
C-Shared Buildで突破するAI Agent バックテストの壁
Avatar for po3rin po3rin
0
430
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
1
190
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう！
Avatar for neruneruo neruneruo
4
2.2k
GoLab2025 Recap
Avatar for kuro kuro_kurorrr
0
790
gunshi
Avatar for kazupon kazupon
1
130
Developing static sites with Ruby
Avatar for Masafumi Okura okuramasafumi
0
340
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
150
AtCoder Conference 2025「LLM時代のAHC」
Avatar for Yuki Imajuku imjk
2
630
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
450
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
410
PostgreSQLで手軽にDuckDBを使う！DuckDB&pg_duckdb入門/osc25hi-duckdb
Avatar for Takahashi Ikki takahashiikki
0
230
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
900

Featured

See All Featured
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
1
210
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
220
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
0
4.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.3k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
300
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
360
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
670

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