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
95
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
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
120
portfolio
amitnk
1
160
202409_会社概要資料_Englishver.pdf
zakkerooni
0
210
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.5k
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
33k
Yahoo Newsletter Clicker Template
xuechunwu
0
300
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
290
ZKK_001.pdf
nicholaspegu
0
1.4k
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
180
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
510
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
4
250
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
340
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
510
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
For a Future-Friendly Web
brad_frost
175
9.4k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Embracing the Ebb and Flow
colly
84
4.5k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
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