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
88
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
Breaking News on the Web
souvikdg
0
690
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
290
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
2
210
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2k
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
600
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
0
290
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
2.8k
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
410
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
230
202409_会社概要資料_Englishver.pdf
zakkerooni
0
190
スマートバンクのプロダクトデザイン
putchomsmartbank
6
2.3k
Ubie Vitalsの取り組み紹介
8845musign
0
650
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
What's in a price? How to price your products and services
michaelherold
243
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Raft: Consensus for Rubyists
vanstee
136
6.6k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
How to train your dragon (web standard)
notwaldorf
87
5.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
124
18k
From Idea to $5000 a Month in 5 Months
shpigford
380
46k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
1
230
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
640
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