Network Working Group N. Brownlee
Internet-Draft The University of Auckland
Intended status: Informational IAB
Expires: February 15, 2016 August 14, 2015

SVG Drawings for RFCs: SVG 1.2 RFC


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 BCP 78 and BCP 79.

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

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 February 15, 2016.

Copyright Notice

Copyright (c) 2015 IETF Trust and the persons identified as the document authors. All rights reserved.

This document is subject to BCP 78 and the IETF Trust's Legal Provisions Relating to IETF Documents ( 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 Section 4.e of the Trust Legal Provisions and are provided without warranty as described in the Simplified BSD License.

Table of Contents

1. Introduction

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 [RFC6949] 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; [RFC6949] says

SVG (Scalable Vector Graphics) has been developed by W3C, the World Wide Web Consortium; its current standard is SVG 1.1 Full [W3C.REC-SVG11-20110816]. 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.

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 implementers must not expect those changes to remain backwards-compatible with the details described this document.

2. SVG 1.2 RFC: An SVG profile for RFCs

As a starting point for SVG 1.2 RFC, the Design Team decided to use SVG 1.2 Tiny [W3C.REC-SVGTiny12-20081222]. 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 [W3C.REC-SVGTiny12-20081222]:

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 [W3C.REC-SVGTiny12-20081222]:

9 Basic Shapes
10 Text

Everything in these sections is allowed in SVG 1.2 RFC.
11 Painting: Filling, Stroking, Colors and Paint Servers

Anything relating to 'color' is not allowed in SVG 1.2 RFC, everything else is allowed. This is a requirement documented in [RFC6949].
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, [W3C.REC-CSS2-20110607], section 15, Fonts. In particular, the SVG 'font' element is not allowed.

2.1. Elements, properties and attributes allowed in SVG 1.2 RFC

 In the list  below, elements and properties are listed on the
 left,and  their allowed values are given in parentheses on the
 <color>, the list of allowed colours, is a black-and-white
 subset of  the SVG colour names.


   svg              (version, baseProfile=tiny, width, viewBox,
                     preserveAspectRatio, snapshotTime, height,
                     id, role)
   g                (id, role, transform, label,class)
   defs             (id, role)
   title            (id, role)
   desc             (id, role)
   use              (x, y, href, xlink:href, id, role, transform)

   rect             (x, y, width, height, rx, ry
                     id, role, transform, stroke-miterlimit)
   circle           (cx, cy, r, id, role, transform)
   ellipse          (cx, cy, rx, ry, id, role, transform)
   line             (x1, y1, x2, y2, id, role, transform)
   polyline         (points, id, role, transform)
   polygon          (points, id, role, transform)

   text             (x, y, rotate, id, role, transform)
   tspan            (id, role)
   textArea         (x, y, width, height, auto, id, role, transform)
   tbreak           (id, role)

   solidColor       (id, role)
   linearGradient   (gradientUnits, x1, y1, x2, y2, id, role)
   radialGradient   (gradientUnits, cx, cy, r, id, role)
   stop             (offset, id, role)
   path             (d, pathLength, id, role, transform, stroke-miterlimit)
 Properties:  (most allow inherit as a value)

   stroke-linecap   (butt, round, square)
   stroke-linejoin  (miter, round, bevel)
   vector-effect    (non-scaling-stroke, none)
   viewport-fill    (none, currentColor)

   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,
   visibility       (visible, hidden, collapse)
   color-rendering  (auto, optimizeSpeed, optimizeQuality)
   shape-rendering  (auto, optimizeSpeed, crispEdges,
   text-rendering   (auto, optimizeSpeed, optimizeLegibility,
   buffered-rendering  (auto, dynamic, static)

   <color>   (black, grey, darkgrey, dimgrey, lightgrey,
	       gray, darkgray, dimgray, lightgray, white)
   solid-color    (currentColor, <color>)
   color          (currentColor, <color>)

   stop-color     (currentColor, <color>)

   line-increment (auto)
   text-align     (start,end, center)
   display-align  (auto, before, center, after)

   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, black or grey)
   fill-rule      (nonzero, evenodd)

Elements, properties and attributes selected for SVG 1.2 RFC from [W3C.REC-SVGTiny12-20081222].

3. How to create SVG drawings

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.

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 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.

4. Accessibility Considerations

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 [SVG-ACCESS-TIPS].

ARIA is a W3C Recommendation for using SVG to create 'Accessible Rich Internet Applications.' A helpful introduction to ARIA is provided by [SVG-ARIA-PRIMER], while [SVG-USING-ARIA] gives examples of how to use ARIA to enhance SVG accessibility.

5. Meta-language for diagrams common in RFCs

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
along with an html version of this draft that includes the SVG diagrams.

5.1. Packet Layout Diagrams

Example: Figure 3 from RFC 793.

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.

  output "tcp-header.svg", scale 0.65;

  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;

5.2. Sequence Diagrams (1)

Example: Figure 6 from draft-loreto-httpbis-trusted-proxy20-00.

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.

  output "httpbis-proxy20-fig6.svg", scale 0.9;

#Thu, 30 Jan 14 (NZDT)

#Figure 6 of draft-loreto-httpbis-trusted-proxy20-00.txt

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, colour "grey";
  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;
  text seg 1 above "TLS ServerHello";

object 11;
  blank 2 to 3;

object 12;
  block 2 to 3, objects 13 to 15, colour "grey";
  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";

5.3. Sequence Diagrams (2)

Example: Figure 3 from RFC 4321

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.

  output "rfc4321-fig3.svg", scale 0.9;

# Sat,  5 Apr 14 (NZDT)

#Figure 3 of RFC 4321

define hw = width 110;  # Hop width

column 1 width 130, colour "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 = colour "lightgrey" 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,
    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) colour "white";
  text centre "(timeout)";

