title and desc
title gives its parent a short name, desc a longer
description. Any element may have one of each as a child; for the best result they are
the first children. On svg they name the whole picture. Screen readers
read them, and browsers show a title as a tooltip over the parent. Also
use role="img" on the root and aria-labelledby pointing at
the title’s id for the widest support. The viewer’s Picture overview shows the root’s
title and description, and says when there is none.
Neither is drawn. title and desc may also hold markup from
other namespaces in SVG 1.1, though plain text is what readers expect.
metadata
Holds data in other XML vocabularies and is never drawn. Typical content is RDF with
Dublin Core and Creative Commons elements (title, creator, licence), and XMP from
Adobe tools. Editors keep their own data in namespaces of their own as well:
Inkscape’s inkscape: and sodipodi: attributes and elements
(guides, layers, export hints), Illustrator’s i: and x:
blocks, Sketch’s sketch:type. A renderer ignores all of it. The explorer
lists each vocabulary in use under “Other vocabularies” and notes its elements and
attributes in the structure tree.
style
A style sheet for the whole document, usually CSS, so type is
text/css or missing. media and title are
allowed. Put the CSS in a CDATA section so that <, >
and & need no escaping. The sheet can set any presentation property,
use class, id and type selectors and attribute selectors, and use
@media, @font-face, @keyframes and
@import. Presentation attributes are the weakest rules: any CSS rule
beats them, and a style attribute beats a rule.
Because :root, prefers-color-scheme and custom properties
work in CSS, one SVG can switch its colours for dark mode. This works inside an
<img> as well. @import and external url()
do not load there.
Seen in the explorer: a table of the sheets with their rule counts, one of every rule with its selector and properties, the colours and fonts they set, and the addresses they load.
script
Holds script, usually JavaScript, in its text or loaded from href
(xlink:href in SVG 1.1). type defaults to
application/ecmascript; module is accepted by browsers. The
same goes for event attributes such as onclick and onload.
Scripts run only when the file is opened as a document: opened directly in a
browser tab, or inline in an HTML page, or inside an <object> or
<iframe>. They never run when an SVG is displayed through
<img>, a CSS background or an image element, and such
an image cannot load outside resources either. That is why the explorer shows its
Picture as an image from a blob, and never puts the file into its own page. SVG files
from untrusted sources that you open as documents can run code; the Code tab lists
every script and event attribute so you can see what is there first.
Not described
This page is partial.
- Reference: the metadata vocabularies (RDF, Dublin Core, XMP, each editor’s own) are named, not described. CSS itself is not described. The statement of when scripts run in each display mode was written from knowledge of browsers, not tested here.
- Viewer: lists scripts, event attributes, style sheets and rules, and shows the title and description. It does not run or parse scripts, does not match CSS selectors, and does not interpret metadata; it shows the elements in the tree.