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

What I Learned About SVG

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Rachel Ober Rachel Ober
February 21, 2014
Programming
82
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
67
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
86
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
62
IE Classes
Avatar for Rachel Ober rachelober
0
79
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
82
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
90
Responsive Emails
Avatar for Rachel Ober rachelober
0
57
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
110
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
130

Other Decks in Programming

See All in Programming
Claspは野良GASの夢をみるか
Avatar for てらうちたかし takter00
0
190
その問い、本当に正しいですか？AI時代のエンジニアに必要な哲学と認知科学 / ai-philosophy-cognitive-science
Avatar for MinoDriven minodriven
11
5.6k
Lessons from Spec-Driven Development
Avatar for Simon Martinelli simas
PRO
0
210
軽量Java基盤の設計 DIコンテナに頼らない、長期保守と1秒起動の実現 JJUG CCC 2026 Spring
Avatar for Masaaki Takahashi macha64
0
530
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
Avatar for daitasu daitasu
1
240
Hunting Vulnerabilities in Symfony with LLMs
Avatar for Vincent Amstoutz vinceamstoutz
0
550
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
13
6.1k
そのテスト、説明できますか？~LWテスト戦略FW~のご紹介
Avatar for Kei Nakahara nakahara
0
140
ユニットテストの先へ：テスト技法で要求・仕様を整理するJava開発実践 / Beyond_Unit_Testing_Practical_Java_Development_Techniques_for_Organizing_Requirements_and_Specifications
Avatar for SHIMANE, Yoshikazu shimashima35
0
410
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
Avatar for Manfred Steyer manfredsteyer
PRO
0
100
ローカルLLMでどこまでコードが書けるか -拡張版 /　How much code can be written on a local LLM Extended
Avatar for Naoki Kishida kishida
11
4.2k
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
Avatar for Manfred Steyer manfredsteyer
PRO
0
250

Featured

See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
62
44k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
210
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
210
Between Models and Reality
Avatar for mayunak mayunak
4
340
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.7k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.9k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k

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