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
Iconfont or svg?
Search
Justin Slack
August 23, 2015
Design
0
120
Iconfont or svg?
Lightning talk at CTEDs workshop - august 2015.
Justin Slack
August 23, 2015
Tweet
Share
Other Decks in Design
See All in Design
Liquid Iron
mcduckyart
1
110
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
130
harutaka Vision Deck
zenkigenforrecruit
0
150
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
170
Bulletproof Design System with TypeScript
takanorip
6
3.5k
The Golden Whitney
ohtristanart
PRO
0
540
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
410
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
290
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
980
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
620
7 Core Values of Round-L
wired888
0
150
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Side Projects
sachag
455
42k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Music & Morning Musume
bryan
46
6.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Transcript
Iconfonts versus inline svg
Icon systems • pngs
Icon systems • pngs • png sprites
Icon systems • pngs • png sprites • Weird javascript
to make transparency work in IE6
Icon systems • pngs • png sprites • Weird javascript
to make transparency work in IE6 • Retina problems
Iconfonts • Vectors • Can be created online via apps
such as Icomoon or Fontello
Iconfonts • Can be hosted locally
Iconfonts • Can be inlined in CSS
Iconfonts • Multiple ways to display based on how the
font is encoded
Iconfonts • Treated as text by browsers (good and bad)
Iconfonts • You can control the size (via font-size), color,
shadows, rotation, etc. via CSS.
SVG • Can be displayed through the use of CSS
Backgrounds, <object> tags, <img> tags, or inlined directly into your HTML
SVG • Inline SVG is right in the document. If
the browser supports it, it displays it.
<svg class="iconsvg"> <g> <polygon fill="#ad3429" points="217.14,14.856 169.039,14.856 235.993,147.185 260.045,99.649"></polygon> <polygon
fill="#ad3429" points="131.014,184.747 63.991,52.276 39.937,99.813 82.908,184.747"></polygon> <polygon fill="#f2723d" points="216.984,14.856 168.882,14.856 82.927,184.747 131.029,184.747"></polygon> <polygon fill="#f2723d" points="169.039,184.747 217.14,184.747 260.045,99.945 235.993,52.414"></polygon> <polygon fill="#f2723d" points="131.014,14.856 82.908,14.856 39.937,99.784 63.991,147.319"></polygon> </g> </svg>
SVG • semantics of <svg> suit icons which are essentially
images
SVG • accessible via <title>, <desc> and <aria-labelledby>
SVG • Can use build tools
Iconfonts - the bad • May not show up (private
unicode area)
Iconfonts - the bad • Very hard to align as
they depend on pseudo-elements (usually ::before), and things like line-height, vertical-align, letter-spacing, word-spacing and kerning.
Iconfonts - the bad • Cross origin resource
Iconfonts - the bad • Fails to load
Iconfonts - the bad • Chrome bug
Iconfonts - the bad • Android bugs
Iconfonts - the bad • No @font-face support
Iconfonts - the bad • One colour
Iconfonts - the bad • Dyslexia
SVG - the bad • Support. Fallbacks very hard.
Conclusion • Icon font if you have limited number and
low support requirements
Conclusion • Icon font if you have limited number and
low support requirements • svg for more versatility and large icon set
None