Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
What I Learned About SVG
Search
Rachel Ober
February 21, 2014
Programming
0
43
What I Learned About SVG
Rachel Ober
February 21, 2014
Tweet
Share
More Decks by Rachel Ober
See All by Rachel Ober
So, You Want to Organize a Conference
rachelober
0
43
Front End Workshop 2015
rachelober
0
63
Front End Overview for Interns 2015
rachelober
1
38
IE Classes
rachelober
0
44
Front End Overview (2014)
rachelober
0
38
Team Communication Through Code
rachelober
0
68
Responsive Emails
rachelober
0
37
Paperless Post Sass
rachelober
1
79
SassConf Custom Framework/Style Guide Panel
rachelober
0
95
Other Decks in Programming
See All in Programming
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
DROBEの生成AI活用事例 with AWS
ippey
0
130
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Unity Android XR入門
sakutama_11
0
140
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
RailsConf 2023
tenderlove
29
1k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
GraphQLとの向き合い方2022年版
quramy
44
13k
Practical Orchestrator
shlominoach
186
10k
KATA
mclloyd
29
14k
A better future with KSS
kneath
238
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Faster Mobile Websites
deanohume
306
31k
Transcript
What I learned about SVG In 5 minutes or less
Scalable Vector Graphics
Goal: Provide both a retina and non-retina solution for our
graphic needs.
None
Product Design
None
120 Lines of Code
120 Lines of Code - 11KB
96 Lines of Code - 9KB
96 Lines of Code - 9KB
None
5 Paths - 8KB
5 Paths - 8KB dramatization of actual events
#svg-full-logo { height: 26px; width: 49px; path { fill: #777;
} } To Manipulate Inline SVG with CSS
None
None
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