RFC 7996
SVG Drawings for RFCs: SVG 1.2 RFC
SVG Drawings for RFCs: SVG 1.2 RFC 🎀
Okay bestie, this one is RFC 7996 🦋, and it's an Informational doc from the Internet Architecture Board (IAB). It was written by N. Brownlee at The University of Auckland and published in December 2016 (ISSN 2070-1721). It doesn't obsolete or update any other documents, since the title block doesn't list any. It's about SVG line drawings for RFCs, and it defines SVG 1.2 RFC 💅, a special SVG profile that's built for diagrams in RFCs.
Abstract ✨
This doc lays out SVG 1.2 RFC, which is an SVG profile for diagrams that might show up in RFCs. It also talks through some of the issues around making and using those diagrams. 💖
Status of This Memo 🌸
This one is not an Internet Standards Track spec. It's just published for info. 🧚
It is a product of the Internet Architecture Board (IAB) and holds info the IAB thought was worth keeping on the record forever. It represents the consensus of the IAB. Docs the IAB approves for publication are not candidates for any level of Internet Standard, so check Section 2 of RFC 7841 if you want the deets 🔥.
For the current status of this doc, any errata, and how to send feedback, go to http://www.rfc-editor.org/info/rfc7996 🫶.
Copyright Notice 💜
Copyright (c) 2016 IETF Trust and the persons identified as the document authors. All rights reserved. 🌈
This doc is subject to BCP 78 and the IETF Trust's Legal Provisions Relating to IETF Documents (http://trustee.ietf.org/license-info) as they were in effect on the publication date. Please read these carefully, because they spell out your rights and restrictions for this doc. 🙈
Table of Contents 🍓
1. Introduction ....................................................2
2. SVG 1.2 RFC: An SVG Profile for RFCs ............................3
2.1. Elements, Properties, and Attributes Allowed in
SVG 1.2 RFC ................................................4
3. How to Create SVG Drawings ......................................7
4. Accessibility Considerations ....................................7
5. Examples of Diagrams Common in RFCs .............................8
5.1. Packet Layout Diagrams .....................................8
5.2. Sequence Diagrams (1) ......................................8
5.3. Sequence Diagrams (2) ......................................8
6. Security Considerations .........................................8
7. References ......................................................9
7.1. Normative References .......................................9
7.2. Informative References .....................................9
Appendix A. RELAX NG Compact (RNC) Schema for SVG 1.2 RFC .........11
IAB Members at the Time of Approval ...............................53
Acknowledgements ..................................................53
Author's Address ..................................................531. Introduction ✨
Okay so, over the last few years the RFC Editor has been working with the Internet community to come up with specs for changing the format of RFCs 🧚. An outline of those specs came out as [RFC6949] in May 2013. Since then, a Design Team has been working with the RFC Editor to flesh them out 💅. One of the changes is letting RFCs include line drawings, and [RFC6949] says this:
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) was developed by W3C, the World Wide Web Consortium 🦋. Its current standard is SVG 1.1 Full [W3C.REC-SVG11-20110816]. This doc defines SVG 1.2 RFC, an SVG profile (aka a subset of SVG) that's perfect for RFC line drawings 🎀.
Note that in RFCs, the text is where the normative descriptions of protocols, systems, and so on actually live 💖. Diagrams can help explain concepts more clearly, but they're there to add supporting details. They should not be considered complete specifications on their own 🙈.
The details in this doc (especially the vocabularies) are expected to change based on what people learn while implementing the new publication toolsets 🌸. Revised docs will be published to capture those changes as the toolsets get finished. Other implementers must not expect those changes to stay backwards-compatible with the details in this doc. Fair warning, bestie 💀.
2.1. Elements, Properties, and Attributes Allowed in SVG 1.2 RFC 💅
okay so this is the good stuff 🎀 This part is all about the elements, properties, and attributes picked for SVG 1.2 RFC from [W3C.REC-SVGTiny12-20081222] ✨
In the list below, elements and properties are on the left and their allowed values are 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 drawing apps commonly use 🎨 They aren't part of SVG Tiny 1.2, but they're included here for compatibility. Also, two things to keep in mind:
- 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. 🧚
Here's the elements list:
Elements:
svg (version=1.2, 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)
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, space, id, role, fill, <style>,
transform)
tspan (x, y, 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)And now the properties, which mostly allow inherit as a value 💖
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-miterlimit
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)
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, <color>)
fill-rule (nonzero, evenodd)
fill-opacity3. How to Create SVG Drawings 🦋
so many drawing packages can make SVG drawings!! Two examples are Open Source packages Inkscape and Dia. Just be aware that these packages may use SVG elements or attributes that aren't 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 those cases, you have to draw the arrowhead in another, simpler way. ✏️ - SVG clip paths are used to define a shape, and objects outside that shape become invisible. The
'clipPath'element is not allowed in SVG 1.2 Tiny or SVG 1.2 RFC. 💀
Diagrams made with these packages may contain elements, their attributes or properties, or values of attributes or properties that aren't allowed in SVG 1.2 RFC. We will need to provide a tool that either (1) strips out anything that isn't allowed in SVG 1.2 RFC or (2) replaces disallowed values (for example, replacing 'Sans' with 'sans-serif' as an allowed value for 'font-family'). A simple test version of a tool like this has shown that deleting and replacing things 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 can also be used by authors to simply 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. 🔍
To include a diagram in an RFC, the xml2rfc (v3) tool will need to provide a way to include SVG drawings in Internet-Drafts, as described in Section 2.5 of [RFC7991]. 📜
4. Accessibility Considerations 🫶
One of the long-term goals for RFCs is to make them more accessible, for example for 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. The SVG 'role' attribute can also 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 (as the name "ARIA" indicates) "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. Examples of Diagrams Common in RFCs 🍓
Another way to create SVG drawings is to write programs that draw them. For example, using Python and its svgwrite module is a pleasant environment (for those who like writing code). This section presents a few examples of diagrams created in this way. Note that they are merely examples of typical diagrams from RFCs. 🐍
The SVG diagrams for this section, along with an HTML version of this document that includes the SVG diagrams, can be seen at [NB-SVG-1.2-RFC]. 🌸
5.1. Packet Layout Diagrams 📦
Example: Figure 3 from [RFC793].
5.2. Sequence Diagrams (1) 🔁
Example: Figure 6 from [ExpTrustedProxy].
5.3. Sequence Diagrams (2) 🔁
Example: Figure 3 from [RFC4321].
6. Security Considerations 🔒
This document does not introduce any security considerations on its own. 💅
7. References 📚
7.1. Normative References
[RFC6949] Flanagan, H. and N. Brownlee, "RFC Series Format
Requirements and Future Development", RFC 6949,
DOI 10.17487/RFC6949, May 2013,
<http://www.rfc-editor.org/info/rfc6949>.
[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,
<http://www.w3.org/TR/2008/REC-SVGTiny12-20081222>.
[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,
<http://www.w3.org/TR/2011/REC-CSS2-20110607>.7.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,
<http://www.w3.org/TR/2011/REC-SVG11-20110816>.
[SVG-ACCESS-TIPS]
Watson, L., "Tips for Creating Accessible SVG", May 2014,
<http://www.sitepoint.com/tips-accessible-svg>.
[SVG-ARIA-PRIMER]
Pappas, L., Schwerdtfeger, R., and M. Cooper,
"WAI-ARIA 1.0 Primer", World Wide Web Consortium
Working Draft, September 2010,
<http://www.w3.org/TR/2010/WD-wai-aria-primer-20100916>.
[SVG-USING-ARIA]
Watson, L., "Using ARIA to enhance SVG accessibility",
The Paciello Group, December 2013,
<https://www.paciellogroup.com/blog/2013/12/
using-aria-enhance-svg-accessibility/>.
[RFC7991] Hoffman, P., "The "xml2rfc" Version 3 Vocabulary",
RFC 7991, DOI 10.17487/RFC7991, December 2016,
<http://www.rfc-editor.org/info/rfc7991>.
[NB-SVG-1.2-RFC]
Brownlee, N., "Index of /materials/format/svg",
<https://www.rfc-editor.org/materials/format/svg/>.
[RFC793] Postel, J., "Transmission Control Protocol", STD 7,
RFC 793, DOI 10.17487/RFC0793, September 1981,
<http://www.rfc-editor.org/info/rfc793>.
[ExpTrustedProxy]
Loreto, S., Mattsson, J., Skog, R., Spaak, H., Bourg, G.,
Druta, D., and M. Hafeez, "Explicit Trusted Proxy in
HTTP/2.0", Work in Progress,
draft-loreto-httpbis-trusted-proxy20-01, February 2014.
[RFC4321] Sparks, R., "Problems Identified Associated with the
Session Initiation Protocol's (SIP) Non-INVITE
Transaction", RFC 4321, DOI 10.17487/RFC4321,
January 2006, <http://www.rfc-editor.org/info/rfc4321>.
[RNG-HOME] Murata, M., "RELAX NG home page", February 2014,
<http://www.relaxng.org/>.Appendix A. RELAX NG Compact (RNC) Schema for SVG 1.2 RFC ✨
okay so this is the checker bit 💅 you can use this RNC schema to test whether an SVG file is conformant to SVG 1.2 RFC. say you saved it as SVG-1.2-RFC.rnc, then this command tests whether diagram.svg is a conformant SVG 1.2 RFC drawing 🦋
jing -c SVG-1.2-RFC.rnc diagram.svgthe official copy lives on the RFC Editor website at https://www.rfc-editor.org/materials/format/SVG-1.2-RFC.rnc 🌸 if that site and the copy below ever don't match, the website wins, no debate 🫶
#--- SVG 1.2 RFC RNC schema; Nevil Brownlee, Thu 26 Jan 2016 (NZST)
default namespace = "http://www.w3.org/2000/svg"
namespace ns1 = "http://www.w3.org/1999/xlink"
rfc-color = ( # SVG-1.2-RFC doesn't allow color or grayscale
"black" | "white" | "#000000" | "#FFFFFF" | "#ffffff" | "inherit" )
start = svg
svg =
element svg {
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute width { xsd:string }?,
attribute height { xsd:string }?,
attribute preserveAspectRatio {
xsd:string { pattern = "\s*(none|xMidYMid)\s*(meet)?\s*" }
}?,
attribute viewBox { text }?,
attribute zoomAndPan { "disable" }?,
attribute version {
xsd:string "1.2"
}?,
attribute baseProfile {
xsd:string "tiny"
}?,
attribute contentScriptType { xsd:string }?,
attribute snapshotTime { xsd:string "none" | xsd:string }?,
attribute timelineBegin {
xsd:string "onLoad" | xsd:string "onStart"
}?,
attribute playbackOrder {
xsd:string "all" | xsd:string "forwardOnly"
}?,
(desc
| svgTitle
| path
| rect
| circle
| line
| ellipse
| polyline
| polygon
| solidColor
| textArea
| linearGradient
| radialGradient
| \text
| g
| defs
| use
| a)*
}
desc =
element desc {
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
((attribute 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"
| "inherit"
}?,
attribute visibility { "visible" | "hidden" | "collapse"
| "inherit" }?,
attribute image-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?,
attribute shape-rendering {
"auto"
| "optimizeSpeed"
| "crispEdges"
| "geometricPrecision"
| "inherit"
}?,
attribute text-rendering {
"auto"
| "optimizeSpeed"
| "optimizeLegibility"
| "geometricPrecision"
| "inherit"
}?,
attribute buffered-rendering {
"auto" | "dynamic" | "static" | "inherit"
}?)
& (attribute viewport-fill { "none" | rfc-color }?,
attribute viewport-fill-opacity { "inherit" | xsd:string }?)),
text
}
svgTitle =
element title {
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
((attribute 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"
| "inherit"
}?,
attribute visibility { "visible" | "hidden"
| "collapse" | "inherit" }?,
attribute image-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?,
attribute shape-rendering {
"auto"
| "optimizeSpeed"
| "crispEdges"
| "geometricPrecision"
| "inherit"
}?,
attribute text-rendering {
"auto"
| "optimizeSpeed"
| "optimizeLegibility"
| "geometricPrecision"
| "inherit"
}?,
attribute buffered-rendering {
"auto" | "dynamic" | "static" | "inherit"
}?)
& (attribute viewport-fill { "none" | rfc-color }?,
attribute viewport-fill-opacity { "inherit" | xsd:string }?)),
text
}
path =
element path {
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute transform { xsd:string | "none" }?,
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute d { xsd:string }?,
attribute pathLength { xsd:string }?,
attribute style { xsd:string }?, # Added to SVG-1.2-RFC (Inkscape)
(desc
| svgTitle)*
}okay so the next bit is where the rect element gets its whole wardrobe 🎀✨ it's a long one, so grab a snack bestie 🍓
rect =
element rect {
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute transform { xsd:string | "none" }?,
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute x { xsd:string }?,
attribute y { xsd:string }?,
attribute width { xsd:string }?,
attribute height { xsd:string }?,
attribute rx { xsd:string }?,
attribute ry { xsd:string }?,
attribute style { xsd:string }?, # Added to SVG-1.2-RFC (Inkscape)
(desc
| svgTitle)*
}next up is circle 🦋 it's basically rect's twin, but it swaps the sizing attributes for its own centre-and-radius vibe 💜
circle =
element circle {
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute transform { xsd:string | "none" }?,
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute cx { xsd:string }?,
attribute cy { xsd:string }?,
attribute r { xsd:string }?,
attribute style { xsd:string }?, # Added to SVG-1.2-RFC (Inkscape)
(desc
| svgTitle)*
}and last but not least, the line element 📏✨ it's giving simple, but it still gets the full styling buffet 🍰
line =
element line {
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute transform { xsd:string | "none" }?,
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute x1 { xsd:string }?,
attribute y1 { xsd:string }?,
attribute x2 { xsd:string }?,
attribute y2 { xsd:string }?,
(desc
| svgTitle)*
}okay bestie, the schema keeps going and it is SO pretty ✨ ellipse, polyline, and polygon are up next, and each one is basically a big checklist of allowed attributes 🎀
ellipse =
element ellipse {
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute transform { xsd:string | "none" }?,
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute rx { xsd:string }?,
attribute ry { xsd:string }?,
attribute cx { xsd:string }?,
attribute cy { xsd:string }?,
attribute style { xsd:string }?, # Added to SVG-1.2-RFC (Inkscape)
(desc
| svgTitle)*
}
polyline =
element polyline {
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute transform { xsd:string | "none" }?,
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute points { xsd:string }?,
(desc
| svgTitle)*
}
polygon =
element polygon {
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute transform { xsd:string | "none" }?,
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute points { xsd:string }?,
attribute style { xsd:string }?, # Added to SVG-1.2-RFC (Inkscape)
(desc
| svgTitle)*
}okay bestie, we're picking up right where we left off 💖 the next three definitions are the big ones: solidColor, textArea, and linearGradient 🦋 they're all super similar, so once you've clocked one, the others basically read themselves ✨
solidColor =
element solidColor {
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
(desc
| svgTitle)*
}
textArea =
element textArea {
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute transform { xsd:string | "none" }?,
attribute x { xsd:string }?,
attribute y { xsd:string }?,
attribute width { xsd:string | "auto" }?,
attribute height { xsd:string | "auto" }?,
(tspan
| desc
| svgTitle
| tspan_2
| text
| a_2)+
}
linearGradient =
element linearGradient {
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
attribute gradientUnits { "userSpaceOnUse" | "objectBoundingBox" }?,
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute x1 { xsd:string }?,
attribute y1 { xsd:string }?,
attribute x2 { xsd:string }?,
attribute y2 { xsd:string }?,
(desc
| svgTitle)*
}Okay bestie, the gradient stuff is done, so now we're getting into radialGradient, text, and g 🌈✨ The vibe is still "everything has a pattern," so here's the grammar with every detail intact 💅
radialGradient =
element radialGradient {
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
attribute gradientUnits { "userSpaceOnUse" | "objectBoundingBox" }?,
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute cx { xsd:string }?,
attribute cy { xsd:string }?,
attribute r { xsd:string }?,
(desc
| svgTitle)*
}
\text =
element text {
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute transform { xsd:string | "none" }?,
attribute x { xsd:string }?,
attribute y { xsd:string }?,
attribute rotate { xsd:string }?,
attribute style { xsd:string }?, # Added to SVG-1.2-RFC (Inkscape)
(desc
| svgTitle
| tspan_2
| text
| a_2)+
}
g =
element g {
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute transform { xsd:string | "none" }?,
attribute style { xsd:string }?,
# Added to SVG-1.2-RFC (for Inkscape)
attribute visibility {
"visible" | "hidden" | "collapse" | "inherit" }?,
# Added to SVG-1.2-RFC (for LibreOffice)
(desc
| svgTitle
| path
| rect
| circle
| line
| ellipse
| polyline
| polygon
| solidColor
| textArea
| linearGradient
| radialGradient
| \text
| g
| defs
| use
| a)*
}okay so bestie, this is where the big grammar blocks start getting really good 💅✨ defs, use, and a are all elements that can hold each other's children, so they're kinda like the three queens of the grammar 👑 let's get into it 🎀
defs comes first 🌸 Its fill, stroke, and font properties are all written as the grammar says, along with the id, xml:id, xml:base, xml:lang, class, role, rel, rev, typeof, content, datatype, resource, about, property, and xml:space attributes. Its children are listed at the very end, and use and a are both in that list 🦋
defs =
element defs {
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
(desc
| svgTitle
| path
| rect
| circle
| line
| ellipse
| polyline
| polygon
| solidColor
| textArea
| linearGradient
| radialGradient
| \text
| g
| defs
| use
| a)*
}Next up is use 🧚 It has the same styling block as defs, plus some extra stuff for requirements (requiredFeatures, requiredExtensions, requiredFormats, requiredFonts, systemLanguage), transform, the ns1: linking attributes, and x and y 💜 Its children are only desc and svgTitle, which is a much smaller crew 🍓
use =
element use {
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute transform { xsd:string | "none" }?,
attribute ns1:show { "embed" }?,
attribute ns1:actuate { "onLoad" }?,
attribute ns1:type { "simple" }?,
attribute ns1:role { xsd:anyURI | xsd:string }?,
attribute ns1:arcrole { xsd:anyURI | xsd:string }?,
attribute ns1:title { text }?,
attribute ns1:href { xsd:anyURI | xsd:string }?,
attribute x { xsd:string }?,
attribute y { xsd:string }?,
(desc
| svgTitle)*
}And last but absolutely not least, a 🦋 This one is the link element, and it's the only one with a target attribute 👀 Its ns1:show and ns1:actuate values are different from use, since they're "new" | "replace" and "onRequest" here 🔥 Its children are the full list, use included, so it gets to hang with everybody 🫶
a =
element a {
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
attribute transform { xsd:string | "none" }?,
attribute ns1:show { "new" | "replace" }?,
attribute ns1:actuate { "onRequest" }?,
attribute ns1:type { "simple" }?,
attribute ns1:role { xsd:anyURI | xsd:string }?,
attribute ns1:arcrole { xsd:anyURI | xsd:string }?,
attribute ns1:title { text }?,
attribute ns1:href { xsd:anyURI | xsd:string }?,
attribute target {
"_replace" | "_self" | "_parent" | "_top" | "_blank" | xsd:Name
}?,
(desc
| svgTitle
| path
| rect
| circle
| line
| ellipse
| polyline
| polygon
| solidColor
| textArea
| linearGradient
| radialGradient
| \text
| g
| defs
| use)*
}okay so this part is all about three elements: stop, tspan, and tspan_2 🎀 the stop one is the gradient color stop, and the two tspans are basically the same spot with a little twist 💅
Here's stop. It's giving a whole buffet of optional attributes, and everything is optional (the ? means it's not required) ✨
stop =
element stop {
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "inherit" | xsd:string }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { "inherit" | xsd:string }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { "inherit" | xsd:string }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { "inherit" | xsd:string }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute offset { xsd:string }?,
(desc
| svgTitle)*
}Now tspan 🦋 it looks a lot like stop, but the fill, stroke, and solid-color bits switch over to rfc-color in places, and it picks up the requiredFeatures, requiredExtensions, requiredFormats, requiredFonts, systemLanguage, x, and y attributes. Its content is where it gets fun, because it can hold a tbreak, desc, svgTitle, tspan_2, text, or a_2, one or more times 🌈
tspan =
element tspan {
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute x { xsd:string }?, # For SVG-1.2-RFC
attribute y { xsd:string }?,
(tbreak
| desc
| svgTitle
| tspan_2
| text
| a_2)+
}And last up, tspan_2 🧚 it's basically tspan again, with one key difference: its content list doesn't include tbreak. So it can hold desc, svgTitle, another tspan_2, text, or a_2, one or more times 💜
tspan_2 =
element tspan {
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
attribute x { xsd:string }?, # For SVG-1.2-RFC
attribute y { xsd:string }?,
(desc
| svgTitle
| tspan_2
| text
| a_2)+
}a_2 =
element a {
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?,
((attribute fill-opacity { "inherit" | xsd:string }?,
attribute stroke-opacity { "inherit" | xsd:string }?)
& (attribute fill { "none" | rfc-color }?,
attribute fill-rule { "inherit" | "nonzero" | "evenodd" }?,
attribute stroke { rfc-color }?,
attribute stroke-dasharray { "inherit" | "none" | xsd:string }?,
attribute stroke-dashoffset { "inherit" | xsd:string }?,
attribute stroke-linecap {
"butt" | "round" | "square" | "inherit"
}?,
attribute stroke-linejoin {
"miter" | "round" | "bevel" | "inherit"
}?,
attribute stroke-miterlimit { "inherit" | xsd:string }?,
attribute stroke-width { "inherit" | xsd:string }?,
attribute color { rfc-color }?,
attribute color-rendering {
"auto" | "optimizeSpeed" | "optimizeQuality" | "inherit"
}?)
& attribute vector-effect {
"none" | "non-scaling-stroke" | "inherit"
}?
& (attribute direction { "ltr" | "rtl" | "inherit" }?,
attribute unicode-bidi {
"normal" | "embed" | "bidi-override" | "inherit"
}?)
& (attribute solid-color { rfc-color }?,
attribute solid-opacity { "inherit" | xsd:string }?)
& (attribute display-align {
"auto" | "before" | "center" | "after" | "inherit"
}?,
attribute line-increment { "auto" | "inherit" | xsd:string }?)
& (attribute stop-color { rfc-color }?,
attribute stop-opacity { "inherit" | xsd:string }?)
& (attribute font-family { "inherit" | xsd:string }?,
attribute font-size { "inherit" | xsd:string }?,
attribute font-style {
"normal" | "italic" | "oblique" | "inherit"
}?,
attribute font-variant { "normal" | "small-caps" | "inherit" }?,
attribute font-weight {
"normal"
| "bold"
| "bolder"
| "lighter"
| "inherit"
}?,
attribute text-anchor {
"start" | "middle" | "end" | "inherit"
}?,
attribute text-align {
"start" | "center" | "end" | "inherit"
}?)),
attribute transform { xsd:string | "none" }?,
attribute ns1:show { "new" | "replace" }?,
attribute ns1:actuate { "onRequest" }?,
attribute ns1:type { "simple" }?,
attribute ns1:role { xsd:anyURI | xsd:string }?,
attribute ns1:arcrole { xsd:anyURI | xsd:string }?,
attribute ns1:title { text }?,
attribute ns1:href { xsd:anyURI | xsd:string }?,
attribute target {
"_replace" | "_self" | "_parent" | "_top" | "_blank" | xsd:Name
}?,
(desc
| svgTitle
| tspan_2
| text)+
}
tbreak =
element tbreak {
(attribute id { xsd:NCName }
| attribute xml:id { xsd:NCName })?,
attribute xml:base { xsd:anyURI | xsd:string }?,
attribute xml:lang { xsd:language? }?,
attribute class { xsd:NMTOKENS }?,
attribute role { xsd:string }?,
attribute rel { xsd:string }?,
attribute rev { xsd:string }?,
attribute typeof { xsd:string }?,
attribute content { xsd:string }?,
attribute datatype { xsd:string }?,
attribute resource { xsd:string }?,
attribute about { xsd:string }?,
attribute property { xsd:string }?,
attribute xml:space { "default" | "preserve" }?,
attribute requiredFeatures { xsd:string }?,
attribute requiredExtensions { xsd:string }?,
attribute requiredFormats { xsd:string }?,
attribute requiredFonts { xsd:string }?,
attribute systemLanguage { xsd:string }?
}
#--- End of SVG 1.2 RFC RNC schemaIAB Members at the Time of Approval 👑
okay so bestie, the IAB members at the time this memo got approved were (in alphabetical order) 🫶:
- Jari Arkko
- Ralph Droms
- Ted Hardie
- Joe Hildebrand
- Russ Housley
- Lee Howard
- Erik Nordmark
- Robert Sparks
- Andrew Sullivan
- Dave Thaler
- Martin Thomson
- Brian Trammell
- Suzanne Woolf
Acknowledgements ✨
the RSE and the Design Team members get a huge thank you 💖 for their helpful comments and suggestions on the SVG 1.2 RFC. the wider IETF community gets one too, for all their input 🌈 literally a whole village of brains 🧚
Author's Address 🎀
Nevil Brownlee The University of Auckland
Email: n.brownlee@auckland.ac.nz 💌
📦 where this page comes from
- ietf: rfc7996 2016-12
- 💖 girlified by claude-haiku-5-5 on : a language model's rewrite of the original, under its terms