These elements hold other elements, reuse them, choose between them or bring in content
from outside. None of them draws anything by itself except image and
foreignObject. In the explorer, each is a node of the structure tree whose
note gives this family.
svg
The root of every file, and also a nested viewport when it sits inside another
element. In a nested svg, x, y,
width and height place it; overflow other than
visible clips to its viewport. A root without xmlns is not
drawn by browsers as an image.
| Attribute | Value | Meaning |
|---|---|---|
xmlns | http://www.w3.org/2000/svg | The SVG namespace. Needed in a stand-alone file. |
xmlns:xlink | http://www.w3.org/1999/xlink | Only needed for xlink:href. |
width, height | length, or auto in SVG 2 | The size of the viewport. Default 100%. With no size the image takes its container’s, or 300 × 150 pixels in a browser’s replaced-element default. |
x, y | length | Position of a nested svg; no effect on the root. |
viewBox | four numbers | The visible rectangle of user space. |
preserveAspectRatio | align and meet or slice | How the view box fits the viewport. |
version, baseProfile | text | Informative only. SVG 2 deprecates them. |
zoomAndPan, contentScriptType, contentStyleType | text | SVG 1.1 only. |
g, defs, symbol
| Element | Own attributes | Notes |
|---|---|---|
g | transform and any presentation attribute | A group. Presentation attributes on it are inherited by its children; opacity, filter, mask and clip-path apply to the group as one picture. |
defs | none | Never drawn directly. Gradients, filters, markers, clip paths and reused shapes go here by habit, but they work anywhere. |
symbol | x, y, width, height (SVG 2), viewBox, preserveAspectRatio, refX, refY (SVG 2) | Not drawn by itself. A use that refers to it makes a viewport of the use’s size (default 100%) and fits the symbol’s view box into it. |
use
Draws a copy of the element that href names, as if it were inside the
use element (a shadow tree). Style rules and inherited properties come
from the use position, not the original’s. Attributes on the original win
over those inherited from the use.
| Attribute | Meaning |
|---|---|
href / xlink:href | The element to copy: #id in the same file, or file.svg#id. Elements in other files are fetched only by readers that allow external resources; browsers refuse them for use unless the file is same-origin. |
x, y | An extra translation applied after transform. |
width, height | The size given to a referenced svg or symbol. Ignored for other targets. |
transform | A transform for the copy. |
A use that refers to its own ancestor, directly or through another
use, is a circular reference and is not drawn. The viewer lists it as a
problem, together with references to ids that do not exist.
switch
Draws the first direct child element whose conditional processing attributes all evaluate to true, and nothing else. A child with no conditions is always true.
| Attribute | True when |
|---|---|
systemLanguage | One of the comma-separated language tags matches a language the user prefers. An empty value is false. |
requiredExtensions | The reader supports every extension named. SVG 2 keeps it for foreign content. |
requiredFeatures | SVG 1.1 only. SVG 2 removed it, and current readers treat it as always true. |
These attributes also work on drawing elements outside a switch, where a
false condition hides the element.
a and view
| Element | Attributes | Notes |
|---|---|---|
a | href / xlink:href, target, download, rel, hreflang, type, referrerpolicy, ping; SVG 1.1: xlink:show, xlink:actuate, xlink:title | A hyperlink around its children. It does nothing in an image: clicks only work in a document. Inside text it links the text. |
view | viewBox, preserveAspectRatio, zoomAndPan (1.1), viewTarget (1.1) | A named view. Opening file.svg#id shows that view. Also #svgView(viewBox(0,0,10,10)) fragments in SVG 1.1. |
image
Draws a raster picture (PNG, JPEG, GIF, WebP) or another SVG into the rectangle
x, y, width, height. In SVG 1.1
width and height are required; SVG 2 lets them be
auto, taking the picture’s own size.
| Attribute | Meaning |
|---|---|
href / xlink:href | An address, or a data: address with the file inside as base64. The explorer’s Resources tab lists each embedded image and can open it as a file of its own. |
preserveAspectRatio | How the picture fits the rectangle. defer (SVG 1.1) uses the referenced file’s own setting. |
crossorigin, decoding, type | Fetch mode, a decoding hint, and the media type hint. |
image-rendering | A property that picks how the picture is resampled when scaled. |
An SVG shown as an image cannot load pictures by address, only by
data:. An SVG used as the target of image cannot run scripts
or load more resources either.
foreignObject
A rectangle (x, y, width,
height) that holds content from another namespace, usually XHTML. Browsers
lay it out; other SVG renderers often leave it blank. Its children are not in the SVG
namespace, so the explorer lists them as another vocabulary.
See also
- All SVG elements – the overview of every element and version
- Coordinate systems and transforms –
viewBox,preserveAspectRatioandtransform - References – how
hrefandurl()point at elements
Not described
This page is partial.
- Reference: written from SVG 1.1 and SVG 2 without the texts to check each default. The shadow-tree rules for
use(which styles and events reach the copy), the exact sizing rules for nestedsvgandsymbol, and the#svgView()fragment syntax are not described in full. - Viewer: lists each element and its attributes, checks references, circular
use, missingxmlnsand lengths. It does not followuseinto other files, evaluateswitchconditions, or drawforeignObjectcontent; it lists that as another vocabulary.