-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
2432 lines (2272 loc) · 129 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SVG: So Very Good - Smashing Conference, October 2017</title>
<meta name="description" content="Visual materials for a talk given at the Monthly Front End PDX Meetup in April 2016">
<meta name="author" content="Tyler Sticka">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/tylersticka.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="css/highlight/seti.css">
<!-- Embedding -->
<link rel="alternate" type="application/json+oembed"
href="http://tylersticka.github.io/slides-svg/oembed.json"
title="SVG: So Very Good oEmbed Profile">
<!-- Typekit -->
<script src="https://use.typekit.net/dbv6gsy.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section data-background="#093c75" data-hook="titleText">
<svg width="800" height="600" viewBox="0 0 800 400" style="margin-top: -50px; margin-bottom: -75px;">
<text font-size="180" fill="#12a1e9" text-anchor="middle" x="400" y="260" font-weight="800">SVG</text>
<g id="title-so" style="visibility: hidden;">
<circle cx="280" cy="200" r="180" fill="#12a1e9"/>
<text font-size="100" fill="#FFF" text-anchor="middle" x="280" y="235" font-weight="700">SO</text>
</g>
<g id="title-very" style="visibility: hidden;">
<circle cx="400" cy="200" r="180" fill="#12a1e9"/>
<text font-size="100" fill="#FFF" text-anchor="middle" x="400" y="235" font-weight="700">VERY</text>
</g>
<g id="title-good" style="visibility: hidden;">
<circle cx="520" cy="200" r="180" fill="#12a1e9"/>
<text font-size="100" fill="#FFF" text-anchor="middle" x="520" y="235" font-weight="700">GOOD</text>
</g>
</svg>
<div class="row">
<img data-src="img/me.svg" alt="Face of author" height="80" style="margin-right: 0.5em;">
<p><a class="link-subtler" href="https://twitter.com/tylersticka">@tylersticka</a></p>
</div>
<aside class="notes">
Intro
</aside>
</section>
<section data-background="#077B05">
<p class="mpaa">The following <b>slide deck</b> was assembled using</p>
<p class="mpaa"><b>reveal.js</b> and actual <b>SVG</b></p>
<p class="mpaa">by the guy standing and talking right now</p>
<aside class="notes">
<ul>
<li>I want to point out that this deck is running in Chrome</li>
<li>Any animations and examples are actual SVG</li>
</ul>
</aside>
</section>
<section data-background="img/photo-young_tyler.jpg" data-background-size="contain" data-background-color="#000">
<aside class="notes">
Ever since I was a kid: Art + Computers
</aside>
</section>
<section>
<svg width="800" height="600" viewBox="0 0 640 480">
<circle class="blend-multiply" id="interests-art" cx="22%" cy="50%" r="22%" fill="cyan"/>
<circle class="blend-multiply" id="interests-tech" cx="78%" cy="50%" r="22%" fill="magenta"/>
<text class="blend-multiply weight-bold" x="22%" y="50%" dy="1%" text-anchor="middle" fill="#111">art</text>
<text class="blend-multiply weight-bold" x="78%" y="50%" dy="1%" text-anchor="middle" fill="#111">tech</text>
<text class="weight-bold" x="50%" y="50%" dy="1%" text-anchor="middle" fill="white">web</text>
</svg>
<span class="fragment blend-multiply" data-hook="interests"></span>
<aside class="notes">
Intersection of interests brought me to the web
</aside>
</section>
<section data-background="img/scottmccloud-icst1.png" data-background-size="640px auto" data-background-position="top">
</section>
<section>
<div class="row-around">
<img data-src="img/blip-004.gif" alt="" style="margin-left: 1em; margin-right: 1em;">
<img data-src="img/blip-005.gif" alt="" style="margin-left: 1em; margin-right: 1em;">
<img data-src="img/blip-006.gif" alt="" style="margin-left: 1em; margin-right: 1em;">
</div>
</section>
<section>
<div class="row-around">
<img data-src="img/icon-me-fireftp.png" alt="" width="256">
<img data-src="img/icon-me-mcafee.png" alt="" width="256">
<div style="width: 256px; text-align: center;"><img data-src="img/icon-me-wishpop.png" alt="" width="212"></div>
</div>
</section>
<section data-background-iframe="https://cloudfour-patterns.netlify.com/patterns/components/icon.html">
</section>
<!-- <section data-background="#222">
<svg width="800" height="600" viewBox="-80 -60 800 600">
<g class="fragment" data-fragment-index="0">
<text x="320" y="-30" dy="0.5em" text-anchor="middle" font-weight="bold" fill="currentColor">640</text>
<text x="-40" y="240" dy="0.5em" text-anchor="middle" font-weight="bold" fill="currentColor">480</text>
</g>
<rect x="0" y="0" rx="4" width="640" height="480" fill="#fff"/>
<text class="fragment fade-out" data-fragment-index="0" x="320" y="240" font-weight="bold" fill="#222" text-anchor="middle" font-size="60">Then…</text>
<g class="fragment">
<image class="wiggle" xlink:href="img/ieget.gif" width="264" height="93" x="188" y="77"/>
<image class="wiggle" xlink:href="img/netnow3.gif" width="264" height="93" x="188" y="190"/>
<image class="wiggle" xlink:href="img/get_flash_player.gif" width="336" height="99" x="152" y="303"/>
</g>
</svg>
<aside class="notes">
<ul>
<li>When I'd started, we'd already begun our shared hallucination of a "fixed width" web</li>
<li>And the browser wars were still in their last throes</li>
</ul>
</aside>
</section> -->
<!-- <section>
<h2>Now:</h2>
<div class="row row-around">
<img src="img/HTML5_Badge.svg" alt="" width="256" height="160" class="fragment">
<svg width="256" height="256" viewBox="0 -40 256 256" class="fragment">
<defs>
<g id="rwd-tablet">
<rect x="0" y="0" width="90" height="120" fill="#12a1e9" rx="6"/>
<rect x="6" y="12" width="78" height="96" fill="#fff"/>
</g>
<g id="rwd-mobile">
<rect x="0" y="0" width="45" height="90" fill="#E041B0" rx="4"/>
<rect x="3" y="10" width="39" height="70" fill="#fff"/>
</g>
</defs>
<rect x="0" y="0" width="256" height="144" fill="#111" rx="3"/>
<rect x="4" y="4" width="248" height="132" fill="#eee"/>
<rect x="96" y="144" width="64" height="24" fill="#111"/>
<rect x="64" y="168" width="128" height="8" rx="2" fill="#111"/>
<use xlink:href="#rwd-tablet" x="20" y="40" transform="rotate(-5)"/>
<use xlink:href="#rwd-mobile" x="180" y="50" transform="rotate(5)"/>
</svg>
<svg width="256" height="220" viewBox="0 0 256 256" class="fragment rotate-slow">
<circle cx="128" cy="128" r="90" fill="none" stroke="#111" stroke-width="8"/>
<circle cx="128" cy="128" r="45" fill="#12a1e9"/>
<circle cx="128" cy="38" r="22.5" fill="#12a1e9"/>
</svg>
</div>
</section> -->
<!-- <section data-background="#FBF3E3">
<img src="img/fancy.gif" alt="" width="600">
</section> -->
<!-- <section data-background="#093c75">
<h2 class="align-right" style="color: #71C7F2;">And yet…</h2>
<aside class="notes">
For all our newfound responsive know-how, one element of our work remains frustratingly rigid
</aside>
</section> -->
<!-- <section>
<svg width="800" height="600" viewBox="0 0 640 480" id="photo-frame">
<defs>
<clipPath id="photo-frame-contents">
<rect x="108" y="77" width="428" height="326"/>
</clipPath>
</defs>
<image xlink:href="img/frame.jpg" width="640" height="480"/>
<rect x="108" y="77" width="428" height="326" fill="#222"/>
<text style="font-family: 'fira-mono', monospace; font-size: 60px;" dy="0.25em" x="320" y="240" text-anchor="middle" fill="#fff"><img/></text>
<g class="fragment" clip-path="url(#photo-frame-contents)">
<image id="photo-frame-inner" xlink:href="img/obama-chrysler.jpg" x="76" y="77" width="488" height="326"/>
</g>
</svg>
<div class="fragment" data-hook="photoFrameShrink"></div>
<div class="fragment" data-hook="photoFrameGrowInner"></div>
<p style=" margin-bottom: -1em;"><small>Art direction example via <a href="https://cloudfour.com/thinks/a-framework-for-discussing-responsive-images-solutions/">Jason Grigsby</a>, frame photo by <a href="https://www.flickr.com/photos/34651674@N07/7258061584/in/datetaken/">Stephen Clulow</a></small></p>
<aside class="notes">
Images! These inflexible boxes have vexed many a web developer
</aside>
</section> -->
<section class="dark" data-background="img/retina-screenshot.jpg">
<!-- <h1 class="align-left text-shadow">2010</h1> -->
</section>
<section>
<div class="fragment grow-4x">
<img data-src="img/[email protected]" alt="Search icon in PNG format">
Search
</div>
<aside class="notes">
<ul>
<li>Our crisp icons, logos and vector imagery looked fine</li>
<li>Until we saw it on high-res displays</li>
</ul>
</aside>
</section>
<section data-background="img/stimpy-sweat.gif" data-background-size="contain" data-background-color="#000">
<aside class="notes">
<ul>
<li>My reaction at the time</li>
</ul>
</aside>
</section>
<section data-background="#093c75">
<h2 style="color: #71C7F2;">So we got creative…</h2>
<aside class="notes">
<ul>
<li>So got creative, in several ways</li>
</ul>
</aside>
</section>
<section>
<div class="row-around">
<svg width="112" height="150" viewBox="0 0 300 400">
<polygon points="0,0 220,0 300,80 300,400 0,400 0,200" fill="#ddd"/>
<polygon points="220,0 300,80 220,80" fill="#12A1E9"/>
<text class="weight-bold" x="50%" y="75%" text-anchor="middle" fill="#222" font-size="96">@1x</text>
</svg>
<svg width="225" height="300" viewBox="0 0 300 400">
<polygon points="0,0 220,0 300,80 300,400 0,400 0,200" fill="#ddd"/>
<polygon points="220,0 300,80 220,80" fill="#12A1E9"/>
<text class="weight-bold" x="50%" y="75%" text-anchor="middle" fill="#222" font-size="96">@2x</text>
</svg>
<svg width="336" height="450" viewBox="0 0 300 400">
<polygon points="0,0 220,0 300,80 300,400 0,400 0,200" fill="#ddd"/>
<polygon points="220,0 300,80 220,80" fill="#12A1E9"/>
<text class="weight-bold" x="50%" y="75%" text-anchor="middle" fill="#222" font-size="96">@3x</text>
</svg>
</div>
</section>
<section data-background="#222">
<img data-src="img/safari-shapes-1.png" alt="Screenshot from the Shapes of CSS page on CSS-Tricks">
<aside class="notes">
<ul>
<li>We learned to rely on CSS for some simple shapes</li>
</ul>
</aside>
</section>
<section data-background="#222">
<img data-src="img/safari-shapes-2.png" alt="Screenshot from the Shapes of CSS page on CSS-Tricks">
<aside class="notes">
<ul>
<li>And slightly less simple shapes</li>
</ul>
</aside>
</section>
<section data-background="#222">
<img data-src="img/safari-shapes-3.png" alt="Screenshot from the Shapes of CSS page on CSS-Tricks">
<aside class="notes">
<ul>
<li>And this is already getting ridiculous</li>
<li>But by far the most common hack we adopted at the time...</li>
</ul>
</aside>
</section>
<section data-background="#093c75">
<h1 style="color: #71C7F2;">Icon Fonts</h1>
</section>
<section data-background="#222">
<img data-src="img/safari-24ways-icon_fonts.png" alt="Screenshot from John Hicks' icon fonts article for 24 Ways">
<aside class="notes">
<ul>
<li>My first exposure was John Hicks' article for 24 ways</li>
<li>Where I learned the concept of embedding icons as characters in a font</li>
</ul>
</aside>
</section>
<section data-background="#222">
<img data-src="img/safari-octicons-intro.png" alt="Screenshot from GitHub's blog post introducing Octicons">
<aside class="notes">
<ul>
<li>But GitHub did a lot with their octicons to legitimize the technique</li>
</ul>
</aside>
</section>
<section data-background="#222">
<img data-src="img/safari-font_awesome.png" alt="Screenshot of Font Awesome website">
<aside class="notes">
<ul>
<li>And especially Font Awesome really took off in popularity</li>
</ul>
</aside>
</section>
<section data-background="#093c75">
<h2 style="color: #71C7F2;">Let’s review…</h2>
</section>
<section>
<div class="row-between">
<div>
<img data-src="img/file-stack.svg" width="275" height="275"/>
<p>SVG Files<br> </p>
</div>
<svg class="fragment" data-fragment-index="1" width="60" height="60" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 5 22 12 15 19"/>
<line x1="20" y1="12" x2="2" y2="12"/>
</g>
</svg>
<div class="fragment" data-fragment-index="1">
<p>Unicode<br>Characters</p>
</div>
<svg class="fragment" data-fragment-index="2" width="60" height="60" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 5 22 12 15 19"/>
<line x1="20" y1="12" x2="2" y2="12"/>
</g>
</svg>
<div class="fragment" data-fragment-index="2">
<img data-src="img/file-stack.svg" width="275" height="275"/>
<p>WOFF, WOFF2, EOT,<br>TTF, OTF and/or SVG</p>
</div>
</div>
<aside class="notes">
<ul>
<li>Start with some SVG files (already weird)</li>
<li>Assign these to unicode characters (private-use, fallbacks, or let a robot decide)</li>
<li>A tool compiles into files, most based on PostScript (34 years old)</li>
</ul>
</aside>
</section>
<section>
<pre><code class="css h3" data-trim>
@font-face {
font-family: "IconFont";
src: url("iconfont.eot");
src: url("iconfont.eot#iefix") format("embedded-opentype"),
url("iconfont.woff2") format("woff2"),
url("iconfont.woff") format("woff"),
url("iconfont.ttf") format("truetype"),
url("iconfont.svg#iconfontregular") format("svg");
font-weight: normal;
font-style: normal;
}
</code></pre>
<aside class="notes">
<ul>
<li>We define this font using a chunk of CSS we don't understand</li>
</ul>
</aside>
</section>
<section>
<pre><code class="css h3" data-trim>
.icon {
display: inline-block;
font: normal normal normal 16px/1 IconFont;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<aside class="notes">
<ul>
<li>We style the eventual icon element, being sure to include whatever proprietary font styles we can to make them display less like fonts and more like icons</li>
</ul>
</aside>
</section>
<section>
<div class="row">
<pre><code class="css" data-trim>
.icon-add:before {
content: "\f000";
}
.icon-arrow-up:before {
content: "\f001";
}
.icon-arrow-down:before {
content: "\f002";
}
.icon-arrow-right:before {
content: "\f003";
}
.icon-arrow-left:before {
content: "\f004";
}
</code></pre>
<pre><code class="css" data-trim>
.icon-bookmark:before {
content: "\f005";
}
.icon-caret:before {
content: "\f006";
}
.icon-cog:before {
content: "\f007";
}
.icon-envelope:before {
content: "\f008";
}
.icon-headphones:before {
content: "\f009";
}
</code></pre>
<pre><code class="css" data-trim>
.icon-heart:before {
content: "\f00a";
}
.icon-home:before {
content: "\f00b";
}
.icon-power:before {
content: "\f00c";
}
.icon-search:before {
content: "\f00d";
}
.icon-x:before {
content: "\f00e";
}
</code></pre>
</div>
<aside class="notes">
<ul>
<li>We then define additional classes</li>
<li>Human-readable class names (since characters are not)</li>
<li>Inject unicode characters via a pseudo element</li>
</ul>
</aside>
</section>
<section>
<pre class="inline-block width-auto"><code class="html h3" data-trim>
<span class="icon icon-foo"></span>
</code></pre>
<aside class="notes">
<ul>
<li>Only then can we reference said icon in our HTML from a meaningless element</li>
<li>But at this point, what we've written is still not accessible</li>
<li>I won't go into those steps now...</li>
</ul>
</aside>
</section>
<section data-background="img/hackers.jpg">
<aside class="notes">
<ul>
<li>But like a lot of hacks, what may be brilliant at the time...</li>
</ul>
</aside>
</section>
<section data-background="img/hackers.gif">
<aside class="notes">
<ul>
<li>Tends to age rather poorly</li>
</ul>
</aside>
</section>
<section data-background="#eee">
<svg style="transform-origin: center; transform: scale(1.2);" id="StackOctocat" width="800" height="300" viewBox="0 150 800 300">
<path d="M325.61,322.21a3.06,3.06,0,0,1-6.12,0c-.09-1.25-.4-1.64,3.06-8.42C326,320.57,325.7,321,325.61,322.21Zm4.64-12c0-1-1.15-1.85-2.38-1.85s-2.38.84-2.38,1.85,1.15,1.85,2.38,1.85S330.24,311.22,330.24,310.22Zm-.39,0c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S329.85,311,329.85,310.22Zm5.42,2.91c0-1-1.15-1.85-2.38-1.85s-2.38.84-2.38,1.85,1.15,1.85,2.38,1.85S335.27,314.13,335.27,313.13Zm-.39,0c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S334.88,313.93,334.88,313.13Zm135.23,66.93c0,8.59-31,15.63-69.34,15.63s-69.34-7-69.34-15.62c0-6.15,16-11.52,39.23-14.06a10.63,10.63,0,0,1-3,5.76l-.38.29-.4.29-1.13.59c-5.52,2.05-3.26,4.2-3.26,4.2,1.3,1.07,8.66.39,8.66,0,0,0,10.33-1.76,11.25-12.11l4.29-.29v1.17s-.41,8.79-5.12,11.62c-3.14,1.86-2.65,5.57,3.63,4.59,0,0,11.6-.39,13.26-16.8v-.88h4.22v.88c1,14.36,11.57,16.31,13.69,16.6,5.26.78,6.42-2.54,2.92-4.69-4.32-2.64-4.81-10.64-4.84-11.33v-1.17c1.44.1,2.86.2,4.26.2.63,9.38,7.09,11.82,12.27,12.4,0,0,7,1,7.72-.49,1.52-2.93-2.61-3.91-2.61-3.91a8.83,8.83,0,0,1-5.84-7C453.79,368.43,470.12,373.8,470.12,380.05ZM339,317.13c0-1-1.15-1.85-2.38-1.85s-2.38.84-2.38,1.85,1.15,1.85,2.38,1.85S339,318.13,339,317.13Zm-2.38,1.43c1.1,0,2-.65,2-1.46s-.89-1.46-2-1.46-2,.65-2,1.46S335.51,318.56,336.61,318.56Zm2.91,4.89c1.23,0,2.38-.85,2.38-1.85s-1.15-1.85-2.38-1.85-2.38.84-2.38,1.85S338.29,323.45,339.52,323.45Zm0-.39c1.1,0,2-.65,2-1.46s-.89-1.46-2-1.46-2,.65-2,1.46S338.42,323.06,339.52,323.06Zm5.82,2.78c0-1-1.15-1.85-2.38-1.85s-2.38.84-2.38,1.85,1.15,1.85,2.38,1.85S345.34,326.84,345.34,325.84Zm-.39,0c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S344.95,326.65,344.95,325.84Zm5.16,4c0-1-1.15-1.85-2.38-1.85s-2.38.84-2.38,1.85,1.15,1.85,2.38,1.85S350.11,330.82,350.11,329.82Zm-.39,0c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S349.72,330.62,349.72,329.81Zm6.75,2.38c0-1-1.15-1.85-2.38-1.85s-2.38.85-2.38,1.85,1.15,1.85,2.38,1.85S356.46,333.2,356.46,332.2Zm-.39,0c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S356.07,333,356.07,332.2Zm7,.27c0-1-1.15-1.85-2.38-1.85s-2.38.84-2.38,1.85,1.15,1.85,2.38,1.85S363.08,333.46,363.08,332.46Zm-.39,0c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S362.69,333.27,362.69,332.46Zm6.75-1.06c0-1-1.15-1.85-2.38-1.85s-2.38.84-2.38,1.85,1.15,1.85,2.38,1.85S369.44,332.41,369.44,331.4Zm-.39,0c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S369,332.21,369,331.4Z" class="StackOctocat-backdrop"/>
<path d="M523,283.68a.81.81,0,0,1-.67,1.23l-.2,0c-11.7-2.74-24.2-3.83-40.56-3.54-3.52.06-7.2.18-11.22.37q-.94,2.43-2,4.59c19.11.73,38.53,3.91,53.51,8.77a.81.81,0,0,1-.26,1.58l-.23,0c-15-4.87-34.68-8-53.85-8.72a39.36,39.36,0,0,1-3.73,5.64c-6.63,8.23-17.38,13.72-26.52,16.24a160,160,0,0,1-16.75,2.74c4.2,3.49,9.11,10.63,9.11,20.89v29.74s-.75,7.32,6.09,9.77c.47.2,2.89.88,2.87,2.64a2.44,2.44,0,0,1-.16.88c-.33,1.76-2.91,2.34-2.91,2.34-6.76,2.44-6,9.77-6,9.77v4.88c-3.67.39-7.49.68-11.42,1v-6.15a19.13,19.13,0,0,1,.59-4.88c-4.13,2.64-4.73,10.06-4.8,11.23-3.84.2-7.76.29-11.74.29.7-8.69,5-12.7,8.67-14.65-3.66-2-7.91-6-8.56-14.75V327.06H398v38.24a26.52,26.52,0,0,1-2.15,8.4,14.78,14.78,0,0,1-5.9,6.64c3.22,2.05,6.88,6.05,7.87,14.55-4,0-7.89-.2-11.72-.29-.1-1.46-.85-8.89-5.14-11.43a14.73,14.73,0,0,1,.93,5.08v6.05c-3.93-.2-7.75-.59-11.41-1v-4.49s-.07-5.66-3.39-8.59l-.38-.29-.4-.29-1.13-.59c-5.52-2.05-3.26-4.2-3.26-4.2l.25-.2a9,9,0,0,1,3.13-1.76l1.13-.59.4-.29.38-.29c3.33-2.93,3.39-8.59,3.39-8.59v-20.8c-29,6.45-35.06-13.69-35.06-13.69-4.61-11.8-11.3-14.94-11.3-14.94-9.3-6.36.69-6.21.69-6.21,10.3.77,15.68,10.57,15.68,10.57,9.61,16.48,25.64,10.59,30.7,8.18a24.7,24.7,0,0,1,8.39-13.75c-11.66-1.14-21.1-3.2-30.93-8.69a38.21,38.21,0,0,1-15.9-15.95c-19.34.64-39.1,3.82-54.21,8.74l-.29,0a.85.85,0,0,1-.78-.56,1.33,1.33,0,0,1,.1-.62.64.64,0,0,1,.49-.4c15-4.89,34.64-8.08,53.89-8.79q-1-2.14-2-4.55c-4.21-.2-8-.33-11.7-.4-16.35-.29-28.86.8-40.51,3.54l-.2,0c-.39,0-.78-.26-.78-.62a.68.68,0,0,1,.1-.61.77.77,0,0,1,.49-.36c11.69-2.74,24.6-3.88,40.62-3.6,3.45.06,7.11.18,11.38.38l-.85-2.56a76.68,76.68,0,0,1-3.2-22.87c0-12.35,4.12-22.87,12.12-31.33-3.66-9.37-3.2-19.89,1.14-31.1.23-.23.69-.23,1.37-.46a31,31,0,0,1,3.66.23c3.66.46,7.77,1.6,15.32,5.26a73.9,73.9,0,0,1,11.89,7.09,112.09,112.09,0,0,1,58.54,0,103.64,103.64,0,0,1,18.06-9.83,41.5,41.5,0,0,1,11-2.75l2.92-.36c4.34,11.2,5.08,22.54,1.42,31.91A45.25,45.25,0,0,1,475,254.68a76.72,76.72,0,0,1-4,25.41c4.08-.19,7.57-.3,10.9-.36,16-.28,28.94.86,40.64,3.6a.8.8,0,0,1,.5.36ZM329.41,310.22c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S329.41,311,329.41,310.22Zm5,2.91c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S334.44,313.93,334.44,313.13Zm1.72,5.43c1.1,0,2-.65,2-1.46s-.89-1.46-2-1.46-2,.65-2,1.46S335.07,318.56,336.16,318.56Zm2.91,4.5c1.1,0,2-.65,2-1.46s-.89-1.46-2-1.46-2,.65-2,1.46S338,323.06,339.08,323.06Zm5.43,2.78c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S344.5,326.65,344.5,325.84Zm111.65-52.31c0-7.19-3.58-13.86-9.7-19.38-10.09-9.1-27.09-4.2-46.36-4.2s-36.41-4.85-46.49,4.31c-6,5.5-9.57,12.13-9.57,19.27C344,303.35,369.13,308,400.1,308S456.15,307.08,456.15,273.53ZM349.27,329.81c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S349.27,330.62,349.27,329.81Zm6.36,2.38c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S355.63,333,355.63,332.2Zm6.62.27c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S362.25,333.27,362.25,332.46Zm6.36-1.06c0-.8-.89-1.46-2-1.46s-2,.65-2,1.46.89,1.46,2,1.46S368.61,332.21,368.61,331.4Zm17.62,34.49V328.39c-4.43,3.13-4.22,12.41-4.22,12.41v23.14a12.75,12.75,0,0,1-6.59,11.33L374,376a14.48,14.48,0,0,1,5.17,4l0-.1a3.43,3.43,0,0,1,1.88-2.44C385.82,374.68,386.23,365.89,386.23,365.89Zm32-25.1s.21-8.71-4.22-12.15v37.24c0,.68.52,8.69,4.84,11.33a4.15,4.15,0,0,1,1.86,2,10.42,10.42,0,0,1,4.26-3.32,10.88,10.88,0,0,1-5.25-5.18,15.39,15.39,0,0,1-1.48-6.54Z" class="StackOctocat-reflection"/>
<path d="M461.44,191.44c4.34,11.2,5.08,22.54,1.42,31.91A45.25,45.25,0,0,1,475,254.68a76.72,76.72,0,0,1-4,25.41c4.08-.19,7.57-.3,10.9-.36,16-.28,28.94.86,40.64,3.6a.81.81,0,0,1-.17,1.59l-.2,0c-11.7-2.73-24.2-3.83-40.56-3.54-3.52.06-7.2.18-11.22.37q-.94,2.43-2,4.59c19.11.73,38.53,3.91,53.51,8.77a.81.81,0,0,1-.26,1.58l-.23,0c-15-4.87-34.68-8-53.85-8.72a39.36,39.36,0,0,1-3.73,5.64c-6.63,8.23-17.38,13.72-26.52,16.24a160.29,160.29,0,0,1-16.75,2.74c4.2,3.48,9.11,10.63,9.11,20.89v29.74s-.75,7.32,6,9.77c0,0,4.13,1,2.61,3.91-.76,1.46-7.72.49-7.72.49-5.46-.59-12.32-3.32-12.32-13.87V340.8s.21-8.71-4.22-12.15v37.24c0,.68.52,8.69,4.84,11.33,3.5,2.15,2.33,5.47-2.92,4.69-2.12-.29-12.73-2.25-13.69-16.6V327.06H398v38.24c-1.66,16.41-13.26,16.8-13.26,16.8-6.28,1-6.77-2.73-3.63-4.59,4.71-2.83,5.12-11.62,5.12-11.62V328.39c-4.43,3.13-4.22,12.41-4.22,12.41v22.95c-.18,11.52-11.32,13.38-11.32,13.38,0,.39-7.36,1.07-8.66,0,0,0-2.26-2.15,3.26-4.2l1.13-.59.4-.29.38-.29c3.33-2.93,3.39-8.59,3.39-8.59v-20.8c-29,6.45-35.06-13.69-35.06-13.69-4.61-11.8-11.3-14.94-11.3-14.94-9.3-6.36.69-6.21.69-6.21,10.3.77,15.68,10.57,15.68,10.57,9.61,16.48,25.64,10.59,30.7,8.18a24.7,24.7,0,0,1,8.39-13.75c-11.66-1.14-21.1-3.2-30.93-8.69a38.21,38.21,0,0,1-15.9-15.95c-19.34.64-39.1,3.82-54.21,8.74l-.29,0a.85.85,0,0,1-.78-.56,1.33,1.33,0,0,1,.1-.62.64.64,0,0,1,.49-.4c15-4.89,34.64-8.08,53.89-8.79q-1-2.14-2-4.55c-4.21-.2-8-.33-11.7-.4-16.35-.29-28.86.81-40.51,3.54l-.2,0c-.39,0-.78-.26-.78-.62a.68.68,0,0,1,.1-.61.77.77,0,0,1,.49-.36c11.69-2.74,24.6-3.88,40.62-3.6,3.45.06,7.11.18,11.38.38l-.85-2.56a76.68,76.68,0,0,1-3.2-22.87c0-12.35,4.12-22.87,12.12-31.33-3.66-9.37-3.2-19.89,1.14-31.1.23-.23.69-.23,1.37-.46a31,31,0,0,1,3.66.23c3.66.46,7.77,1.6,15.32,5.26a73.9,73.9,0,0,1,11.89,7.09,112.09,112.09,0,0,1,58.54,0,103.64,103.64,0,0,1,18.06-9.83,41.5,41.5,0,0,1,11-2.75Zm-136,118.78c0,.8.89,1.46,2,1.46s2-.65,2-1.46-.89-1.46-2-1.46S325.44,309.41,325.44,310.22Zm5,2.91c0,.8.89,1.46,2,1.46s2-.65,2-1.46-.89-1.46-2-1.46S330.47,312.33,330.47,313.13Zm3.71,4c0,.8.89,1.46,2,1.46s2-.65,2-1.46-.89-1.46-2-1.46S334.18,316.3,334.18,317.1Zm2.91,4.5c0,.8.89,1.46,2,1.46s2-.65,2-1.46-.89-1.46-2-1.46S337.09,320.8,337.09,321.6Zm3.44,4.24c0,.8.89,1.46,2,1.46s2-.65,2-1.46-.89-1.46-2-1.46S340.53,325,340.53,325.84Zm4.77,4c0,.8.89,1.46,2,1.46s2-.65,2-1.46-.89-1.46-2-1.46S345.3,329,345.3,329.81Zm6.36,2.38c0,.8.89,1.46,2,1.46s2-.65,2-1.46-.89-1.46-2-1.46S351.66,331.39,351.66,332.2Zm6.62.27c0,.8.89,1.46,2,1.46s2-.65,2-1.46-.89-1.46-2-1.46S358.28,331.66,358.28,332.46Zm6.36-1.06c0,.8.89,1.46,2,1.46s2-.65,2-1.46-.89-1.46-2-1.46S364.63,330.6,364.63,331.4Z" class="StackOctocat-main"/>
<path d="M446.86,254.14c6.12,5.52,9.69,12.19,9.69,19.37,0,33.53-25.08,34.43-56,34.43s-56-4.64-56-34.43c0-7.13,3.53-13.76,9.56-19.25,10.07-9.16,27.12-4.31,46.45-4.31S436.78,245,446.86,254.14Z" class="StackOctocat-white"/>
<path d="M446.86,254.14c6.12,5.52,9.69,12.19,9.69,19.37,0,33.53-25.08,34.43-56,34.43s-56-4.64-56-34.43c0-7.13,3.53-13.76,9.56-19.25,10.07-9.16,27.12-4.31,46.45-4.31S436.78,245,446.86,254.14Zm-88.39,21.12c0,9.23,5.22,16.72,11.66,16.72s11.65-7.49,11.65-16.72-5.22-16.71-11.65-16.72S358.47,266,358.47,275.26Zm62.21,0c0,9.23,5.22,16.72,11.65,16.72S444,284.5,444,275.26s-5.22-16.71-11.66-16.72S420.68,266,420.68,275.26Z" class="StackOctocat-face"/>
<path d="M377.65,275.29c0,6.1-3.38,11.05-7.55,11.05s-7.55-4.95-7.55-11.05,3.38-11.05,7.55-11.05S377.65,269.18,377.65,275.29Zm18.5,22a4.77,4.77,0,0,0,4.59,3.18c2.53,0,4.41-2.66,4.6-3.34a1.48,1.48,0,0,1,1.8-1,1.61,1.61,0,0,1,.95,1.89c-.44,1.56-3.28,5.52-7.35,5.52a7.73,7.73,0,0,1-7.41-5.67,1.59,1.59,0,0,1,1.14-1.78A1.51,1.51,0,0,1,396.14,297.24Zm8.32-7.72a3.74,3.74,0,1,1-3.74-3.74A3.8,3.8,0,0,1,404.46,289.52Zm35.45-14.24c0,6.1-3.38,11.05-7.55,11.05s-7.55-4.95-7.55-11.05,3.38-11.05,7.55-11.05S439.91,269.18,439.91,275.29Z" class="StackOctocat-features"/>
</svg>
<p style="margin-bottom: 0;">
<small>Source: <a href="http://stackicons.com/">Parker Bennett</a></small>
</p>
<div class="fragment" data-hook='toggleClass'
data-hook-options='{
"target": "#StackOctocat",
"className": "is-color"
}'></div>
<div class="fragment" data-hook='toggleClass'
data-hook-options='{
"target": "#StackOctocat",
"className": "is-spread"
}'></div>
<div class="fragment" data-hook='removeClass'
data-hook-options='{
"target": "#StackOctocat",
"className": "is-spread"
}'></div>
<div class="fragment" data-hook='toggleClass'
data-hook-options='{
"target": "#StackOctocat",
"className": "is-wiggly"
}'></div>
</section>
<!-- <section data-background="#222">
<img data-src="img/safari-stackicons.png" alt="Screenshot of Stackicons website">
<aside class="notes">
<ul>
<li>There are also many visual issues</li>
<li>They are monochromatic, a problem we've creatively attempted to sidestep</li>
</ul>
</aside>
</section>
<section data-background="img/stackicons-octocat-detail.png">
<aside class="notes">
<ul>
<li>But thanks to font hinting built for letterforms</li>
<li>It never looked that great</li>
</ul>
</aside>
</section>
<section data-background="img/stackicons-octocat-detail-gray.svg" data-background-color="#000">
<h3 class="caps">Soon…</h3>
<aside class="notes">
<ul>
<li>For me, the most compelling argument against icon fonts</li>
</ul>
</aside>
</section> -->
<section data-background="img/slide-ninjanails-death-title.jpg" data-background-size="contain" data-background-color="#000">
<aside class="notes">
<ul>
<li>I was emboldened to ditch icon fonts by Seren Davies' talk</li>
<li>Challenges for dyslexic users</li>
</ul>
</aside>
</section>
<section data-background="img/slide-ninjanails-death-gh-1.jpg" data-background-size="contain">
<aside class="notes">
<ul>
<li>Interfaces that relied on icon fonts to communicate important info</li>
</ul>
</aside>
</section>
<section data-background="img/slide-ninjanails-death-gh-3.jpg" data-background-size="contain">
<aside class="notes">
<ul>
<li>Any part of the UI that relied on icon fonts is now unintelligible</li>
</ul>
</aside>
</section>
<section data-background="#222">
<svg width="640" height="480" viewBox="0 0 640 480">
<g fill="white">
<path d="M600,240c0,88.37-103.27,160-280,160S40,328.37,40,240,143.27,80,320,80,600,151.63,600,240Z"/>
<polygon points="67.72 430.37 95.02 373.59 126.56 388.76 149.53 341 188.28 359.63 143.95 424.13 102.45 401.21 67.72 430.37"/>
</g>
<text class="weight-bold" x="50%" y="50%" dy="4%" text-anchor="middle" fill="#12A1E9" font-size="48">
trigram for heaven
</text>
<text x="30" y="460" fill="white">☰</text>
</svg>
<aside class="notes">
<ul>
<li>In certain situations, assistive devices may read certain characters aloud</li>
<li>Icon fonts can fail poorly, showing "missing character" blocks or even emojis</li>
</ul>
</aside>
</section>
<!-- <section data-background="#222">
<svg width="640" height="480" viewBox="0 0 640 480">
<g fill="white">
<path d="M600,240c0,88.37-103.27,160-280,160S40,328.37,40,240,143.27,80,320,80,600,151.63,600,240Z"/>
<polygon points="67.72 430.37 95.02 373.59 126.56 388.76 149.53 341 188.28 359.63 143.95 424.13 102.45 401.21 67.72 430.37"/>
</g>
<text class="weight-bold" x="50%" y="50%" dy="4%" text-anchor="middle" fill="#12A1E9" font-size="48">
Unpronounceable.
</text>
</svg>
<aside class="notes">
<ul>
<li>In certain situations, assistive devices may read certain characters aloud</li>
<li>Icon fonts can fail poorly, showing "missing character" blocks or even emojis</li>
</ul>
</aside>
</section> -->
<section>
<img data-src="img/etsy-rating.png" alt="Mockup of classic Etsy icon font fail">
<img class="fragment" data-src="img/etsy-bug.png" alt="Screenshot of user complaint" width="800">
<aside class="notes">
<ul>
<li>Your users could conceivable see horse emojis littering their star ratings...</li>
<li>Which is what happened to Etsy back in 2014</li>
</ul>
</aside>
</section>
<section data-background="#222">
<a href="https://twitter.com/grigs/status/702705369915625472/">
<img class="fragment grow-2x" data-src="img/espn-fistbump.jpg" width="350" alt="">
</a>
</section>
<section data-background="#eee">
<div class="row row-around">
<img data-src="img/firefox-focus-settings.png" width="350" alt="Screenshot of Firefox Focus 'settings' screen">
<img class="fragment grow-2x" data-src="img/firefox-focus-espn.png" width="350" alt="Screenshot of ESPN navigation in Firefox Focus with webfonts disabled">
</div>
<img class="fragment santa" src="img/santa.gif" alt="">
<aside class="notes">
<ul>
<li>And what will continue to happen</li>
<li>Ad blockers becoming more commonplace</li>
<li>All users may now start blocking your web fonts</li>
</ul>
</aside>
</section>
<section data-background="#093c75">
<h1 class="align-left" style="color: #71C7F2; line-height: 0.9;">There’s already a better way…</h1>
<aside class="notes">
<ul>
<li>Was that there's already a better way</li>
</ul>
</aside>
</section>
<section data-background="#093c75">
<h2 class="align-right" style="color: #71C7F2;">…and it’s not even very new</h2>
<aside class="notes">
<ul>
<li>And it's already more than a decade old</li>
<li>To learn more about it, we need to go back to 1998</li>
<li>The year the Beastie Boys got</li>
</ul>
</aside>
</section>
<!-- <section class="dark" data-background="img/ms-pac-man-cabinet.png" data-background-color="#222" data-background-size="auto 95%" data-background-position="5% bottom">
<h1>1982</h1>
</section> -->
<!-- <section class="dark" data-background="img/eileen.gif">
<h1 class="text-shadow">1982</h1>
<aside class="notes">
<ul>
<li>Of 1982</li>
<li>Dexy's Midnight Runners burned up the charts</li>
<li>Also the year...</li>
</ul>
</aside>
</section> -->
<!-- <section>
<svg width="960" height="600" viewBox="0 0 960 600">
<line x1="100" y1="50%" x2="860" y2="50%" stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
<g>
<circle cx="100" cy="50%" r="15" fill="white" stroke="currentColor" stroke-width="10"/>
<text x="100" y="28%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor" class="weight-bold">PostScript</text>
<text x="100" y="35%" dy="2%" font-size="22" text-anchor="middle" fill="currentColor">(Adobe)</text>
<text x="100" y="65%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor">1982</text>
</g>
<image class="fragment" xlink:href="img/macintosh.png" x="210" y="210" width="170" height="200"/>
<g class="fragment">
<circle cx="670" cy="50%" r="15" fill="white" stroke="currentColor" stroke-width="10"/>
<text x="670" y="28%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor" class="weight-bold">TrueType</text>
<text x="670" y="35%" dy="2%" font-size="22" text-anchor="middle" fill="currentColor">(Apple, Microsoft)</text>
<text x="670" y="65%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor">1991</text>
</g>
<g class="fragment">
<circle cx="860" cy="50%" r="15" fill="white" stroke="currentColor" stroke-width="10"/>
<text x="860" y="28%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor" class="weight-bold">OpenType</text>
<text x="860" y="35%" dy="2%" font-size="22" text-anchor="middle" fill="currentColor">(Microsoft, Adobe)</text>
<text x="860" y="65%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor">1994</text>
</g>
</svg>
<aside class="notes">
<ul>
<li>Adobe released PostScript</li>
<li>A programming language for vector images and fonts for print</li>
<li>But soon found a digital home with the introduction of graphical user interfaces</li>
<li>Expanded upon by Apple and later Microsoft with TrueType in 1991</li>
<li>And in 1994 when Microsoft introduced what would become OpenType</li>
</ul>
</aside>
</section> -->
<section class="dark" data-background="img/intergalactic.gif">
<h1 class="text-shadow" style="text-transform: uppercase;">Intergalactic</h1>
<h1 class="fragment text-shadow" style="text-transform: uppercase;">Planetary</h1>
<h1 class="fragment text-shadow" style="text-transform: uppercase;">Planetary</h1>
<h1 class="fragment text-shadow" style="text-transform: uppercase;">Intergalactic</h1>
<aside class="notes">
<ul>
<li>By 1998, more and more of us were using our computers to access the internet</li>
</ul>
</aside>
</section>
<!-- <section data-background="img/kensugimori.jpg" data-background-size="auto 95%" data-background-position="95% top">
<h1 class="align-left">1998</h1>
<aside class="notes">
<ul>
<li>By 1998, more and more of us were using our computers to access the internet</li>
</ul>
</aside>
</section> -->
<section data-background="#222">
<!-- <img data-src="img/ie5-apple.png" alt="Screenshot of Internet Explorer 5"> -->
<svg width="800" height="573" viewBox="0 0 800 573">
<defs>
<image id="ie5-apple" xlink:href="img/ie5-apple.png" width="800" height="573"/>
<clipPath id="ie5-apple-highlight">
<rect x="20" y="120" width="260" height="140" rx="5"/>
</clipPath>
</defs>
<use xlink:href="#ie5-apple" class="fragment fade-slightly"/>
<use xlink:href="#ie5-apple" clip-path="url(#ie5-apple-highlight)"/>
</svg>
<aside class="notes">
<ul>
<li>And we were designing these things called webpages</li>
<li>And decreasingly dependent on images</li>
<li>Yet our choices were limited when it came to flat imagery (logos, etc.)</li>
</ul>
</aside>
</section>
<section data-background="#222">
<div class="row-around">
<div>
<svg width="225" height="300" viewBox="0 0 300 400">
<defs>
<clipPath id="doge-clip">
<polygon points="10,10 220,10 290,80 290,270 10,270"/>
</clipPath>
</defs>
<polygon points="0,0 220,0 300,80 300,400 0,400" fill="white"/>
<image class="fragment" href="img/doge.jpg" x="-170" y="0" width="640" height="480" clip-path="url(#doge-clip)"/>
<polygon points="220,0 300,80 220,80" fill="#12A1E9"/>
<text class="weight-bold" x="50%" y="85%" text-anchor="middle" fill="#222" font-size="60">jpg</text>
</svg>
<!-- <p>Large size, no alpha</p> -->
</div>
<div class="fragment">
<svg width="225" height="300" viewBox="0 0 300 400">
<polygon points="0,0 220,0 300,80 300,400 0,400" fill="white"/>
<image class="fragment" href="img/guitar.gif" x="10" y="20" width="300" height="260"/>
<polygon points="220,0 300,80 220,80" fill="#12A1E9"/>
<text class="weight-bold" x="50%" y="85%" text-anchor="middle" fill="#222" font-size="60">gif</text>
</svg>
<!-- <p>Few colors, poor alpha</p> -->
</div>
<div class="fragment">
<svg width="225" height="300" viewBox="0 0 300 400">
<polygon points="5,5 220,5 295,80 295,395 5,395" fill="none" stroke="white" stroke-width="10" stroke-dasharray="25, 25"/>
<text class="weight-bold" x="50%" y="85%" text-anchor="middle" fill="white" font-size="60">png</text>
</svg>
<!-- <p>Poor support</p> -->
</div>
</div>
<aside class="notes">
<ul>
<li>JPG lacked alpha, compressed poorly</li>
<li>GIF had limited color palette, limited alpha</li>
<li>PNG existed but support was years away</li>
<li>Even PNG assets are unnecessarily large</li>
</ul>
</aside>
</section>
<section>
<div class="row row-around">
<div>
<svg width="242" height="242" viewBox="0 0 242 242">
<image xlink:href="img/icon-search-bitmap-base.png" x="1" y="1" width="240" height="240"/>
<image class="fragment" xlink:href="img/icon-search-bitmap-grid.png" x="0" y="0" width="242" height="242"/>
</svg>
<p>Bitmap</p>
</div>
<div class="fragment">
<svg width="242" height="242" viewBox="-0.1 -0.1 24.2 24.2">
<g fill="none" stroke="#000" stroke-linecap="round">
<circle cx="9.5" cy="9.5" r="7.5" stroke-width="3"/>
<line x1="16" y1="16" x2="21" y2="21" stroke-width="4"/>
</g>
<g class="fragment">
<g fill="none" stroke="#12a1e9" stroke-linecap="round" stroke-width=".2">
<rect x="0" y="0" width="24" height="24"/>
<circle cx="9.5" cy="9.5" r="7.5"/>
<line x1="16" y1="16" x2="21" y2="21"/>
</g>
<g fill="#12a1e9">
<rect x="9" y="9" width="1" height="1"/>
<rect x="15.5" y="15.5" width="1" height="1"/>
<rect x="20.5" y="20.5" width="1" height="1"/>
</g>
</g>
</svg>
<p>Vector</p>
</div>
</div>
<aside class="notes">
<ul>
<li>The problem was our bitmap imagery</li>
<li>Defined using a grid of pixels</li>
<li>Instead of vector imagery, which</li>
</ul>
</aside>
</section>
<section>
<h2>PostScript?</h2>
<div class="inline-block">
<p class="fragment align-left" data-fragment-index="0">
<svg width="36" height="36" viewBox="-6 -6 36 36" style="margin-bottom: -0.125em;">
<polyline fill="none" stroke="#2ECC40" stroke-width="6" points="0,15 9,24 24,6" stroke-linecap="round"/>
</svg>
Already supported by browsers
</p>
<p class="fragment align-left" data-fragment-index="1">
<svg width="36" height="36" viewBox="-6 -6 36 36" style="margin-bottom: -0.3em;">
<line x1="2" y1="2" x2="22" y2="22" stroke="#FF4136" stroke-width="6" stroke-linecap="round"/>
<line x1="2" y1="22" x2="22" y2="2" stroke="#FF4136" stroke-width="6" stroke-linecap="round"/>
</svg>
Developed for print
</p>
<p class="fragment align-left" data-fragment-index="1">
<svg width="36" height="36" viewBox="-6 -6 36 36" style="margin-bottom: -0.3em;">
<line x1="2" y1="2" x2="22" y2="22" stroke="#FF4136" stroke-width="6" stroke-linecap="round"/>
<line x1="2" y1="22" x2="22" y2="2" stroke="#FF4136" stroke-width="6" stroke-linecap="round"/>
</svg>
Encumbered by 16 years of history
</p>
</div>
<aside class="notes">
<ul>
<li>Browsers could already render PostScript vectors</li>
<li>But these standards were never developed with the web in mind</li>
<li>Brought years of complexity</li>
<li>What we <em>really</em> needed...</li>
</ul>
</aside>
</section>
<section>
<h2>A vector image format created <b style="color: #12a1e9">specifically</b> for the web</h2>
<aside class="notes">
<ul>
<li>A vector image format created <em>specifically</em> for the web</li>
<li>Apparently, organizations thought so, too</li>
</ul>
</aside>
</section>
<section>
<table>
<tbody>
<tr>
<th scope="row" class="fragment fade-slightly" data-fragment-index="0">
Web Schematics
</th>
<td class="fragment fade-slightly" data-fragment-index="0">
CCLRC
</td>
</tr>
<tr>
<th scope="row">
PGML
</th>
<td>
Adobe, IBM, Netscape, Sun
</td>
</tr>
<tr>
<th scope="row">
VML
</th>
<td>
Autodesk, HP, Macromedia, Microsoft
</td>
</tr>
<tr>
<th scope="row" class="fragment fade-slightly" data-fragment-index="0">
Hyper Graphics<br>Markup Language
</th>
<td class="fragment fade-slightly" data-fragment-index="0">
Orange, PCSL, PRP
</td>
</tr>
<tr>
<th scope="row" class="fragment fade-slightly" data-fragment-index="0">
WebCGM
</th>
<td class="fragment fade-slightly" data-fragment-index="0">
Boeing, CCLRC, Inso, JISC, Xerox
</td>
</tr>
<tr>
<th scope="row" class="fragment fade-slightly" data-fragment-index="0">
DrawML
</th>
<td class="fragment fade-slightly" data-fragment-index="0">
Excosoft
</td>
</tr>
</tbody>
</table>
<aside class="notes">
<ul>
<li>By 1998, six separate proposals were submitted to the W3C</li>
<li>PGML and VML were the clear front-runners</li>
</ul>
</aside>
</section>
<section>
<svg width="960" height="600" viewBox="0 0 960 600">
<line x1="100" y1="50%" x2="860" y2="50%" stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
<g>
<circle cx="100" cy="50%" r="15" fill="white" stroke="currentColor" stroke-width="10"/>
<text x="100" y="29%" dy="2%" font-size="22" text-anchor="middle" fill="currentColor">W3C forms SVG</text>
<text x="100" y="34%" dy="2%" font-size="22" text-anchor="middle" fill="currentColor">Working Group</text>
<text x="100" y="65%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor">1998</text>
</g>
<g class="fragment">
<circle cx="556" cy="50%" r="15" fill="white" stroke="currentColor" stroke-width="10"/>
<text x="556" y="28%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor" class="weight-bold">SVG 1.0</text>
<text x="556" y="35%" dy="2%" font-size="22" text-anchor="middle" fill="currentColor">Recommendation</text>
<text x="556" y="65%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor">2001</text>
</g>
<g class="fragment">
<circle cx="860" cy="50%" r="15" fill="white" stroke="currentColor" stroke-width="10"/>
<text x="860" y="28%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor" class="weight-bold">SVG 1.1</text>
<text x="860" y="35%" dy="2%" font-size="22" text-anchor="middle" fill="currentColor">Recommendation</text>
<text x="860" y="65%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor">2003</text>
</g>
</svg>
<aside class="notes">
<ul>
<li>A working group was formed in 1998</li>
<li>3 years later, 1.0 recommendation for "Scalable Vector Graphics"</li>
<li>Followed swiftly by 1.1, the current version</li>
</ul>
</aside>
</section>
<section>
<svg width="960" height="600" viewBox="0 0 960 600">
<image class="fragment" data-fragment-index="3" xlink:href="img/ie.gif" x="346" y="85" width="500" height="333"/>
<line x1="100" y1="50%" x2="860" y2="50%" stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
<g>
<circle cx="100" cy="50%" r="15" fill="white" stroke="currentColor" stroke-width="10"/>
<text x="100" y="35%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor" class="weight-bold">Konqueror</text>
<text x="100" y="65%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor">2004</text>
</g>
<g class="fragment" data-fragment-index="1">
<circle cx="208" cy="50%" r="15" fill="white" stroke="currentColor" stroke-width="10"/>
<text x="208" y="25%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor" class="weight-bold">Opera, Gecko</text>
<text x="208" y="65%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor">2005</text>
</g>
<g class="fragment" data-fragment-index="2">
<circle cx="316" cy="50%" r="15" fill="white" stroke="currentColor" stroke-width="10"/>
<text x="316" y="35%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor" class="weight-bold">Webkit</text>
<text x="316" y="65%" dy="2%" font-size="32" text-anchor="middle" fill="currentColor">2006</text>