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

What I Learned About SVG

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Rachel Ober Rachel Ober
February 21, 2014
Programming
89
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
72
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
89
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
65
IE Classes
Avatar for Rachel Ober rachelober
0
89
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
88
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
93
Responsive Emails
Avatar for Rachel Ober rachelober
0
63
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
110
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
140

Other Decks in Programming

See All in Programming
コンパウンドプロダクト開発のためのローカルプロセスマネージャー再発明 #layerxgo
Avatar for izumin5210 izumin5210
0
610
AIエージェント時代のコードレビューを設計する
Avatar for nogu nogu66
5
2.1k
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
Avatar for Tatsuki tatsuki12
4
1.6k
Can LLMs Replicate 4 Years of Compose Migration? Exploring the boundaries of automation with 279 XML files from a real product
Avatar for makun makun
0
120
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
800
Oxlintはいいぞ（続）
Avatar for Yuji Yamaguchi yug1224
1
530
MySQLとPostgreSQLって何が違うの？
Avatar for 赤神青空 akagami
PRO
0
160
LL言語やWebフレームワークの PostgreSQL対応 〜DBの機能がユーザーに届くまで〜
Avatar for 武田 憲太郎 kentaroutakeda
0
120
高専、大学編入、そして未踏へ〜プロダクト開発とキャリアの歩み - Technical College, University Transfer, and On to “Mitou” / My Journey in Product Development and Career
Avatar for __pkmiya pkmiya
0
130
書籍「プロフェッショナルAI駆動開発」紹介スライド
Avatar for Juntaro Matsumoto juntaromatsumoto
0
900
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
270
in-process GraphQL のすすめ #ginzajs
Avatar for izumin5210 izumin5210
4
1.5k

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
370
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
400
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.6k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.8k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
810
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
232
55k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
330
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k

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