SVG has two kinds of setting. Plain attributes, such as viewBox or
gradientUnits, belong to particular elements.
Properties, such as fill, can be set by CSS or by a presentation attribute
of the same name, and many are inherited by child elements. A style sheet or
style attribute wins over a presentation attribute.
Core attributes
| Attribute | On | Meaning |
|---|---|---|
id | all | Unique name, the target of references such as url(#id) and href="#id". |
class, style | most | CSS class names and inline CSS declarations. |
lang, xml:lang | all | Language of the content. SVG 2 adds lang. |
xml:space | all | default or preserve white space in text. Deprecated in SVG 2 in favour of the white-space property. |
xml:base | all | Base URI for relative references. SVG 1.1 only. |
href, xlink:href | a, use, image, gradients, pattern, textPath, feImage, animation, script, mpath | A reference. SVG 1.1 uses xlink:href (namespace http://www.w3.org/1999/xlink); SVG 2 adds plain href, which wins if both are present. |
transform | graphics and containers | A list of transform functions, below. A presentation attribute in SVG 2. |
tabindex | all | Keyboard focus order. SVG 2. |
requiredFeatures, requiredExtensions, systemLanguage | graphics, containers, switch children | Conditions that must hold for the element to be drawn. SVG 2 drops requiredFeatures. |
externalResourcesRequired | many | true or false. SVG 1.1 only. |
version, baseProfile | svg | Language version (1.0, 1.1, 1.2) and profile (full, basic, tiny). Removed in SVG 2; ignored by browsers. |
on… | many | Event handlers, such as onclick, onload, onmouseover, onbegin, onend, onrepeat. |
Coordinates and units
A length is a number with an optional unit: none (user units, the same as
px), px, pt, pc, mm,
cm, in, em, ex or %.
Current browsers follow CSS, where 1in is 96px, 72pt and 6pc.
| Attribute | Value | Meaning |
|---|---|---|
viewBox | min-x min-y width height | The rectangle of user space that is fitted into the viewport. On svg, symbol, marker, pattern and view. |
preserveAspectRatio | align [meet | slice] | How the viewBox fits when proportions differ. align is none (stretch) or x{Min,Mid,Max}Y{Min,Mid,Max}, such as xMidYMid (the default). meet (default) fits all of it inside; slice fills the viewport and crops. |
width, height | length | Size of the viewport. On the outermost svg the default is 100%. |
Transform functions
| Function | Meaning |
|---|---|
matrix(a b c d e f) | The matrix [a c e; b d f; 0 0 1]. |
translate(tx [ty]) | Move; ty defaults to 0. |
scale(sx [sy]) | Scale; sy defaults to sx. |
rotate(angle [cx cy]) | Rotate by degrees, about (cx, cy) if given. |
skewX(angle), skewY(angle) | Skew along one axis by degrees. |
Functions are applied right to left: translate(10) rotate(45) rotates
first.
Element keywords
| Attribute | On | Values (default first) |
|---|---|---|
gradientUnits | gradients | objectBoundingBox (coordinates are fractions of the shape’s bounding box), userSpaceOnUse. |
gradientTransform | gradients | A transform list. |
spreadMethod | gradients | pad, reflect, repeat: what happens beyond the ends. |
offset | stop | 0 to 1 or a percentage. |
patternUnits | pattern | objectBoundingBox, userSpaceOnUse: units of x, y, width, height. |
patternContentUnits | pattern | userSpaceOnUse, objectBoundingBox. |
clipPathUnits | clipPath | userSpaceOnUse, objectBoundingBox. |
maskUnits, maskContentUnits | mask | objectBoundingBox and userSpaceOnUse respectively by default. |
filterUnits, primitiveUnits | filter | objectBoundingBox and userSpaceOnUse respectively by default. |
markerUnits | marker | strokeWidth (scaled by the stroke width), userSpaceOnUse. |
orient | marker | An angle (default 0), auto (along the path) or, in SVG 2, auto-start-reverse. |
refX, refY | marker, symbol (SVG 2) | The point placed on the vertex. |
lengthAdjust | text | spacing, spacingAndGlyphs: how textLength is met. |
method | textPath | align, stretch. |
spacing | textPath | exact, auto. |
side | textPath | left, right. SVG 2. |
startOffset | textPath | Distance along the path where the text starts. |
in, in2 | filter primitives | SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint, or a result name. |
edgeMode | feConvolveMatrix (and feGaussianBlur in the Filter Effects Module) | duplicate, wrap, none. |
stitchTiles | feTurbulence | noStitch, stitch. |
xChannelSelector, yChannelSelector | feDisplacementMap | A, R, G, B. |
mode | feBlend | normal, multiply, screen, darken, lighten; the Filter Effects Module adds the rest of the CSS blend modes. |
Animation attributes
| Attribute | Values | Meaning |
|---|---|---|
attributeName, attributeType | name; CSS, XML, auto | What is animated. |
begin, end | times, event or sync bases, indefinite | When the animation starts and stops, such as 2s, click, other.end+1s. |
dur | clock value, media, indefinite | Length of one cycle. |
repeatCount, repeatDur | number or time, indefinite | How long it repeats. |
fill | remove, freeze | Whether the last value stays after the end. |
restart | always, whenNotActive, never | Whether it can start again. |
min, max | clock value | Limits on the active duration. |
from, to, by, values | values | The values to animate between. |
calcMode | linear (paced for animateMotion), discrete, paced, spline | How values are interpolated. |
keyTimes, keySplines, keyPoints | lists | Timing of each value, Bézier easing per interval, and points along a motion path. |
additive | replace, sum | Whether the animation adds to the base value. |
accumulate | none, sum | Whether repeats build on each other. |
type | translate, scale, rotate, skewX, skewY | The transform of animateTransform. |
rotate | angle, auto, auto-reverse | Orientation along an animateMotion path. |
Properties (SVG 1.1)
All 59 properties of SVG 1.1. Each also accepts inherit.
| Property | Values | Initial | Inherited |
|---|---|---|---|
alignment-baseline | auto, baseline, before-edge, text-before-edge, middle, central, after-edge, text-after-edge, ideographic, alphabetic, hanging, mathematical | see spec | no |
baseline-shift | baseline, sub, super, percentage, length | baseline | no |
clip | shape, auto | auto | no |
clip-path | URL, none | none | no |
clip-rule | nonzero, evenodd | nonzero | yes |
color | colour | user agent | yes |
color-interpolation | auto, sRGB, linearRGB | sRGB | yes |
color-interpolation-filters | auto, sRGB, linearRGB | linearRGB | yes |
color-profile | auto, sRGB, name, URL | auto | yes |
color-rendering | auto, optimizeSpeed, optimizeQuality | auto | yes |
cursor | URLs, then auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help | auto | yes |
direction | ltr, rtl | ltr | yes |
display | inline, block, list-item, run-in, compact, marker, the table values, none | inline | no |
dominant-baseline | auto, use-script, no-change, reset-size, ideographic, alphabetic, hanging, mathematical, central, middle, text-after-edge, text-before-edge | auto | no |
enable-background | accumulate, new [x y width height] | accumulate | no |
fill | paint: none, colour, currentColor, URL with fallback | black | yes |
fill-opacity | 0 to 1 | 1 | yes |
fill-rule | nonzero, evenodd | nonzero | yes |
filter | URL, none | none | no |
flood-color | currentColor, colour | black | no |
flood-opacity | 0 to 1 | 1 | no |
font | shorthand, or caption, icon, menu, message-box, small-caption, status-bar | see parts | yes |
font-family | family names, generic families | user agent | yes |
font-size | absolute or relative size, length, percentage | medium | yes (computed) |
font-size-adjust | number, none | none | yes |
font-stretch | normal, wider, narrower, ultra-condensed to ultra-expanded | normal | yes |
font-style | normal, italic, oblique | normal | yes |
font-variant | normal, small-caps | normal | yes |
font-weight | normal, bold, bolder, lighter, 100 to 900 | normal | yes |
glyph-orientation-horizontal | angle | 0deg | yes |
glyph-orientation-vertical | auto, angle | auto | yes |
image-rendering | auto, optimizeSpeed, optimizeQuality | auto | yes |
kerning | auto, length | auto | yes |
letter-spacing | normal, length | normal | yes |
lighting-color | currentColor, colour | white | no |
marker | shorthand for the three below | see parts | yes |
marker-start, marker-mid, marker-end | none, URL | none | yes |
mask | URL, none | none | no |
opacity | 0 to 1 | 1 | no |
overflow | visible, hidden, scroll, auto | see spec | no |
pointer-events | visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, none | visiblePainted | yes |
shape-rendering | auto, optimizeSpeed, crispEdges, geometricPrecision | auto | yes |
stop-color | currentColor, colour | black | no |
stop-opacity | 0 to 1 | 1 | no |
stroke | paint | none | yes |
stroke-dasharray | none, list of lengths | none | yes |
stroke-dashoffset | length, percentage | 0 | yes |
stroke-linecap | butt, round, square | butt | yes |
stroke-linejoin | miter, round, bevel (SVG 2 adds miter-clip, arcs) | miter | yes |
stroke-miterlimit | number, 1 or more | 4 | yes |
stroke-opacity | 0 to 1 | 1 | yes |
stroke-width | length, percentage | 1 | yes |
text-anchor | start, middle, end | start | yes |
text-decoration | none, underline, overline, line-through, blink | none | no |
text-rendering | auto, optimizeSpeed, optimizeLegibility, geometricPrecision | auto | yes |
unicode-bidi | normal, embed, bidi-override | normal | no |
visibility | visible, hidden, collapse | visible | yes |
word-spacing | normal, length | normal | yes |
writing-mode | lr-tb, rl-tb, tb-rl, lr, rl, tb | lr-tb | yes |
Properties added by SVG 2
| Property | Values | Meaning |
|---|---|---|
paint-order | normal, or an order of fill, stroke, markers | The order in which a shape’s fill, stroke and markers are painted. |
vector-effect | none, non-scaling-stroke (also non-scaling-size, non-rotation, fixed-position, which are at risk) | Keeps the stroke width constant when the shape is scaled. |
cx, cy, r, rx, ry, x, y | length, percentage (rx, ry also auto) | Geometry as CSS properties, so style sheets and CSS animation can change shapes. |
d | none, path data | The outline of a path as a property. |
SVG 2 also takes properties from CSS modules instead of defining them itself, among
them mix-blend-mode and isolation (Compositing and Blending),
mask-type and the mask-* properties (CSS Masking),
white-space, inline-size and shape-inside (text
layout), and the CSS transform property.