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
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
68
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
88
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
64
IE Classes
Avatar for Rachel Ober rachelober
0
85
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
86
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
90
Responsive Emails
Avatar for Rachel Ober rachelober
0
58
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
Claude Team Plan導入・ガイド
Avatar for tk3fftk tk3fftk
0
210
ルールを書いて終わらせないハーネスエンジニアリング
Avatar for Yuji Yamaguchi yug1224
3
1.5k
yield再入門 #phpcon
Avatar for hideki kinjyo o0h
PRO
0
540
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
1.2k
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
Avatar for Ryo Tomidokoro hanhan1978
4
900
鹿野さんに聞く！『TypeScriptコードレシピ集』で磨く実践力
Avatar for tonkotsuboy_com tonkotsuboy_com
4
1.1k
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
Avatar for TAKASE Kazuyuki guvalif
PRO
1
170
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
Avatar for HideyukiKitao panda728
PRO
2
140
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
SREの積み重ねがAI駆動開発のガードレールになった ― 7つの実践/SRE Guardrails The 7
Avatar for TomoyaKitaura tomoyakitaura
8
4.4k
地域 SRE コミュニティ最前線 - ホンマでっかSRE勉強会
Avatar for tk3fftk tk3fftk
0
250
PHPだって関数型したい 〜できること、できないこと〜 / fp-in-php
Avatar for jsoizo jsoizo
0
220

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Design in an AI World
Avatar for tapps tapps
1
260
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
460
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
260
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
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
520
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.5k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k

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