-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdraft-iab-svg-rfc-01.html
3490 lines (2939 loc) · 139 KB
/
draft-iab-svg-rfc-01.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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head profile="http://dublincore.org/documents/2008/08/04/dc-html/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="index,follow">
<meta name="creator" content="rfcmarkup version 1.116">
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/">
<meta name="DC.Description.Abstract" content="This document specifies SVG 1.2 RFC - an SVG profile for use in
diagrams that may appear in RFCs - and considers some of the issues
concerning the creation and use of such diagrams.">
<meta name="DC.Creator" content="Nevil Brownlee <[email protected]>">
<meta name="DC.Identifier" content="urn:ietf:id:iab-svg-rfc">
<meta name="DC.Title" content="SVG Drawings for RFCs: SVG 1.2 RFC">
<link rel="icon" href="https://tools.ietf.org/images/id.png" type="image/png">
<link rel="shortcut icon" href="https://tools.ietf.org/images/id.png" type="image/png">
<title>draft-iab-svg-rfc-01 - SVG Drawings for RFCs: SVG 1.2 RFC</title>
<style type="text/css">
@media only screen
and (min-width: 992px)
and (max-width: 1199px) {
body { font-size: 14pt; }
div.content { width: 96ex; margin: 0 auto; }
}
@media only screen
and (min-width: 768px)
and (max-width: 991px) {
body { font-size: 14pt; }
div.content { width: 96ex; margin: 0 auto; }
}
@media only screen
and (min-width: 480px)
and (max-width: 767px) {
body { font-size: 11pt; }
div.content { width: 96ex; margin: 0 auto; }
}
@media only screen
and (max-width: 479px) {
body { font-size: 8pt; }
div.content { width: 96ex; margin: 0 auto; }
}
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
body { font-size: 9.5pt; }
div.content { width: 96ex; margin: 0 1px; }
}
@media only screen
and (min-device-width: 1200px) {
body { font-size: 10pt; margin: 0 4em; }
div.content { width: 96ex; margin: 0; }
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: bold;
line-height: 0pt;
display: inline;
white-space: pre;
font-family: monospace;
font-size: 1em;
font-weight: bold;
}
pre {
font-size: 1em;
margin-top: 0px;
margin-bottom: 0px;
}
.pre {
white-space: pre;
font-family: monospace;
}
.header{
font-weight: bold;
}
.newpage {
page-break-before: always;
}
.invisible {
text-decoration: none;
color: white;
}
a.selflink {
color: black;
text-decoration: none;
}
@media print {
body {
font-family: monospace;
font-size: 10.5pt;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1em;
}
a:link, a:visited {
color: inherit;
text-decoration: none;
}
.noprint {
display: none;
}
}
@media screen {
.grey, .grey a:link, .grey a:visited {
color: #777;
}
.docinfo {
background-color: #EEE;
}
.top {
border-top: 7px solid #EEE;
}
.bgwhite { background-color: white; }
.bgred { background-color: #F44; }
.bggrey { background-color: #666; }
.bgbrown { background-color: #840; }
.bgorange { background-color: #FA0; }
.bgyellow { background-color: #EE0; }
.bgmagenta{ background-color: #F4F; }
.bgblue { background-color: #66F; }
.bgcyan { background-color: #4DD; }
.bggreen { background-color: #4F4; }
.legend { font-size: 90%; }
.cplate { font-size: 70%; border: solid grey 1px; }
}
</style>
<!--[if IE]>
<style>
body {
font-size: 13px;
margin: 10px 10px;
}
</style>
<![endif]-->
<script type="text/javascript"><!--
function addHeaderTags() {
var spans = document.getElementsByTagName("span");
for (var i=0; i < spans.length; i++) {
var elem = spans[i];
if (elem) {
var level = elem.getAttribute("class");
if (level == "h1" || level == "h2" || level == "h3" || level == "h4" || level == "h5" || level == "h6") {
elem.innerHTML = "<"+level+">"+elem.innerHTML+"</"+level+">";
}
}
}
}
var legend_html = "Colour legend:<br /> <table> <tr><td>Unknown:</td> <td><span class='cplate bgwhite'> </span></td></tr> <tr><td>Draft:</td> <td><span class='cplate bgred'> </span></td></tr> <tr><td>Informational:</td> <td><span class='cplate bgorange'> </span></td></tr> <tr><td>Experimental:</td> <td><span class='cplate bgyellow'> </span></td></tr> <tr><td>Best Common Practice:</td> <td><span class='cplate bgmagenta'> </span></td></tr> <tr><td>Proposed Standard:</td> <td><span class='cplate bgblue'> </span></td></tr> <tr><td>Draft Standard (old designation):</td> <td><span class='cplate bgcyan'> </span></td></tr> <tr><td>Internet Standard:</td> <td><span class='cplate bggreen'> </span></td></tr> <tr><td>Historic:</td> <td><span class='cplate bggrey'> </span></td></tr> <tr><td>Obsolete:</td> <td><span class='cplate bgbrown'> </span></td></tr> </table>";
function showElem(id) {
var elem = document.getElementById(id);
elem.innerHTML = eval(id+"_html");
elem.style.visibility='visible';
}
function hideElem(id) {
var elem = document.getElementById(id);
elem.style.visibility='hidden';
elem.innerHTML = "";
}
// -->
</script>
</head>
<body onload="addHeaderTags()">
<div class="content">
<div style="height: 13px;">
<div onmouseover="this.style.cursor='pointer';" onclick="showElem('legend');" onmouseout="hideElem('legend')" style="height: 6px; position: absolute;" class="pre noprint docinfo bgred" title="Click for colour legend."> </div>
<div id="legend" class="docinfo noprint pre legend" style="position:absolute; top: 4px; left: 4ex; visibility:hidden; background-color: white; padding: 4px 9px 5px 7px; border: solid #345 1px; " onmouseover="showElem('legend');" onmouseout="hideElem('legend');">
</div>
</div>
<span class="pre noprint docinfo top">[<a href="https://tools.ietf.org/html/" title="Document search and retrieval page">Docs</a>] [<a href="https://tools.ietf.org/id/draft-iab-svg-rfc-01.txt" title="Plaintext version of this document">txt</a>|<a href="https://tools.ietf.org/pdf/draft-iab-svg-rfc-01.txt" title="PDF version of this document">pdf</a>|<a href="https://tools.ietf.org/id/draft-iab-svg-rfc-01.xml" title="XML source for this document">xml</a>] [<a href="https://datatracker.ietf.org/doc/draft-iab-svg-rfc" title="IESG Datatracker information for this document">Tracker</a>] [<a href="mailto:[email protected]?subject=draft-iab-svg-rfc%20" title="Send email to the document authors">Email</a>] [<a href="https://tools.ietf.org/rfcdiff?difftype=--hwdiff&url2=draft-iab-svg-rfc-01.txt" title="Inline diff (wdiff)">Diff1</a>] [<a href="https://tools.ietf.org/rfcdiff?url2=draft-iab-svg-rfc-01.txt" title="Side-by-side diff">Diff2</a>] [<a href="https://tools.ietf.org/idnits?url=https://tools.ietf.org/id/draft-iab-svg-rfc-01.txt" title="Run an idnits check of this document">Nits</a>] </span><br>
<span class="pre noprint docinfo"> </span><br>
<span class="pre noprint docinfo">Versions: <a href="https://tools.ietf.org/html/draft-iab-svg-rfc-00">00</a> <a href="https://tools.ietf.org/html/draft-iab-svg-rfc-01">01</a> </span><br>
<span class="pre noprint docinfo"> </span><br>
<pre>Network Working Group N. Brownlee
Internet-Draft The University of Auckland
Intended status: Informational IAB
Expires: July 30, 2016 January 27, 2016
<span class="h1"><h1>SVG Drawings for RFCs: SVG 1.2 RFC</h1></span>
<span class="h1"><h1>draft-iab-svg-rfc-01</h1></span>
Abstract
This document specifies SVG 1.2 RFC - an SVG profile for use in
diagrams that may appear in RFCs - and considers some of the issues
concerning the creation and use of such diagrams.
Status of This Memo
This Internet-Draft is submitted in full conformance with the
provisions of <a href="https://tools.ietf.org/html/bcp78">BCP 78</a> and <a href="https://tools.ietf.org/html/bcp79">BCP 79</a>.
Internet-Drafts are working documents of the Internet Engineering
Task Force (IETF). Note that other groups may also distribute
working documents as Internet-Drafts. The list of current Internet-
Drafts is at <a href="http://datatracker.ietf.org/drafts/current/">http://datatracker.ietf.org/drafts/current/</a>.
Internet-Drafts are draft documents valid for a maximum of six months
and may be updated, replaced, or obsoleted by other documents at any
time. It is inappropriate to use Internet-Drafts as reference
material or to cite them other than as "work in progress."
This Internet-Draft will expire on July 30, 2016.
Copyright Notice
Copyright (c) 2016 IETF Trust and the persons identified as the
document authors. All rights reserved.
This document is subject to <a href="https://tools.ietf.org/html/bcp78">BCP 78</a> and the IETF Trust's Legal
Provisions Relating to IETF Documents
(<a href="http://trustee.ietf.org/license-info">http://trustee.ietf.org/license-info</a>) in effect on the date of
publication of this document. Please review these documents
carefully, as they describe your rights and restrictions with respect
to this document. Code Components extracted from this document must
include Simplified BSD License text as described in <a href="#section-4">Section 4</a>.e of
the Trust Legal Provisions and are provided without warranty as
described in the Simplified BSD License.
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 1]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-2" id="page-2" href="#page-2" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
Table of Contents
<a href="#section-1">1</a>. Introduction . . . . . . . . . . . . . . . . . . . . . . . . <a href="#page-2">2</a>
<a href="#section-2">2</a>. SVG 1.2 RFC: An SVG profile for RFCs . . . . . . . . . . . . <a href="#page-3">3</a>
2.1. Elements, properties and attributes allowed in SVG 1.2
RFC . . . . . . . . . . . . . . . . . . . . . . . . . . . <a href="#page-4">4</a>
<a href="#section-3">3</a>. How to create SVG drawings . . . . . . . . . . . . . . . . . <a href="#page-6">6</a>
<a href="#section-4">4</a>. Accessibility Considerations . . . . . . . . . . . . . . . . <a href="#page-7">7</a>
<a href="#section-5">5</a>. Meta-language for diagrams common in RFCs . . . . . . . . . . <a href="#page-8">8</a>
<a href="#section-5.1">5.1</a>. Packet Layout Diagrams . . . . . . . . . . . . . . . . . <a href="#page-8">8</a>
<a href="#section-5.2">5.2</a>. Sequence Diagrams (1) . . . . . . . . . . . . . . . . . . <a href="#page-9">9</a>
<a href="#section-5.3">5.3</a>. Sequence Diagrams (2) . . . . . . . . . . . . . . . . . . <a href="#page-11">11</a>
<a href="#section-6">6</a>. IANA Considerations . . . . . . . . . . . . . . . . . . . . . <a href="#page-13">13</a>
<a href="#section-7">7</a>. Acknowledgements . . . . . . . . . . . . . . . . . . . . . . <a href="#page-13">13</a>
<a href="#section-8">8</a>. Revision History [RFC Editor please delete] . . . . . . . . . <a href="#page-14">14</a>
<a href="#section-9">9</a>. References . . . . . . . . . . . . . . . . . . . . . . . . . <a href="#page-15">15</a>
<a href="#section-9.1">9.1</a>. Normative References . . . . . . . . . . . . . . . . . . <a href="#page-16">16</a>
<a href="#section-9.2">9.2</a>. Informative References . . . . . . . . . . . . . . . . . <a href="#page-16">16</a>
<a href="#appendix-A">Appendix A</a>. RELAX NG Compact (rnc) Schema for SVG 1.2 RFC . . . <a href="#page-17">17</a>
Authors' Addresses . . . . . . . . . . . . . . . . . . . . . . . <a href="#page-59">59</a>
<span class="h2"><h2><a class="selflink" name="section-1" href="#section-1">1</a>. Introduction</h2></span>
Over the last two years the RFC Editor has worked with the Internet
community to develop specifications for changes in the format of
RFCs. An outline of the resulting specifications was published as
[<a href="https://tools.ietf.org/html/rfc6949" title=""RFC Series Format Requirements and Future Development"">RFC6949</a>] in May 2013. Since then a Design Team has been working
with the RFC Editor to flesh out those specifications. One aspect of
the changes is to allow line drawings in RFCs; [<a href="https://tools.ietf.org/html/rfc6949" title=""RFC Series Format Requirements and Future Development"">RFC6949</a>] says
"Graphics may include ASCII art and a more complex form to be
defined, such as SVG line art [SVG]. Color and grayscale will not
be accepted. RFCs must correctly display in monochromatic black-
and-white to allow for monochrome displays, black-and-white
printing, and support for visual disabilities."
SVG (Scalable Vector Graphics) has been developed by W3C, the World
Wide Web Consortium; its current standard is SVG 1.1 Full
[<a href="#ref-W3C.REC-SVG11-20110816">W3C.REC-SVG11-20110816</a>]. This document defines SVG 1.2 RFC, an SVG
profile (i.e. a subset of SVG) that is suitable for RFC line
drawings.
Note that in RFCs, the text provides normative descriptions of
protocols, systems, etc. Diagrams may be used to help explain
concepts more clearly, but they provide supporting detail, and should
not be considered to be complete specifications in themselves.
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 2]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-3" id="page-3" href="#page-3" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
The details (particularly any vocabularies) described in this
document are expected to change based on experience gained in
implementing the RFC production center's toolset. Revised documents
will be published capturing those changes as the toolset is
completed. Other implementors must not expect those changes to
remain backwards-compatible with the details described in this
document.
<span class="h2"><h2><a class="selflink" name="section-2" href="#section-2">2</a>. SVG 1.2 RFC: An SVG profile for RFCs</h2></span>
As a starting point for SVG 1.2 RFC, the Design Team decided to use
SVG 1.2 Tiny [<a href="#ref-W3C.REC-SVGTiny12-20081222">W3C.REC-SVGTiny12-20081222</a>]. SVG 1.2 Tiny is an SVG
subset intended to be implemented on small, mobile devices such as
cellphones and smartphones. That should allow RFCs to be rendered
well on such devices, especially those that have small screens.
However, RFCs are self-contained documents that do not change once
they are published. The use of SVG drawings in RFCs is intended to
allow authors to create drawings that are simple to produce, and
easier to understand than our traditional 'ASCII Art' ones. In
short, we are also trying to improve access to the content in RFCs,
so SVG drawings need to be kept as simple as possible.
SVG can provide a complete User Interface, but within RFCs, all we
need are simple diagrams that do not change once the RFC is
published. Therefore, SVG RFC does not allow anything from the
following sections in SVG Tiny 1.2 [<a href="#ref-W3C.REC-SVGTiny12-20081222">W3C.REC-SVGTiny12-20081222</a>]:
12 Multimedia
13 Interactivity
15 Scripting
16 Animation
18 Metadata
19 Extensibility
Note that SVG Tiny 1.2 elements may have many properties or
attributes that are needed to support aspects of the above sections.
Those are not allowed in SVG 1.2 RFC.
Considering the other sections in SVG Tiny 1.2
[<a href="#ref-W3C.REC-SVGTiny12-20081222">W3C.REC-SVGTiny12-20081222</a>]:
9 Basic Shapes
10 Text
Everything in these sections is allowed in SVG 1.2 RFC.
11 Painting: Filling, Stroking, Colors and Paint Servers
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 3]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-4" id="page-4" href="#page-4" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
Anything relating to 'color' is not allowed in SVG 1.2 RFC,
everything else is allowed. This is a requirement documented in
[<a href="https://tools.ietf.org/html/rfc6949" title=""RFC Series Format Requirements and Future Development"">RFC6949</a>].
14 Linking
SVG Tiny 1.2 allows internationalized IRIs in references. In
SVG 1.2 RFC such links must be ASCII only. That should not
cause problems, since one can just use the URI form of any IRI.
Authors should try to use links only to URIs that are long-term
stable.
17 Fonts
SVG 1.2 RFC only allows 'serif', 'sans-serif' and 'monospace'
generic font families from the WebFonts facility, described in
CSS 2.1, [<a href="#ref-W3C.REC-CSS2-20110607">W3C.REC-CSS2-20110607</a>], section 15, Fonts. In
particular, the SVG 'font' element is not allowed.
<span class="h3"><h3><a class="selflink" name="section-2.1" href="#section-2.1">2.1</a>. Elements, properties and attributes allowed in SVG 1.2 RFC</h3></span>
Elements, properties and attributes selected for SVG 1.2 RFC from
[<a href="#ref-W3C.REC-SVGTiny12-20081222">W3C.REC-SVGTiny12-20081222</a>].
In the list below, elements and properties are listed on the
left,and their allowed values are given in parentheses on the
right.
<color> is the list of allowed colors, a black-and-white
subset of the SVG color names.
<style> is a set of CSS attributes that are commonly used (by SVG
drawing applications). They are not part of SVG Tiny 1.2,
but are included here for compatibility. Note that
- There is no guarantee that any renderer will implement
all the CSS attributes a drawing application may use.
- Authors will need to consider the compatibility of their
drawings with rendering devices.
Elements:
svg (version, baseProfile=tiny, width, viewBox,
preserveAspectRatio, snapshotTime, height,
id, role)
g (label, class, id, role, fill, <style>, transform)
defs (id, role, fill)
title (id, role)
desc (id, role)
a (id, role, fill, transform)
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 4]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-5" id="page-5" href="#page-5" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
use (x, y, href, xlink:href, id, role, fill, transform)
rect (x, y, width, height, rx, ry, stroke-miterlimit
id, role, fill, <style>, transform)
circle (cx, cy, r,
id, role, fill, <style>, transform)
ellipse (cx, cy, rx, ry,
id, role, fill, <style>, transform)
line (x1, y1, x2, y2, id, role, fill, transform)
polyline (points, id, role, fill, transform)
polygon (points, id, role, fill, <style>, transform)
text (x, y, rotate, id, role, fill, <style>, transform)
tspan (id, role, fill)
textArea (x, y, width, height, auto, id, role, fill, transform)
tbreak (id, role)
solidColor (id, role, fill)
linearGradient (gradientUnits, x1, y1, x2, y2, id, role, fill)
radialGradient (gradientUnits, cx, cy, r, id, role, fill)
stop (id, role, fill)
path (d, pathLength, stroke-miterlimit,
id, role, fill, <style>, transform)
Properties: (most allow inherit as a value)
<style> (font-family, font-weight, font-style,
font-variant, direction, unicode-bidi, text-anchor,
fill, fill-rule)
<color> (black, white, #000000, #ffffff, #FFFFFF)
stroke (<color>, none, currentColor)
stroke-width
stroke-linecap (butt, round, square)
stroke-linejoin (miter, round, bevel)
stroke-mitrelimit
stroke-dasharray
stroke-dashoffset
stroke-opacity
vector-effect (non-scaling-stroke, none)
viewport-fill (none, currentColor)
viewport-fill-opacity
display (inline, block, list-item, run-in, compact,
marker, table, inline-table, table-row-group,
table-header-group, table-footer-group,
table-row, table-column-group,
table-column, table-cell, table-caption,
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 5]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-6" id="page-6" href="#page-6" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
none)
visibility (visible, hidden, collapse)
color-rendering (auto, optimizeSpeed, optimizeQuality)
shape-rendering (auto, optimizeSpeed, crispEdges,
geometricPrecision)
text-rendering (auto, optimizeSpeed, optimizeLegibility,
geometricPrecision)
buffered-rendering (auto, dynamic, static)
opacity
solid-opacity
solid-color (currentColor, <color>)
color (currentColor, <color>)
line-increment (auto)
text-align (start,end, center)
display-align (auto, before, center, after)
font-size
font-family (serif, sans-serif, monospace)
font-weight (normal, bold, bolder, lighter)
font-style (normal, italic, oblique)
font-variant (normal, small-caps)
direction (ltr, rtl)
unicode-bidi (normal, embed, bidi-override)
text-anchor (start, middle, end)
fill (none, <color>)
fill-rule (nonzero, evenodd)
fill-opacity
<span class="h2"><h2><a class="selflink" name="section-3" href="#section-3">3</a>. How to create SVG drawings</h2></span>
Many drawing packages can be used to create SVG drawings, for example
Open Source packages Inkscape and Dia. Be aware that such packages
may use SVG elements or attributes that are not allowed in SVG 1.2
RFC.
-For example, the 'marker' attribute is often used to place symbols
such as arrowheads on lines, but 'marker' is not allowed in SVG 1.2
Tiny or SVG 1.2 RFC. In such cases one has to draw the arrowhead in
another, simpler way.
-SVG clip paths are used to define a shape; objects outside that
shape become invisible. The 'clipPath' element is not allowed in
SVG 1.2 Tiny or SVG 1.2 RFC.
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 6]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-7" id="page-7" href="#page-7" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
Diagrams produced with these packages may contain elements, their
attributes or properties, or values of attributes or properties that
are not allowed in SVG 1.2 RFC. We will need to provide a tool to
strip out anything that is not allowed in SVG 1.2 RFC, or to replace
disallowed values, e.g., 'sans-serif' for 'Sans' as values for 'font-
family'. Experience with a simple test version of a tool for this
has shown that such deletion and replacement can be effective for
making SVG files from drawing packages conform to SVG 1.2 RFC,
without visibly changing the diagrams they produce.
The tool described above can also be used by Authors simply to check
that their diagrams conform to SVG 1.2 RFC. To help with this, if
visible changes do occur, the tool should produce a list of non-
allowed keywords and the context in which they were found.
Another way to create SVG drawings is to write programs to draw them.
For example, using python and its svgwrite module is a pleasant
environment (for those who like writing code).
To include a diagram into an RFC, the xml2rfc (v3) tool will need to
provide a way to include SVG drawings in Internet Drafts, as
described in [<a href="#ref-XML2RFCv3">XML2RFCv3</a>] sections <a href="#section-2.5">2.5</a> and <a href="#section-2.67">2.67</a>.
<span class="h2"><h2><a class="selflink" name="section-4" href="#section-4">4</a>. Accessibility Considerations</h2></span>
One of the long-term goals for RFCs is to make them more accessible,
e.g. to sight-impaired readers. For diagrams, it would be useful for
authors to provide alternative forms of the diagram, so that voice-
reading software could be used to 'talk through' the diagram. Simply
reading the SVG code for a complex diagram seems unlikely to work.
SVG 1.2 RFC allows SVG's 'title' and 'desc' elements. 'title'
provides a brief text caption for an SVG object (much like a figure
caption), and 'desc' provides a longer text description of what the
object actually represents. As well, the SVG 'role' attribute can be
used to indicate to a browser how an SVG object is to be interpreted.
Good suggestions on how to use these elements are given in
[<a href="#ref-SVG-ACCESS-TIPS">SVG-ACCESS-TIPS</a>].
ARIA is a W3C Recommendation for using SVG to create 'Accessible Rich
Internet Applications.' A helpful introduction to ARIA is provided
by [<a href="#ref-SVG-ARIA-PRIMER">SVG-ARIA-PRIMER</a>], while [<a href="#ref-SVG-USING-ARIA">SVG-USING-ARIA</a>] gives examples of how to
use ARIA to enhance SVG accessibility.
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 7]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-8" id="page-8" href="#page-8" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
<span class="h2"><h2><a class="selflink" name="section-5" href="#section-5">5</a>. Meta-language for diagrams common in RFCs</h2></span>
This section presents a few examples of possible meta-languages which
could be used to create the kinds of diagrams that are most common in
RFCs. Note that they are merely examples, they do not imply that
these particular experimental languages might be more widely
implemented or used. Instead, they seem to show that designing meta-
languages simple enough to serve as audible representations of
complex diagrams is difficult indeed!
The SVG diagrams produced from the following examples can be seen at
[<a href="#ref-This-I-D-with-SVG-included">This-I-D-with-SVG-included</a>] along with an html version of this draft
that includes the SVG diagrams.
<span class="h3"><h3><a class="selflink" name="section-5.1" href="#section-5.1">5.1</a>. Packet Layout Diagrams</h3></span>
Example: Figure 3 from [<a href="https://tools.ietf.org/html/rfc0793" title=""Transmission Control Protocol"">RFC0793</a>].
In these examples the first line specifies the generated SVG
filename. The scale factor determines the size of the SVG drawing;
it needs to be set so that the drawing fits nicely into the final
document.
'packet;' starts the packet description; it's followed by a
description of the fields in each row.
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 8]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-9" id="page-9" href="#page-9" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
info;
output "tcp-header.svg", scale 0.65;
packet;
row 0;
field "Source Port", 0 to 15;
field "Destination Port", 16 to 31;
row 1;
field "Sequence Number", 0 to 31;
row 2;
field "Acknowledgement Number", 0 to 31;
row 3;
field "Data Offset", 0 to 3;
field "Reserved", 4 to 9;
field "Urg", 10 to 10, fsize 14; # 14 px font so the flags fit
field "Ack", 11 to 11, fsize 14;
field "Psh", 12 to 12, fsize 14;
field "Rst", 13 to 13, fsize 14;
field "Syn", 14 to 14, fsize 14;
field "Fin", 15 to 15, fsize 14;
field "Window", 16 to 31;
row 4;
field "Checksum", 0 to 15;
field "Urgent Pointer", 16 to 31;
row 5;
field "Options", 0 to 23;
field "Padding", 24 to 31;
row 6;
field "Data", 0 to 31;
<img src="tcp-header.svg" width="679" height="180"
alt="RFC 793 Fig 3, TCP header layout" />
<span class="h3"><h3><a class="selflink" name="section-5.2" href="#section-5.2">5.2</a>. Sequence Diagrams (1)</h3></span>
Example: Figure 6 from [<a href="#ref-ExpTrustedProxy">ExpTrustedProxy</a>].
In this example, columns are vertical lines with a text header above
them. There are three columns, and columns 1 and 2 are spaced 250
pixels apart.
The rest of the file describes objects to be drawn; most of them are
plines (polylines) from one column to another, but object 3 only
extends across to 0.3 of the distance between columns 1 and 2.
info;
output "httpbis-proxy20-fig6.svg", scale 0.9;
#Thu, 30 Jan 14 (NZDT)
#Figure 6 of <a href="https://tools.ietf.org/html/draft-loreto-httpbis-trusted-proxy20-00.txt">draft-loreto-httpbis-trusted-proxy20-00.txt</a>
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 9]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-10" id="page-10" href="#page-10" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
column 1 width 250; # columns have vertical line to bottom
text above "user-agent";
column 2 width 250;
text "Proxy";
column 3; # Last col
text "Server";
object 1; # Only need polylines
pline 1 to 2, arrowhead at end;
text above "(1) TLS ClientHello";
text below "(ALPN ProtocolName: http)";
object 2;
pline 1 to 2, arrowhead at start;
text above "(2) TLS Error";
text below "(Proxy Cert)";
object 3;
pline 1 to 1.3, down, back to 1, arrowhead at end;
text seg 2 centre "(inform user of the SecureProxy)";
object 4;
pline 1 to 2, arrowhead at end;
text above "(3) TLS ClientHello";
object 5;
pline 1 to 2, arrowhead at start;
text above "(4) ServerHello";
object 6;
blank 1 to 2;
object 7;
block 1 to 2, objects 8 to 15;
text above "HTTP2.0";
object 8;
pline 1 to 2, arrowhead at end;
text seg 1 centre "(5) stream(X) GET";
object 9;
pline 2 to 3, arrowhead at end;
text seg 1 above "(6) TLS ClientHello";
object 10;
pline 2 to 3, arrowhead at start;
<img src="httpbis-proxy20-fig6.svg" width="541" height="584"
alt="Fig 6, draft-loreto-httpbis-trusted-proxy20-00" />
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 10]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-11" id="page-11" href="#page-11" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
text seg 1 above "TLS ServerHello";
object 11;
blank 2 to 3;
object 12;
block 2 to 3, objects 13 to 15;
text seg 1 above "HTTP2.0";
object 13;
pline 2 to 3, arrowhead at end;
text seg 1 centre "(7) stream(Z) GET";
object 14;
pline 2 to 3, arrowhead at start;
text seg 1 centre "(8) stream(Z) 200 OK";
object 15;
pline 1 to 2, arrowhead at start;
text seg 1 centre "(9) stream(X) 200 OK";
<span class="h3"><h3><a class="selflink" name="section-5.3" href="#section-5.3">5.3</a>. Sequence Diagrams (2)</h3></span>
Example: Figure 3 from [<a href="https://tools.ietf.org/html/rfc4321" title=""Problems Identified Associated with the Session Initiation Protocol's (SIP) Non-INVITE Transaction"">RFC4321</a>].
This example uses (x,y) coordinates to specify points in in plines.
For these, the x units are columns and the y units are lines
(positive means 'down the diagram').
both x and y may be absolute, e.g. 4.3, or relative, e.g. +1.5).
For the first point of a pline, relative means 'relative to the
starting point of the previous pline,' for other points in a pline it
means 'relative to the last point.'
Note that column 1 is drawn in white, i.e. nothing is drawn for it.
It's simply used to make a blank area where objects 8 and 9 can place
text. For both those objects a pline is used to specify the text's
position.
Last, the metalanguage allows simple macros, introduced by 'define
foo = '. These make it easier to re-use definitions, for example of
line types.
info;
output "<a href="https://tools.ietf.org/html/rfc4321">rfc4321</a>-fig3.svg", scale 0.9;
# Sat, 5 Apr 14 (NZDT)
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 11]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-12" id="page-12" href="#page-12" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
#Figure 3 of <a href="https://tools.ietf.org/html/rfc4321">RFC 4321</a>
define hw = width 110; # Hop width
column 1 width 130, color "white"; # No heading or vertical line
column 2 hw; text above "UAC";
column 3 hw; text "P1";
column 4 hw; text "P2";
column 5 hw; text "P3";
column 6 hw; text "UAS";
define tgrey = width 5; # Thick grey
define ahe = arrowhead at end;
object 1;
pline 1.8
to 2.3 tgrey, to (2.4,+0), to (2.6,+1.5), to (2.7,+0) ahe,
to 3.3 tgrey, to (3.4,+0), to (3.6,+1.5), to (3.7,+0) ahe,
to 4.3 tgrey, to (4.4,+0), to (4.6,+1.5), to (4.7,+0) ahe,
to 5.3 tgrey, to (5.4,+0), to (5.6,+1.5), to (5.7,+0) ahe,
to 6.3 tgrey;
object 2;
pline (1.8,+10) to 2.3 tgrey;
object 3;
pline (3.3,+2)
to 2.85 tgrey, to (2.7,+0) tgrey,
to (2.5,+0), to (2.25,+1.5), to (2.0,+0) ahe;
text seg 2 centre "408";
object 4;
pline (4.3,+1.5)
to 3.9 tgrey, to (3.7,+0) tgrey,
to (3.5,+0), to (3.3,+1.5), to (3.1,+0) ahe,
to 2.9 tgrey, to (2.7,+0) tgrey,
to (2.5,+0), to (2.25,+1.5), to (2.0,+0) ahe;
text seg 2 centre "408";
text seg 7 centre "408";
object 5;
pline (5.3,+1.5)
to 4.9 tgrey, to (4.7,+0) tgrey,
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 12]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-13" id="page-13" href="#page-13" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
to (4.5,+0), to (4.3,+1.5), to (4.1,+0) ahe,
to 3.9 tgrey, to (3.7,+0) tgrey,
to (3.5,+0), to (3.3,+1.5), to (3.1,+0) ahe,
to 2.9 tgrey, to (2.7,+0) tgrey,
to (2.5,+0), to (2.25,+1.5), to (2.0,+0) ahe;
text seg 2 centre "408";
text seg 7 centre "408";
text seg 12 centre "408";
object 6;
pline (6.3,+1.5)
to 5.9 tgrey, to (5.7,+0) tgrey,
to (5.5,+0), to (5.3,+1.5), to (5.1,+0) ahe;
to 4.9 tgrey, to (4.7,+0) tgrey,
to (4.5,+0), to (4.3,+1.5), to (4.1,+0) ahe;
to 3.9 tgrey, to (3.7,+0) tgrey,
to (3.5,+0), to (3.3,+1.5), to (3.1,+0) ahe;
to 2.9 tgrey, to (2.7,+0) tgrey,
to (2.5,+0), to (2.25,+1.5), to (2.0,+0) ahe;
text seg 2 centre "408";
text seg 7 centre "408";
text seg 12 centre "408";
text seg 17 centre "408";
object 7:
pline (1.63,4.1) to (1.73,+0);
object 8;
pline (1.68,4.1) to (+0,14) arrowhead at end;
text centre "64*T1";
object 9;
pline (1.2,13.1) to (1.5,+0) color "white";
text centre "(timeout)";
<img src="rfc4321-fig3.svg" width="539" height="348"
alt="Fig 3, RFC 4321" />
<span class="h2"><h2><a class="selflink" name="section-6" href="#section-6">6</a>. IANA Considerations</h2></span>
This document does not create a new registry nor does it register any
values in existing registries; no IANA action is required.
<span class="h2"><h2><a class="selflink" name="section-7" href="#section-7">7</a>. Acknowledgements</h2></span>
Thanks to the RSE and the Design Team members for their helpful
comments and suggestions for SVG 1.2 RFC.
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 13]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-14" id="page-14" href="#page-14" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
<span class="h2"><h2><a class="selflink" name="section-8" href="#section-8">8</a>. Revision History [RFC Editor please delete]</h2></span>
version -01, 26 Jan 16:
rnc schema changed to use Joe Hildebrand's version, github:
"rename title element *reference* to svgTitle, in order to allow
combination with XML2RFC schema. Note: XML element name does not
change"
version -00, 6 Jan 16:
Now an IAB draft, changed name to <a href="https://tools.ietf.org/html/draft-iab-svg-rfc-00">draft-iab-svg-rfc-00</a>.
version -13, 16 Oct 15:
Added Informative Reference to XML2RFC v3 draft on 'how to include
SVG diagrams'.
Added Informative Reference to Nevil's home page for a version of
this I-D with its SVG diagrams included.
Added Informative References to <a href="https://tools.ietf.org/html/rfc0793">RFC0793</a> and I-Ds for the example
diagrams.
Changed 'colour' to 'color' so as to be consistent.
Fixed other typos (thanks to Dave Thaler for all these)!
Removed 'grey' color from example diagrams.
version -12, 24 Sep 15:
<a href="#appendix-A">Appendix A</a> added: a complete relax-ng compact (rnc) schema for
SVG-1.2-RFC.
<a href="#section-2.1">Section 2.1</a>: Elements/attributes/properties table updated to match
the schema in <a href="#appendix-A">Appendix A</a>.
version -11, 17 Aug 15:
<a href="#section-1">Section 1</a>: Fixed typo in "Details are expected to change"
paragraph.
version -10, 14 Aug 15:
<a href="#section-1">Section 1</a>: Added "Details are expected to change" paragraph.
version -09, 31 Mar 15:
No changes, version number incremented to keep draft alive
version -08, 29 Sep 14:
<a href="#section-1">Section 1</a>: Changed comment about diagrams 'not being normative' to
'not complete specifications in themselves.
<a href="#section-2.1">Section 2.1</a>: Added SVG 1.2 Tiny 'id' attribute because most
drawing packages use it in constructing drawings.
<a href="#section-2.1">Section 2.1</a>: Added SVG 1.2 Tiny 'role' attribute so that ARIA can
use it.
<a href="#section-3">Section 3</a>: added comment about changes to xml2rfc required to
include SVG diagrams.
<a href="#section-4">Section 4</a>: Added reference to svg-aria-primer.
<span class="grey">Brownlee & IAB Expires July 30, 2016 [Page 14]</span></pre>
<hr class="noprint" style="width: 96ex;" align="left"><!--NewPage--><pre class="newpage"><a name="page-15" id="page-15" href="#page-15" class="invisible"> </a>
<span class="grey">Internet-Draft SVG Drawings for RFCs: SVG 1.2 RFC January 2016</span>
version -07, 3 Jul 14:
Expanded text about Accessibility in 'how to create SVG drawings'
section into 'Accessibility Considerations section. Added two SVG
Accessibility references to support that.
version -06, 26 Jun 14:
Remove trailing / from URL in <a href="#section-4">section 4</a>; the html version on
tools.ietf.org/html assumed the next word was part of that URL.
version -05, 25 Jun 14:
Improved section on 'how to create SVG drawings' By adding some
text about which elements aren't allowed in SVG 1.2 RFC.
Added more text describing the tool for checking, stripping out or
replacing incompatible elements and attributes from an SVG file.
version -04, 30 Apr 14:
Fixed typos, used full references for two of the w3c refs - each
had an author name using UTF8 characters.
Moved the Elements and Attributes appendix up earlier to make it
sub-<a href="#section-2.1">section 2.1</a>.
Disclaimer added to the Meta-languages section.
version -03, 14 Apr 14:
Added two more example diagrams; a simple packet layout, and a
diagram that uses lots of diagonal lines.
version -02, 12 Feb 14:
Added metalanguage example to make time-sequence drawings.
version -01, 11 Feb 14:
Allow links to 'long-term stable URIs'
Link URIs must be ASCII only
Need for tools to check SVG 1.2 RFC compatibility and to strip
'unnecessary' attributes explicitly stated.
Statement that drawings can't be normative removed; Postscript-