1return {
2 [[
3 <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
4 <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
5 </svg>
6 ]],
7 [[
8 <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
9 <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
10 <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
11 <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
12 </svg>
13 ]],
14 [[
15 <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
16 <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
17 <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/>
18 <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
19 </svg>
20 ]],
21 [[
22 <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
23 <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
24 <path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
25 </svg>
26 ]],
27 [[
28 <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
29 <circle cx="5" cy="5" r="3" stroke="green" />
30 <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" />
31 <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" />
32 </svg>
33 ]],
34 [[
35 <svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
36 <path stroke="black" fill="none" stroke-linejoin="miter" id="p1"
37 d="M1,9 l7 ,-3 l7 ,3
38 m2,0 l3.5 ,-3 l3.5 ,3
39 m2,0 l2 ,-3 l2 ,3
40 m2,0 l0.75,-3 l0.75,3
41 m2,0 l0.5 ,-3 l0.5 ,3" />
42 <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2"
43 d="M1,19 l7 ,-3 l7 ,3
44 m2, 0 l3.5 ,-3 l3.5 ,3
45 m2, 0 l2 ,-3 l2 ,3
46 m2, 0 l0.75,-3 l0.75,3
47 m2, 0 l0.5 ,-3 l0.5 ,3" />
48 <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="8" id="p3"
49 d="M1,29 l7 ,-3 l7 ,3
50 m2, 0 l3.5 ,-3 l3.5 ,3
51 m2, 0 l2 ,-3 l2 ,3
52 m2, 0 l0.75,-3 l0.75,3
53 m2, 0 l0.5 ,-3 l0.5 ,3" />
54 <path stroke="pink" fill="none" stroke-width="0.05"
55 d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
56 M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
57 M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
58 </svg>
59 ]],
60 [[
61 <svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
62 <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
63 <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />
64 <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="3" />
65 <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" />
66 <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" />
67 <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
68 </svg>
69 ]],
70 [[
71 <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
72 <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
73 <path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-dasharray="5,5" fill="none" stroke-width="1"/>
74 </svg>
75 ]],
76 [[
77 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
78 <path fill="none" stroke="red"
79 d="M 10,10 h 10
80 m 0,10 h 10
81 m 0,10 h 10
82 M 40,20 h 10
83 m 0,10 h 10
84 m 0,10 h 10
85 m 0,10 h 10
86 M 50,50 h 10
87 m-20,10 h 10
88 m-20,10 h 10
89 m-20,10 h 10" />
90 </svg>
91 ]],
92 [[
93 <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
94 <path fill="none" stroke="red" d="M 10,10 L 90,90 V 10 H 50" />
95 <path fill="none" stroke="red" d="M 110,10 l 80,80 v -80 h -40" />
96 </svg>
97 ]],
98 [[
99 <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
100 <path fill="none" stroke="red" d="M 10,90 C 30,90 25,10 50,10 S 70,90 90,90" />
101 <path fill="none" stroke="red" d="M 110,90 c 20,0 15,-80 40,-80 s 20,80 40,80" />
102 <g id="ControlPoints">
103 <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
104 <circle cx="30" cy="90" r="1.5"/>
105 <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
106 <circle cx="25" cy="10" r="1.5"/>
107 <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" />
108 <circle cx="75" cy="10" r="1.5" fill="lightgrey"/>
109 <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
110 <circle cx="70" cy="90" r="1.5"/>
111 <circle cx="10" cy="90" r="1.5"/>
112 <circle cx="50" cy="10" r="1.5"/>
113 <circle cx="90" cy="90" r="1.5"/>
114 </g>
115 <use xlink:href="#ControlPoints" x="100" />
116 </svg>
117 ]],
118 [[
119 <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
120 <path fill="none" stroke="red" d="M 10,50 Q 25,25 40,50 t 30,0 30,0 30,0 30,0 30,0" />
121 <g>
122 <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" />
123 <circle cx="25" cy="25" r="1.5" />
124 <circle cx="10" cy="50" r="1.5"/>
125 <circle cx="40" cy="50" r="1.5"/>
126 <g id="SmoothQuadraticDown">
127 <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
128 <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
129 <circle cx="70" cy="50" r="1.5" />
130 </g>
131 <g id="SmoothQuadraticUp">
132 <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
133 <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
134 <circle cx="100" cy="50" r="1.5" />
135 </g>
136 <use xlink:href="#SmoothQuadraticDown" x="60" />
137 <use xlink:href="#SmoothQuadraticUp" x="60" />
138 <use xlink:href="#SmoothQuadraticDown" x="120" />
139 </g>
140 </svg>
141 ]],
142 [[
143 <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
144 <path fill="none" stroke="red" d="M 6,10 A 6 4 10 1 0 14,10" />
145 <path fill="none" stroke="lime" d="M 6,10 A 6 4 10 1 1 14,10" />
146 <path fill="none" stroke="purple" d="M 6,10 A 6 4 10 0 1 14,10" />
147 <path fill="none" stroke="pink" d="M 6,10 A 6 4 10 0 0 14,10" />
148 </svg>
149 ]],
150 [[
151 <svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
152 <path stroke="red" d="M 5,1 l -4,8 8,0" />
153 <path stroke="red" d="M 15,1 l -4,8 8,0 -4,-8" />
154 <path stroke="red" d="M 25,1 l -4,8 8,0 z" />
155 </svg>
156 ]],
157 [[
158 <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
159 <ellipse cx="100" cy="50" rx="100" ry="50" />
160 </svg>
161 ]],
162 [[
163 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
164 <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
165 </svg>
166 ]],
167 [[
168 <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
169 <polygon points="0,100 50,25 50,75 100,0" />
170 <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
171 </svg>
172 ]],
173 [[
174 <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
175 <polyline points="0,100 50,25 50,75 100,0" />
176 <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
177 </svg>
178 ]],
179 [[
180 <svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
181 <rect width="100" height="100" />
182 <rect x="120" width="100" height="100" rx="15" />
183 </svg>
184 ]],
185 [[
186 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
187 <path fill="none" stroke="red"
188 d="M 10,30
189 A 20,20 0,0,1 50,30
190 A 20,20 0,0,1 90,30
191 Q 90,60 50,90
192 Q 10,60 10,30 z" />
193 </svg>
194 ]],
195 [[
196 <svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
197 <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/>
198 <polygon fill-rule="evenodd" stroke="red" points="150,0 121,90 198,35 102,35 179,90"/>
199 </svg>
200 ]],
201 [[
202 <svg x="0" width="10" height="10" clip="auto">
203 <circle cx="5" cy="5" r="4" stroke="green" />
204 </svg>
205 ]],
206 [[
207 <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)">
208 <circle cx="5" cy="5" r="4" stroke="green" />
209 </svg>
210 </svg>
211 ]],
212 [[
213 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
214 <rect x="0" y="0" width="100%" height="100%" fill="red"/>
215 <circle cx="50%" cy="50%" r="4" fill="yellow"/>
216 </svg>
217 ]],
218 [[
219 <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
220 <rect x="0" y="0" width="100%" height="100%" fill="green"/>
221 <circle cx="50%" cy="50%" r="4" fill="yellow"/>
222 </svg>
223 ]],
224 [[
225 <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
226 <rect x="0" y="0" width="100%" height="100%" fill="blue"/>
227 <circle cx="50%" cy="50%" r="4" fill="yellow"/>
228 </svg>
229 ]],
230 [[
231 <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
232 <rect x="10" y="10" width="30" height="20" fill="green" />
233 <rect x="10" y="10" width="30" height="20" fill="red" transform="matrix(3 1 -1 3 30 40)" />
234 </svg>
235 ]],
236 [[
237 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
238 <rect x="5" y="5" width="40" height="40" fill="green" />
239 <rect x="5" y="5" width="40" height="40" fill="blue" transform="translate(50)" />
240 <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" />
241 <rect x="5" y="5" width="40" height="40" fill="yellow" transform="translate(50,50)" />
242 </svg>
243 ]],
244 [[
245 <svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
246 <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />
247 <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1,4)" />
248 <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4,1)" />
249 <circle cx="0" cy="0" r="10" fill="black" />
250 </svg>
251 ]],
252 [[
253 <svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
254 <rect x="0" y="0" width="10" height="10" />
255 <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />
256 <rect x="0" y="0" width="10" height="10" fill="green" transform="rotate(100,10,10)" />
257 </svg>
258 ]],
259 [[
260 <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
261 <rect x="-3" y="-3" width="6" height="6" />
262 <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
263 </svg>
264 ]],
265 [[
266 <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
267 <rect x="-3" y="-3" width="6" height="6" />
268 <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
269 </svg>
270 ]],
271 [[
272 <svg width="100" viewBox="0 0 100 90" xmlns="http://www.w3.org/2000/svg" version="1.1">
273 <defs>
274 <path d="M50,0 21,90 98,35 2,35 79,90z" id="star" />
275 </defs>
276 <clipPath id="emptyStar">
277 <use xlink:href="#star" clip-rule="evenodd" />
278 </clipPath>
279 <rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" />
280 <clipPath id="filledStar">
281 <use xlink:href="#star" clip-rule="nonzero" />
282 </clipPath>
283 <rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" />
284 </svg>
285 ]],
286
287
288
289
290
291
292
293
294
295
296
297
298
299 [[
300 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
301 <defs>
302 <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
303 <path d="M 0 0 L 10 5 L 0 10 z" />
304 </marker>
305 <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5">
306 <circle cx="5" cy="5" r="5" fill="red" />
307 </marker>
308 </defs>
309 <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" />
310 <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" />
311 </svg>
312 ]],
313
314 [[
315 <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
316 <defs>
317 <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
318 <stop offset="0%" style="stop-color:skyblue;" />
319 <stop offset="100%" style="stop-color:seagreen;" />
320 </linearGradient>
321 </defs>
322 <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
323 <circle cx="50" cy="50" r="40" fill="black" />
324 <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
325 </svg>
326 ]],
327 [[
328 <svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
329 <circle cx="50" cy="50" r="40" />
330 <circle cx="150" cy="50" r="40" fill-opacity="0.7" />
331 <circle cx="250" cy="50" r="40" fill-opacity="50%" />
332 <circle cx="350" cy="50" r="40" style="fill-opacity: .25;" />
333 </svg>
334 ]],
335 [[
336 <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
337 <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
338 <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" />
339 <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" />
340 <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" />
341 <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" />
342 </svg>
343 ]],
344 [[
345 <svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
346 <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
347 <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />
348 <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="3" />
349 <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" />
350 <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" />
351 <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
352 </svg>
353 ]],
354 [[
355 svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
356 <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />
357 <text text-anchor="start" x="60" y="40">A</text>
358 <text text-anchor="middle" x="60" y="75">A</text>
359 <text text-anchor="end" x="60" y="110">A</text>
360 <circle cx="60" cy="40" r="3" fill="red" />
361 <circle cx="60" cy="75" r="3" fill="red" />
362 <circle cx="60" cy="110" r="3" fill="red" />
363 </svg>
364 ]],
365
366 [[
367 <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
368 <defs>
369 <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
370 <stop offset="0%" style="stop-color:skyblue;" />
371 <stop offset="100%" style="stop-color:seagreen;" />
372 </linearGradient>
373 </defs>
374 <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
375 <circle cx="50" cy="50" r="40" fill="black" />
376 <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
377 </svg>
378 ]],
379 [==[
380 <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
381 <defs>
382 <linearGradient id="Gradient1">
383 <stop class="stop1" offset="0%"/>
384 <stop class="stop2" offset="50%"/>
385 <stop class="stop3" offset="100%"/>
386 </linearGradient>
387 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
388 <stop offset="0%" stop-color="red"/>
389 <stop offset="50%" stop-color="black" stop-opacity="0"/>
390 <stop offset="100%" stop-color="blue"/>
391 </linearGradient>
392 <style type="text/css">
393 #rect1 { fill: url(#Gradient1); }
394 .stop1 { stop-color: red; }
395 .stop2 { stop-color: black; stop-opacity: 0; }
396 .stop3 { stop-color: blue; }
397 </style>
398 </defs>
399 <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
400 <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
401 </svg>
402 ]==],
403 [[
404 <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
405 <defs>
406 <radialGradient id="RadialGradient1">
407 <stop offset="0%" stop-color="red"/>
408 <stop offset="100%" stop-color="blue"/>
409 </radialGradient>
410 <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
411 <stop offset="0%" stop-color="red"/>
412 <stop offset="100%" stop-color="blue"/>
413 </radialGradient>
414 </defs>
415 <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
416 <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
417 </svg>
418 ]],
419 [[
420 <svg width="120" height="120" version="1.1"
421 xmlns="http://www.w3.org/2000/svg">
422 <defs>
423 <radialGradient id="Gradient"
424 cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
425 <stop offset="0%" stop-color="red"/>
426 <stop offset="100%" stop-color="blue"/>
427 </radialGradient>
428 </defs>
429 <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient)" stroke="black" stroke-width="2"/>
430 <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
431 <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
432 <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
433 <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
434 <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
435 </svg>
436 ]],
437 [[
438 <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
439 <defs>
440 <radialGradient id="GradientPad"
441 cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
442 spreadMethod="pad">
443 <stop offset="0%" stop-color="red"/>
444 <stop offset="100%" stop-color="blue"/>
445 </radialGradient>
446 <radialGradient id="GradientRepeat"
447 cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
448 spreadMethod="repeat">
449 <stop offset="0%" stop-color="red"/>
450 <stop offset="100%" stop-color="blue"/>
451 </radialGradient>
452 <radialGradient id="GradientReflect"
453 cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
454 spreadMethod="reflect">
455 <stop offset="0%" stop-color="red"/>
456 <stop offset="100%" stop-color="blue"/>
457 </radialGradient>
458 </defs>
459 <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
460 <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
461 <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
462 <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
463 <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
464 <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
465 </svg>
466 ]],
467 [[
468 <svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
469 <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
470 <circle cx="1" cy="1" r="1" />
471 </symbol>
472 <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" />
473 <use xlink:href="#myDot" x="5" y="5" style="opacity:1.0" />
474 <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" />
475 <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" />
476 <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" />
477 <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" />
478 </svg>
479 ]],
480 [[
481 <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
482 <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
483 <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
484 <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
485 <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
486 <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
487 <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/>
488 <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/>
489 <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
490 </svg>
491 ]],
492 [[
493 <svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
494 <radialGradient id="gradient1" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="100" fx="100" fy="100">
495 <stop offset="0%" stop-color="darkblue" />
496 <stop offset="50%" stop-color="skyblue" />
497 <stop offset="100%" stop-color="darkblue" />
498 </radialGradient>
499 <radialGradient id="gradient2" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="100" fx="100" fy="100" gradientTransform="skewX(20) translate(-35, 0)">
500 <stop offset="0%" stop-color="darkblue" />
501 <stop offset="50%" stop-color="skyblue" />
502 <stop offset="100%" stop-color="darkblue" />
503 </radialGradient>
504 <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />
505 <xrect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translateX(220px);" />
506 <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" transform="translateX(220px)" />
507 </svg>
508 ]],
509}
510 |