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
74
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
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
170
モデル・デザイン入門
akitsugu7935
0
470
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
190
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
320
MiKS inc. Company PR en_202404
zakkerooni
0
160
Portfolio 2023.07.28
helemarudesu
0
590
他人事じゃないWebアクセシビリティ入門
arihiro17
0
210
1人歩きする営業資料作成
yutoshukuya
0
150
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
31
2.6k
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
300
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
10
990
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
The Cult of Friendly URLs
andyhume
74
5.7k
It's Worth the Effort
3n
180
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Typedesign – Prime Four
hannesfritz
36
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Infographics Made Easy
chrislema
238
18k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Automating Front-end Workflow
addyosmani
1356
200k
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