| Network Working Group | N. Brownlee |
| Internet-Draft | The University of Auckland |
| Intended status: Informational | IAB |
| Expires: January 4, 2015 | |
| July 3, 2014 |
SVG Drawings for RFCs: SVG 1.2 RFC
draft-brownlee-svg-rfc-07
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.
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 http://datatracker.ietf.org/drafts/current/.
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 January 4, 2015.
Copyright (c) 2014 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 (http://trustee.ietf.org/license-info) 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.
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 are informative, not normative.
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]:
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]:
In the list below, elements and properties are listed on the
left,and their allowed values are given in parentheses on the
right.
<color>, the list of allowed colours, is a black-and-white
subset of the SVG colour names.
Elements:
svg (version, baseProfile=tiny, width, viewBox,
preserveAspectRatio, snapshotTime)
g
defs
title
desc
use (x, y, xlink:href)
rect (x, y, width, height, rx, ry)
circle (cx, cy, r)
ellipse (cx, cy, rx, ry)
line (x1, y1, x2, y2)
polyline (points)
polygon (points)
text (x, y, rotate)
tspan
textArea (x, y, width, height, auto)
tbreak
solidcolor
linearGradient (gradientUnits, x1, y1, x2, y2)
radialGradient (gradientUnits, cx, cy, r)
stop (offset)
Properties: (most allow inherit as a value)
stroke
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,
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)
<color> (black, grey, darkgrey, dimgrey, lightgrey,
gray, darkgray, dimgray, lightgray, white)
opacity
solid-opacity
solid-color (currentColor, <color>)
color (currentColor, <color>)
stop-color (currentColor, <color>)
stop-opacity
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, black or grey)
fill-rule (nonzero, evenodd)
fill-opacity
Elements, properties and attributes selected for SVG 1.2 RFC from [W3C.REC-SVGTiny12-20081222].
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.
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).
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. 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].
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
https://www.cs.auckland.ac.nz/~nevil/SVG_RFC_1.2
along with an html version of this draft that includes the SVG 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.
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;
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.
info; 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";
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.
info;
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)";
This document does not create a new registry nor does it register any values in existing registries; no IANA action is required.
Thanks to the RSE and the Design Team members for their helpful comments and suggestions for SVG 1.2 RFC.
| [RFC6949] | Flanagan, H. and N. Brownlee, "RFC Series Format Requirements and Future Development", RFC 6949, 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. |
| [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] | Watson, L., "Using ARIA to enhance SVG accessibility", The Paciello Group 2013/12/using-aria-enhance-svg-accessibility, December 2013. |