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
71

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
62
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
76
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
54
IE Classes
Avatar for Rachel Ober rachelober
0
56
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
63
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
85
Responsive Emails
Avatar for Rachel Ober rachelober
0
49
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
96
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
120

Other Decks in Programming

See All in Programming
コードレビューをしない選択 #でぃーぷらすトウキョウ
Avatar for Takuma Kajikawa kajitack
3
1.2k
メッセージングを利用して時間的結合を分離しよう #phperkaigi
Avatar for Takuma Kajikawa kajitack
3
490
ベクトル検索のフィルタを用いた機械学習モデルとの統合 / python-meetup-fukuoka-06-vector-attr
Avatar for monochromegane monochromegane
2
570
今年もTECHSCOREブログを書き続けます！
Avatar for 平奥真一（ひらおくしんいち） hiraoku101
0
190
AI Assistants for Your Angular Solutions @Angular Graz, March 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
おれのAgentic Coding 2026/03
Avatar for TsukasaSekiguchi tsukasagr
1
120
AI Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
Avatar for nrs nrslib
16
3.4k
AIコードレビューの導入・運用と AI駆動開発における「AI4QA」の取り組みについて
Avatar for ハゲワシ hagevvashi
0
570
AIと共にエンジニアとPMの “二刀流”を実現する
Avatar for Naruo Yoshiki naruogram
0
100
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
4
1.4k
Java 21/25 Virtual Threads 소개
Avatar for Sunghyouk Bae (Debop) debop
0
300

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
160
It's Worth the Effort
Avatar for 3n 3n
188
29k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.1k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
93
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.5k

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