-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathSVGRetCon-slide-notes.html
237 lines (229 loc) · 8.19 KB
/
SVGRetCon-slide-notes.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notes: The Great SVG RetCon</title>
<style>
body {
-moz-column-width: 20em;
column-width: 20em;
max-height: calc(100vh - 36px);
padding: 0.5em 0.2em;
box-sizing: border-box;
font-family: Open Sans, sans-serif;
}
h1:first-child {
margin-top: auto;
}
li {
padding-bottom: 0.1em;
}
strong {
line-height: 1.5;
}
</style>
</head>
<body>
<h1 id="the-great-svg-retcon">The Great SVG RetCon</h1>
<ul>
<li><strong>Cover Slide</strong></li>
<li><strong>Title Page</strong></li>
<li>Introduce myself</li>
<li><strong>Cover Repeat</strong></li>
<li>Define terms: Great, SVG, Con</li>
<li>Broken continuity</li>
<li><strong>A magic suit</strong></li>
<li><strong>Retroactive</strong></li>
<li>Why?</li>
<li>Move the story forward</li>
<li><strong>A spinoff TV show</strong></li>
<li><strong>just one problem</strong></li>
</ul>
<h2 id="retcon-ing-the-web">RetCon-ing the Web</h2>
<ul>
<li>Continuity even more important</li>
<li>You can't reboot the web</li>
<li>Different from other programming environments</li>
<li>Different from JS frameworks & libraries</li>
<li><strong>It's been tried (XML)</strong></li>
<li><strong>or like this (XML part 2)</strong></li>
<li>Standards makers have learned</li>
<li>Old websites still supported</li>
<li>New features allow fallbacks</li>
<li><strong>picture element builds on img</strong></li>
<li><strong>brings us to SVG 2</strong></li>
<li>Candidate Recommendation</li>
<li>Many new features</li>
<li>Also many dropped features</li>
<li>Today, focus on changes in concepts.</li>
</ul>
<h2 id="markup">Markup</h2>
<ul>
<li><strong>SVG is XML</strong></li>
<li>XML didn't take over the world</li>
<li>Retcon'd story:</li>
<li><strong>SVG is ... or XML</strong> (<em>read!</em>)</li>
<li>You probably already use it</li>
<li>SVG 2 changes just tidying up</li>
<li><strong>But .svg still XML</strong></li>
<li>Same markup, different file name, different parser</li>
<li>What if you need .svg?</li>
<li><strong>Use the parser, Luke</strong></li>
<li>Easy: MS Edge right-click</li>
<li>Otherwise: Dev Tools</li>
<li>What about reverse direction?</li>
<li>Continuity good, except:</li>
<li><strong>No weird prefixes</strong></li>
<li>SVG software will use correct prefixes, but:</li>
<li><strong>Avoid bloated files</strong></li>
<li>HTML parser ignores it, but why have it?</li>
<li><strong>Warning: namespaces & scripting</strong></li>
<li>The proper way</li>
<li>Use the parser, Luke</li>
<li>(watch for innerHTML support)</li>
</ul>
<h2 id="links">Links</h2>
<ul>
<li>Next most basic part of the web</li>
<li>The old story:</li>
<li><strong>SVG uses XLink ...</strong> (<em>read!</em>)</li>
<li>XLink was a neat idea</li>
<li>But went nowhere</li>
<li>SVG only "simple" links</li>
<li>HTML had same, without XLink</li>
<li>So:</li>
<li><strong>SVG uses href ...</strong> (<em>read!</em>)</li>
<li>What does this mean to you?</li>
<li><strong>Not much, Sorry</strong></li>
<li>Continuity with old browsers</li>
<li>Fallback rules in spec don't help authors</li>
<li><strong>Except for test cases</strong></li>
<li>Browser test results</li>
<li>It will get better... (when you can drop support for old browsers)</li>
</ul>
<h2 id="styles">Styles</h2>
<ul>
<li>This is a CSS conference</li>
<li>But CSS was still new</li>
<li><strong>SVG styles ... or XML attr</strong> (<em>read!</em>)</li>
<li>CSS support was not required</li>
<li>But CSS keeps getting bigger</li>
<li>3 problems:
<ul>
<li>Too many attributes</li>
<li>New features don't map to attributes</li>
<li>No fallback in attributes</li>
</ul>
</li>
<li>So:</li>
<li><strong>SVG styles are defined ...</strong> (<em>read!</em>)</li>
<li>CSS required <em>for software</em></li>
<li>No new presentation attributes</li>
<li><strong>CSS-in-SVG automatically upgrades</strong></li>
<li>Use CSS fallback methods</li>
<li>But where?</li>
<li>Img must be same file</li>
<li>Object / Inline can be external</li>
<li>2 dangers:
<ul>
<li>Style clash for inline</li>
<li>Lost URL refs</li>
</ul>
</li>
<li>But what does it mean to style an SVG?</li>
</ul>
<h2 id="geometry">Geometry</h2>
<ul>
<li>style vs content</li>
<li><strong>Geometric structure...</strong></li>
<li>Works for drawings</li>
<li><strong>Cat vs Rabbit vs Crazy Cat</strong></li>
<li>But not all SVGs are drawings</li>
<li>geometry as stylistic choice</li>
<li>repeated geometry for classes</li>
<li>Presentation attributes = RetCon opportunity!</li>
<li>New separation of style and structure</li>
<li><strong>Document structure...</strong></li>
<li>Document structure defined</li>
<li>Benefits:
<ul>
<li>reduce duplication</li>
<li>media queries</li>
<li>pseudoclasses</li>
<li>CSS animations & transitions</li>
</ul>
</li>
<li><strong>But… attributes ≠ styles</strong>
<ul>
<li>attribute always has element</li>
<li>style (should be) universal</li>
</ul>
</li>
<li><strong>rx & ry, rect vs ellipse</strong></li>
<li><strong>rx & ry, defaults differ</strong></li>
<li>Choice to break continuity; only breaking an error state</li>
<li>Other cases not so easy, e.g. text</li>
<li>The RetCon is incomplete</li>
<li><strong>Geometry Properties Table</strong></li>
<li>shapes vs graphical effects</li>
<li>Polygon, polyline, line missing</li>
<li>Didn't want to lock in bad decisions</li>
<li>May need new CSS-friendly syntax, similar to transform</li>
</ul>
<h2 id="transforms">Transforms</h2>
<ul>
<li>Other half of core SVG geometry</li>
<li>Also originally attribute-only</li>
<li><strong>SVG coordinate system ... attribute</strong></li>
<li><strong>transform examples</strong></li>
<li>manipulate shape/drawing as a whole, without changing geometry attributes</li>
<li>CSS wanted it, too</li>
<li>CSS Transforms module</li>
<li>For SVG, same presentation attribute RetCon</li>
<li>But style also applies to other elements</li>
<li>Revised story:</li>
<li><strong>Coordinates can be...</strong></li>
<li>Wonderful.</li>
<li>Not wonderful.</li>
<li>Buggy transforms in SVG?</li>
<li>Broken continuity!</li>
<li>CSS Transforms spec designed for CSS layout needs.</li>
<li><strong>SVG layout vs CSS</strong></li>
<li>Firefox: continuity</li>
<li>Blink/WebKit: consistency(-ish)</li>
<li>Microsoft: Nothing (yet)</li>
<li>Solution: transform-box!</li>
<li><strong>view-box vs fill-box: setup</strong></li>
<li><strong>view-box vs fill-box: figure</strong></li>
<li>default will be backwards compatible</li>
<li>change transform-box and transform-origin for same behavior as CSS</li>
<li>no transform-box options for non-SVG yet</li>
<li>Not in browsers. Coming soon(-ish).</li>
<li>Final story:</li>
<li><strong>Coordinates ... and transform-box ...</strong></li>
<li>For now: fallbacks!</li>
<li>Attribute works everywhere</li>
<li>But other differences</li>
<li><strong>Table of syntax comparisons</strong></li>
<li>Biggest difference: units</li>
<li>Other: new shorthands</li>
<li>These were good retcons!</li>
<li>Use legacy syntax for now.</li>
<li>Can use CSS transforms, with careful fallback:
<ul>
<li>optional hover effects</li>
<li>alternate media query layouts</li>
</ul>
</li>
<li><strong>3D with 2D fallback</strong></li>
<li>Beware many 3D bugs!</li>
<li><strong>Fallback layout if no 3D</strong></li>
</ul>
<h2 id="so-much-more">So much more</h2>
<ul>
<li>Not enough time!</li>
</ul>
<h2 id="about-me">About me</h2>
</body>
</html>