6. IANA Considerations

This document does not create a new registry nor does it register any values in existing registries; no IANA action is required.

7. Acknowledgements

Thanks to the RSE and the Design Team members for their helpful comments and suggestions for SVG 1.2 RFC.

8. Revision History [RFC Editor please delete]

version -10,14 Aug 15:

Section 1: 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:

Section 1: Changed comment about diagrams 'not being normative' to 'not complete specifications in themselves.
Section 2.1: Added SVG 1.2 Tiny 'id' attribute because most drawing packages use it in constructing drawings.
Section 2.1: Added SVG 1.2 Tiny 'role' attribute so that ARIA can use it.
Section 3: added comment about changes to xml2rfc required to include SVG diagrams.
Section 4: Added reference to svg-aria-primer.
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 section 4; the html version on 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-section 2.1.
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-only RFCs already exist.
Added most attributes and elements to the Appendix.
version -00, 29 Jan 14:

Initial version, using content from Nevil's
emails to the Design Team.

9. References

9.1. Normative References

[RFC6949] Flanagan, H. and N. Brownlee, "RFC Series Format Requirements and Future Development", RFC 6949, DOI 10.17487/RFC6949, May 2013.
[W3C.REC-SVGTiny12-20081222] Andersson, O., Berjon, R., Dahlstrom, E., Emmons, A., Ferraiolo, J., Grasso, A., Hardy, V., Hayman, S., Jackson, D., Lilley, C., McCormack, C., Neumann, A., Northway, C., Quint, A., Ramani, N., Schepers, D. and A. Shellshear, "Scalable Vector Graphics (SVG) Tiny 1.2 Specification", World Wide Web Consortium Recommendation REC-SVGTiny12-20081222, December 2008.
[W3C.REC-CSS2-20110607] Bos, B., Celik, T., Hickson, I. and H. Lie, "Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification", World Wide Web Consortium Recommendation REC-CSS2-20110607, June 2011.

9.2. Informative References

[W3C.REC-SVG11-20110816] Dahlstrom, E., Dengler, P., Grasso, A., Lilley, C., McCormack, C., Schepers, D., Watt, J., Ferraiolo, J., Fujisawa, J. and D. Jackson, "Scalable Vector Graphics (SVG) 1.1 (Second Edition)", World Wide Web Consortium Recommendation REC-SVG11-20110816, August 2011.
[SVG-ACCESS-TIPS] Watson, L., "Tips for Creating Accessible SVG", SitePoint tips-accessible-svg, May 2014.
[SVG-ARIA-PRIMER] Pappas, L., Schwerdtfeger, R. and M. Cooper, "WAI-ARIA 1.0 Primer", World Wide Web Consortium WD WD-wai-aria-primer-20100916, September 2010.
[SVG-USING-ARIA] Watson, L., "Using ARIA to enhance SVG accessibility", The Paciello Group 2013/12/using-aria-enhance-svg-accessibility, December 2013.

Authors' Addresses

Nevil Brownlee The University of Auckland EMail:
Internet Architecture Board EMail: