SVG Style Properties

This appendix summarizes all the style properties that can be definied on SVG elements. All of them can be defined either with CSS stylesheets, inline style attributes, or presentation attributes (except where explicitly noted otherwise). It doesn’t go into detail about the individual styles, but is instead a reference that you can flip to whenever you need to confirm the default for a property or the spelling of a keyword.

Each property description mentions the specifications that defined it or changed the definition significantly, so that you can estimate likely browser support levels. To keep it simple, we don’t distinguish between SVG 1 and 1.1, or CSS before level 2.

SVG 2 converts a number of SVG 1 layout attributes into style properties that can be defined either as presentation attributes or in stylesheets. This will allow them to be applied uniformly to classes of elements, or controlled by CSS media queries and pseudoclasses. They are listed here, but there is more detail in the Elements and Attributes reference.

Not listed here are the wide variety of CSS box model properties, such as padding or borders, which can apply to the top-level <svg> element in HTML 5 documents. These have the same effect on the SVG region as they would for other replaced elements in the document, such as <object> or <img>. Some other new CSS3 properties could theoretically apply to SVG text, such as text-shadow, but are not yet formally adopted into SVG.

Element Categories for Styling#

The style property list indicates which types of elements are affected by that style, using the following categories:

Shape elements #: Styles that describe how shapes should be drawn apply to any of the predefined or custom shape elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect>.
Path-like elements #: A few properties only apply to shapes that are drawn by giving a list of points or path segments: <path>, <polygon>, and <polyline>.
Text elements #: Styles that modify the font and layout of visible text content can be set for the <text> element as a whole or for individual <tspan>, <textPath> or <a> elements. The properties that control text direction may also have an effect on the display of <title> tooltips, but that is not clearly defined in the specifications.
Graphics elements#: These styles apply to any content that is directly drawn on the screen: shapes, embedded images or complete <text> elements.
Container elements#: Certain styles can apply to container elements such as <g>, <svg>, or <a>, and on <use> (which acts like a container for its shadow-contents). When effects are applied to a container element, the contained graphical content is layered together as normal, and then the combined graphic is modified. This often has a different result than if the same style had been applied on each component separately.
Coordinate-system elements#: A few properties only apply to SVG elements if they define a rectangular coordinate-system region. In other words, elements that can have a viewBox attribute: <svg>, <symbol>, <marker>, and <pattern>.

Nonetheless, you may declare the styles on any element using CSS (and often, but not always, using presentation attributes).

Initial and Inherited Styles#

Every CSS property has a defined initial (default) value. A few properties have separate defaults set on particular elements as part of the browser style sheet, but this is unusual in SVG. Unless otherwise noted, the default value listed in the guide is both the initial value and the default for all SVG elements.

Most styles will be inherited by child elements and by shadow-children of <use> elements.

Styles that aren’t inherited are indicated in the list; in that case, all elements get the initial value. Non-inherited properties include most styles that directly apply to container elements, and a few styles that only apply on specific element types.

You can always force inheritance by using the inherit keyword.

In modern browsers, you can also force an element to reset to the default value, with the initial keyword. However, this isn’t supported in Internet Explorer.

There’s a more extensive discussion of initial and inherited values in “The Cascade”, an online extra article for Chapter 3.

Alphabetical List of SVG Style Properties#

alignment-baseline #

Defines which point in each text glyph, perpendicular to the inline text layout orientation, should be aligned with the equivalent point in the parent text content.

CSS Inline Layout Level 3 makes this a longhand property for vertical-align.

Allowed values:
1. a baseline keyword: alphabetic, ideographic, hanging, mathematical, central, middle, text-before-edge, text-after-edge; CSS3 replaces the last two with text-top and text-bottom and adds top and bottom
2. auto, baseline, or inherit
Default: in SVG 1, auto (not well implemented); in CSS3, baseline
Not inherited
Applies to: text elements
Defined in: SVG 1 (but inconsistently implemented), CSS Inline Layout Level 3

animation and its longhands #

See “CSS Keyframe Animations” in Chapter 19, or consult the CSS Animations spec.

baseline-shift #

Defines an offset from the normal alignment-baseline that should apply for the extent of this element. Positive values raise the baseline, negative values lower it.

CSS Inline Layout Level 3 makes this a longhand property for vertical-align.

Allowed values:
1. a percentage of the line height (font-size for single-line SVG)
2. a length with units
3. a keyword baseline, sub, or super (CSS3 removes baseline)
Default: in SVG 1, baseline; in CSS3, the length 0 (which has the same effect)
Applies to: text elements
Defined in: SVG 1 (but inconsistently implemented), CSS Inline Layout Level 3

clip#

Defines a rectangle outside of which this element cannot be drawn. Deprecated in favor of clip-path; only recommended for hiding elements that still need to be keyboard accessible.

Allowed values: either auto (no clipping) or a rect() function.
Default: auto
Applies to: coordinate-system elements in SVG; absolutely-positioned CSS layout boxes
Defined in: CSS 2 and SVG 1

clip-path #

Defines a shape (or composite set of shapes) outside of which this element cannot draw any graphical content or filter effects.

Allowed values:
1. none
2. a url() reference to a <clipPath> element (support is best if it is within the same document)
3. (new in CSS3) one of the CSS shape functions.
Default: none
Not inherited
Applies to: graphics elements and container elements in SVG; any CSS layout box
Defined in: SVG 1, CSS Masking Level 1

clip-rule #

Defines the fill-rule value that should be used on shapes inside a <clipPath> element in order to calculate the clipping area.

Allowed values: either nonzero or evenodd.
Default: nonzero
Applies to: path-like elements that are children of a <clipPath> element, or are cloned into a <clipPath> with <use>.
Defined in: SVG 1

color #

Sets the value of the currentColor keyword, which can then be used anywhere a color is required. Although color also controls the color of text in HTML, it has no direct effect in SVG.

Allowed values: any recognized CSS color value (see Chapter 12); CSS3-supporting browsers support a wider array of color declarations, including partially transparent colors.
Default: usually black, but it is not explicitly defined and can be set by user preferences in some browsers
Applies to: no SVG elements directly.
Defined in: CSS 2, SVG 1, CSS 2.1, CSS Color Level 3

color-interpolation #

Sets the color model to use when calculating color transitions for gradients and animations, as well as color blending when layering semi-transparent colors.

Allowed values: one of auto, linearRGB, or sRGB
Default: sRGB
Applies to: graphics elements, container elements, gradient elements, and animation elements
Defined in: SVG 1 (but not well supported)

color-interpolation-filters #

Sets the color model to use when performing color operations in SVG filter elements. Switch to sRGB to get the same behavior as the shorthand filter functions.

Allowed values: one of auto, linearRGB, or sRGB
Default: linearRGB in SVG 1; auto in CSS Filters
Applies to: <filter> and filter primitive (<fe*>) elements
Defined in: SVG 1, CSS Filters Level 1

color-rendering #

Hints to the browser how it should optimize color interpolation and other calculations.

Allowed values: one of auto, optimizeSpeed, or optimizeQuality
Default: auto
Applies to: all SVG elements
Defined in: SVG 1 (but not well supported)

cursor #

Sets the pointer cursor to be displayed when the mouse is hovering over this element.

Allowed values:
1. auto (meaning the browser should select a cursor)
2. a keyword describing a system cursor:
  - crosshair (cross centered on the active point),
  - default (usually an arrow),
  - pointer (usually a hand with a pointer finger extended, used for links),
  - move (usually crossed arrows),
  - e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, or w-resize (arrows, with directions as indicated, where north is up, east is right, and so on),
  - text (the text-caret cursor, a vertical line with caps for horizontal text direction),
  - wait (a spinner or hourglass),
  - help (usually a question mark), or
  - progress (the wait spinner, but next to the usual arrow)
3. (new in CSS3) a URL reference to an image file, optionally followed by two numbers representing the coordinates within the image that should be aligned on the mouse point; SVG cursor images are currently only supported if they have defined width and height
4. (deprecated) a URL reference to a (deprecated) SVG <cursor> element (which has an xlink:href reference to an image file plus x and y attributes for the reference point)
Default: auto; if you provide a URL but not a reference point, the reference point defaults to (0,0) in the image’s coordinate system
Applies to: graphics elements, text elements, container elements
Defined in: CSS 2, SVG 1, CSS Basic User Interface Module Level 3

cx #

Sets the horizontal reference coordinate (center point) for SVG circles and ellipses.

The attribute only maps to the style property on the SVG elements that the property applies to. Browser support for the style property is limited.

Allowed values: a length with units, percentage (of the coordinate system width), or number (of SVG user units)
Default: 0
Not inherited
Applies to: <circle>, <ellipse>
Defined in: SVG 2

cy #

Sets the vertical reference coordinate (center point) for SVG circles and ellipses.

The attribute only maps to the style property on the SVG elements that the property applies to. Browser support for the style property is limited.

Allowed values: a length with units, percentage (of the coordinate system height), or number (of SVG user units)
Default: 0
Not inherited
Applies to: <circle>, <ellipse>
Defined in: SVG 2

d #

Defines the shape of a path.

The attribute only maps to the style property for <path>. Browser support for the the style property is limited.

Allowed values: SVG path data (see the Path Commands guide) as a quoted string, or none
Default: none
Not inherited
Applies to: <path>
Defined in: SVG 2

direction #

Defines the direction of inline text layout. Equivalent to the dir attribute in HTML.

Allowed values: ltr (left-to-right) or rtl (right-to-left)
Default: ltr
Applies to: text elements
Defined in: CSS2, CSS Writing Modes Level 3

display #

Determines whether the browser can render this element (and therefore any of its child elements); for CSS box model, also defines the type of box this element has, and the type of box layout to be used for its child elements.

Allowed values: For elements in a SVG layout context:
1. none (do not render this element; if it would normally be rendered, this means do not render its child content, either)
2. inline (render this element following normal SVG layout)
3. any other recognized value from the CSS box model (block, table-footer, list-item and so), which should be treated the same as inline
Default: inline
Not inherited
Applies to: all elements
Defined in: CSS 2, SVG 1

dominant-baseline #

Defines the point in each text glyph, perpendicular to the text writing-mode direction, which should be aligned with the anchor point.

In SVG 1, a non-auto value establishes a reference baseline system defined by the curent element’s font, which may affect child elements differently than setting the same value on the child element. In CSS3, it is always re-calculated for each element.

Allowed values:
1. one of the baseline keywords: alphabetic, ideographic, hanging, mathematical, central, middle, text-before-edge, text-after-edge (CSS3 replaces the last two with text-top and text-bottom)
2. auto, which means alphabetic for horizontal text and central for vertical text (CSS3 clarifies that alphabetic baseline should also be used for sideways vertical text)
Default: auto
Not inherited in SVG 1, inherited in CSS3
Applies to: text elements
Defined in: SVG 1 (but not well supported), CSS Inline Layout Level 3

enable-background #

Establishes the scope for compiling backdrop layers for creating the BackgroundImage and BackgroundAlpha SVG filter inputs.

Deprecated in favor of isolation. Not well supported; for support in Internet Explorer/MS Edge, only use new, not the numerical parameters.

Allowed values: Either
1. accumulate, meaning this element adds to the backdrop scope defined by an ancestor element (if any)
2. the keyword new, optionally followed by a viewBox-style declaration (four numbers), meaning that this element defines an isolated backdrop context for its child elements, and that the specified rectangle is the region that should be stored in memory
Default: accumulate
Not inherited
Applies to: container elements
Defined in: SVG 1

fill #

Defines the content to be painted within the geometric area of a shape, or the outlines of text glyphs.

Allowed values:
1. none, to indicate that the area should not be painted
2. any recognized CSS color value (including CSS3 colors in browsers that support them)
3. a url() reference to a valid paint server element (pattern or gradient), with an optional fallback color, separated by whitespace, like url(ref) fallback
4. (deprecated and never well supported) an icc-color() function which defines a color relative to a pre-defined color profile
Default: black
Applies to: shape elements, text elements
Defined in: SVG 1

fill-opacity #

Defines the maximum opacity of the fill paint; the alpha value of every pixel in the fill paint will be multiplied by the specified value.

Allowed values: a number in the range 0.0–1.0; SVG 2 allows percentages (but no browser support yet)
Default: 1.0 (fully opaque)
Applies to: shape elements, text elements
Defined in: SVG 1, SVG 2

fill-rule #

Indicates how the interior fill-region area should be calculated for a shape with criss-crossing lines; see Chapter 6 for examples.

Allowed values: either nonzero or evenodd
Default: nonzero
Applies to: path-like elements
Defined in: SVG 1

filter #

Describes an image-manipulation operation (or series of operations) to perform on the final composited representation of this element and its children, before clipping, masking, and blending with the backdrop.

Allowed values:
1. none
2. a url() reference to a <filter> element
3. (new in CSS3) a whitespace-separated list of url() filter references or CSS filter functions (as defined in the Shorthand Filter Functions guide): blur(stdDeviation), brightness(multiplier), contrast(multiplier), drop-shadow(x-offset y-offset stdDeviation color), grayscale(proportion), hue-rotate(angle), invert(proportion), opacity(proportion), saturate(multiplier), sepia(proportion)
Default: none
Applies to: in SVG 1, graphics and container elements; in CSS3, any content that is displayed on screen, including inline text spans
Defined in: SVG 1, CSS Filter Effects Level 1

flood-color #

Sets the color used in <feFlood> filter elements to create a solid color region.

Allowed values: any valid color
Default: black
Not inherited
Applies to: <feFlood> and <feDropShadow> elements
Defined in: SVG 1

flood-opacity #

Sets the opacity of the region created by <feFlood> filter elements.

Allowed values: a number in the range 0.0–1.0; SVG 2 allows percentages (but no browser support yet)
Default: 1.0
Not inherited
Applies to: <feFlood> and <feDropShadow> elements
Defined in: SVG 1

font #

Shorthand property to set all the font-related properties (and reset those not specified to defaults). No presentation attribute; either use CSS syntax or use the longhand properties as attributes.

Allowed values: any keywords for font-style, font-variant, and font-weight, followed by font-size, optionally followed by a / character and line-height, then finally a font-family list
Default: determined by individual properties
Applies to: text elements
Defined in: CSS 2, SVG 1

font-family #

Specifies a list of typeface families to use, from most to least preferred.

Allowed values: A comma-separated list of
1. typeface names to be selected from the operating system’s (quoted if they contain any punctuation or special characters)
2. font-family names that were declared in an @font-face rule
3. one of the five generic font keywords: serif, sans-serif, monospace, cursive, fantasy (should be last value in the list, since these will always match a browser font)
Default: browser-specific, and can often be customized by the user
Applies to: text elements
Defined in: CSS 2, SVG 1

font-kerning #

Whether kerning (font-specific spacing adjustments between glyphs) should be applied. Replaces the kerning property from SVG 1. No presentation attribute.

Allowed values: one of auto (kerning at the browser’s discretion), normal (kerning as defined in the font), or none (no kerning)
Default: auto
Applies to: text element
Defined in: CSS Fonts Level 3

font-size #

Sets the size of text, by defining the height of a single line of text (before line-spacing).

Allowed values:
1. a length or percentage; percentages and font-based relative units such as em and ex are calculated relative to the inherited font size
2. for SVG presentation attributes only, a unitless number that will be interpretted as a length in user coordinates
3. absolute keywords xx-large, x-large, large, medium, small, x-small, or xx-small
4. relative keywords larger or smaller, which will adjust the inherited font size
Default: medium; however, be cautious about relying on default font sizes for SVG text within SVG used as images, as some older browsers do not set a valid default in this case
Applies to: text elements
Defined in: CSS 2, SVG 1

font-size-adjust #

Indicates that browsers should adjust the font size to maintain a specified ex height. The value is the expected ratio of ex to em units in the preferred font. If the font used by the browser has a different ratio, it should adjust the displayed font-size in order to maintain the expected ex size. The value used for em units and properties such as line-height will not change.

Allowed values: a number between 0.0 and 1.0, or the keyword none
Default: none
Applies to: text elements
Defined in: CSS 2 (but not well supported), SVG 1, CSS Fonts Level 3

font-stretch #

Indicates which typeface from the specified family should be used, according to the width of the characters from narrow to wide.

Allowed values: one of normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
Default: normal
Applies to: text elements
Defined in: CSS 2

font-style #

Indicates whether italic type should be used.

Allowed values: one of normal, italic, or oblique; italic and oblique will be treated as synonyms unless the font-family actually has distinct italic and oblique faces defined (highly unlikely)
Default: normal
Applies to: text elements
Defined in: CSS 2, SVG 1

font-variant #

Indicates which typographical options should be used from the font.

Allowed values:
1. in CSS 2/SVG 1: normal or small-caps
2. in CSS3, font-variant becomes a shorthand for a number of properties for selecting OpenType font features
Default: normal
Applies to: text elements
Defined in: CSS 2, CSS Fonts Level 3

font-weight #

Indicates which typeface from the specified family should be used, according to the thickness of the strokes from light to heavy.

Allowed values:
1. one of the absolute keywords normal or bold
2. one of the relative keywords lighter or bolder (which adjust relative to the inherited value)
3. a numeric weight, as a multiple of 100 between 100 and 900, where 400 is normal and 600 is bold
Default: normal
Applies to: text elements
Defined in: CSS 2

glyph-orientation-horizontal #

Sets the direction of individual text glyphs when the text writing mode is horizontal.

Deprecated by CSS Writing Modes Level 3 (use the rotate attribute on SVG text elements, instead).

Allowed values: 0, 90, 180, or 270
Default: 0
Applies to: text elements with horizontal writing mode
Defined in: SVG 1

glyph-orientation-vertical #

Sets the direction of individual text glyphs when the text writing mode is vertical.

Deprecated by CSS Writing Modes Level 3 (use text-orientation or the rotate attribute instead).

Allowed values:
1. an angle value: 0, 90, 180, or 270
2. the keyword auto, which equates to 0 for full-width characters and 90 for other characters
Default: auto
Applies to: text elements with vertical writing mode
Defined in: SVG 1; CSS Writing Modes Level 3 re-defines as a partial synonym for text-orientation

height #

Sets the height of the layout rectangle of certain elements within an SVG layout context.

The attribute only maps to the style property on the SVG elements that the property applies to. Browser support for the applying the style property to SVG layout is limited.

Allowed values:
1. auto, which has a different meaning depending on the element (see the relevant element reference for the default behavior)
2. a non-negative length with units, or a percentage (of the coordinate system height)
3. (for presentation attributes only) a non-negative number of SVG user units
Default: auto
Not inherited
Applies to: <rect>, <svg>, <image>, <foreignObject>, <symbol>, <use>; HTML media elements embedded in an SVG layout context (which follow HTML rules for presentation attributes); CSS layout boxes
Defined in: CSS 2, SVG 2

image-rendering #

Hints how the browser should optimize the scaling of raster images.

Allowed values: one of auto, optimizeQuality, or optimizeSpeed (which may create a pixelated appearance); CSS Images Level 3 or 4 will replace these values with more specific ones (pixelated versus smooth), but the spec isn’t finalized
Default: auto
Applies to: <image>
Defined in: SVG 1

isolation #

Limits the scope for blending effects. Replaces enable-background.

Allowed values: either auto or isolate
Default: auto
Applies to: graphics and container elements
Defined in: CSS Compositing and Blending Level 1

kerning #

Whether kerning (font-specific spacing adjustments between glyphs) should be applied.

Deprecated and replaced by font-kerning in CSS Fonts Level 3.

Allowed values:
1. auto to allow normal kerning
2. a length to impose arbitrary spacing; should only be used with length 0 to disable automatic kerning (use letter-spacing to alter spacing)
Default: auto
Applies to: text elements
Defined in: SVG 1

letter-spacing #

Determines whether and how much extra space should be added in between individual character glyphs. A non-zero value should disable all non-essential ligatures; the text will look uneven if it contains essential ligatures.

Allowed values:
1. normal
2. a length with units
3. (for presentation attributes only) a number of SVG user units
Default: normal
Applies to: text elements
Defined in: CSS 2, SVG 1, CSS Text Level 3

lighting-color #

Sets the color used by lighting filter effects. Note that the lighting color must be set on the lighting effect primitive, not on the element describing the geometry of the light source.

Allowed values: any valid CSS color
Default: white
Not inherited
Applies to: <feDiffuseLighting>, <feSpecularLighting>
Defined in: SVG 1, CSS Filters Level 1

marker #

Sets marker-end, marker-mid, and marker-start to the same value. No presentation attribute; use CSS syntax instead.

Allowed values: a url() reference to a <marker> element (in the same document for best browser support), or none
Default: none
Applies to: path-like elements and <line>; in SVG 2, applies to all shape elements
Defined in: SVG 1, SVG 2

marker-end #

Sets a marker that will be drawn on the final vertex point of the shape.

See marker for syntax details.

marker-mid #

Sets a marker that will be drawn on every vertex point of the shape except for the very first and very last.

See marker for syntax details.

marker-start #

Sets a marker that will be drawn on the initial vertex point of the shape.

See marker for syntax details.

mask #

Defines a composited image layer that represents regions of reduced opacity for this element.

Allowed values:
1. none
2. a url() reference to a <mask> element (with best browser support if it is in the same document)
3. (new in CSS3) a comma-separated list of mask descriptions, with each consisting of values for the mask-image, mask-clip, mask-composite, mask-mode, mask-origin, mask-position, mask-repeat, and mask-size properties
Default: none
Not inherited
Applies to: graphics and container elements; (in CSS3) CSS layout boxes
Defined in: SVG 1, CSS Masking Level 1

mask-clip #

Defines the masking region for CSS image masks; has no effect when the mask is a <mask> element. See CSS Masking Level 1 for details.

mask-composite #

Defines how multiple mask layers should be combined to create the final mask for this element.

Allowed values: a comma-separated list of the keywords add, subtract, intersect, and exclude
Default: add
Not inherited
Applies to: graphics and container elements; CSS layout boxes
Defined in: CSS Masking Level 1

mask-image #

Defines the images or SVG masks to use as mask layers for this element. See CSS Masking Level 1 for details.

mask-mode #

Determines how the pixels in each mask layer should be converted into a single-channel masking value.

Allowed values: a comma-separated list of the keywords luminance, alpha, and match-source
Default: match-source
Not inherited
Applies to: graphics and container elements; CSS layout boxes
Defined in: CSS Masking Level 1

mask-origin #

Defines the reference box for positioning and scaling CSS image masks; has no effect when the mask is a <mask> element. See CSS Masking Level 1 for details.

mask-position #

Defines the base position (relative to the mask-origin reference box) for CSS image masks; has no effect when the mask is a <mask> element. See CSS Masking Level 1 for details.

mask-repeat #

Defines whether CSS image masks should be tiled; has no effect when the mask is a <mask> element. See CSS Masking Level 1 for details.

mask-size #

Defines the size of CSS image masks; has no effect when the mask is a <mask> element. See CSS Masking Level 1 for details.

mask-type #

Sets the default mask mode for this mask.

Allowed values: either luminance or alpha
Default: luminance
Not inherited
Applies to: <mask> elements
Defined in: CSS Masking Level 1

opacity #

Sets the maximum opacity value for this element, to be applied by multiplying the alpha channel of every pixel by the specified value.

Allowed values: a number in the range 0.0–1.0; CSS Color Level 4 allows percentages (but no browser support yet)
Default: 1
Not inherited
Applies to: graphics and container elements
Defined in: SVG 1, CSS Color Level 3, CSS Color Level 4

overflow #

Defines whether the graphics for this element should be clipped to its rectangular layout region.

Visible overflow on <pattern> is undefined and unsupported in most browsers.

SVG 2 recommends that, if scrolling is not possible on a given element, auto should be treated equal to visible, but scroll should be treated equal to hidden. However, browsers are currently inconsistent about auto.

Allowed values: one of visible, hidden, auto, or scroll
Default: visible (this is the initial value), but set to hidden in the browser default styles for all SVG elements that it applies to
Not inherited
Applies to: coordinate-system elements
Defined in: CSS 2, SVG 1, SVG 2

pointer-events #

Defines which regions of this element should trigger mouse/touch events, cursor changes, and :hover effects, and whether sensitivity should be affected by the visibility state.

Allowed values: one of visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, or none (see “Getting the Point(er) Across” in Chapter 18 for what they mean)
Default: visiblePainted
Applies to: graphics elements and text elements, although some values only apply to shape elements (as described in the book)
Defined in: SVG 1

r #

Sets the radius for SVG circles.

The attribute only maps to the style property on <circle>. Browser support for the style property is limited.

Allowed values: a non-negative length with units, percentage (proportional to the coordinate system diagonal, as defined in the Units guide), or number (of SVG user units)
Default: auto
Not inherited
Applies to: <circle>
Defined in: SVG 2

rx #

Sets the horizontal radius for SVG ellipses and rectangles (where it defines the corner-rounding radius).

The attribute only maps to the style property on the SVG elements that the property applies to. Browser support for the style property is limited.

Allowed values:
1. auto, which means match ry if it is defined, or 0 otherwise
2. a non-negative length with units, percentage (of the coordinate system width), or number (of SVG user units)
Default: auto
Not inherited
Applies to: <rect>, <ellipse>
Defined in: SVG 2

ry #

Sets the vertical radius for SVG ellipses and rectangles (where it defines the corner-rounding radius).

The attribute only maps to the style property on the SVG elements that the property applies to. Browser support for the style property is limited.

Allowed values:
1. auto, which means match rx if it is defined, or 0 otherwise
2. a non-negative length with units, percentage (of the coordinate system height), or number (of SVG user units)
Default: auto
Not inherited
Applies to: <rect>, <ellipse>
Defined in: SVG 2

shape-rendering #

Hints to the browser how it should adjust shape outlines to fit the physical pixels of a low-resolution display.

Allowed values: one of auto, optimizeSpeed, crispEdges (which turns off anti-aliasing, causing pixels on the edge of a shape to either be fully colored or not at all), or geometricPrecision (which specifically requests anti-aliasing, although for most browsers it is the same as auto)
Default: auto
Applies to: shape elements
Defined in: SVG 1

stop-color #

Defines the color of the gradient at this stop point.

Allowed values: any CSS color (although semi-transparent colors are not supported consistently)
Default: black
Not inherited
Applies to: <stop> elements
Defined in: SVG 1

stop-opacity #

Defines the opacity of the gradient at this stop point; if the stop-color is semi-transparent, the transparency effect should be multiplied.

Allowed values: a number in the range 0.0–1.0; SVG 2 allows percentages (but no browser support yet)
Default: 1
Not inherited
Applies to: <stop> elements
Defined in: SVG 1

stroke #

Defines the content to be painted in the stroke region around the edge of the shape, line, or letters. See Chapter 13 for important warnings about using paint servers for strokes.

Allowed values:
1. none to indicate that the area should not be painted.
2. any recognized CSS color value (including CSS3 colors in browsers that support them).
3. a url() reference to a valid paint server element (pattern or gradient), with an optional fallback color, separated by whitespace, like url(ref) fallback.
4. (deprecated and never well supported) an icc-color() function which defines a color relative to a pre-defined color profile.
Default: none
Applies to: shape elements, text elements
Defined in: SVG 1

stroke-dasharray #

Describes the pattern of dash length and gaps used to generate the stroke region.

Allowed values:
1. none
2. a list of non-negative lengths with units, percentages (proportional to the coordinate system diagonal, as defined in the Units guide), or numbers (of SVG user units), separated by whitespace and/or commas (although commas are likely to be deprecated in the CSS Fill and Stroke Module)
Default: none
Applies to: shape elements, text elements
Defined in: SVG 1

stroke-dashoffset #

Sets the position within the stroke-dasharray pattern at which to position the starting point of the path.

Allowed values: a non-negative length with units, percentage (proportional to the coordinate system diagonal, as defined in the Units guide), or number (of SVG user units)
Default: 0
Applies to: shape elements, text elements
Defined in: SVG 1

stroke-linecap #

Describes the added stroke-region shape that extends from every open-ended path segment and every stroke dash.

Allowed values: one of butt (no extra cap shape), round (semi-circular caps), or square (square caps, extending half the stroke width beyond the official end of the path or dash)
Default: butt
Applies to: shape elements, text elements
Defined in: SVG 1

stroke-linejoin #

Describes the shape used to fill in the outside corners of stroke regions.

Allowed values: one of miter (extend the strokes until they meet in a point), round (connect with an arc), or bevel (connect the strokes with a single straight line); SVG 2 adds arc and miter-clip (though no browser support yet)
Default: miter
Applies to: shape elements, text elements
Defined in: SVG 1

stroke-miterlimit #

Limits how far mitered line-join corners can extend beyond the official dimensions of the shape, as a multiple of the stroke-width.

Allowed values: a number greater than or equal to 1
Default: 4
Applies to: shape elements, text elements
Defined in: SVG 1

stroke-opacity #

Sets the maximum opacity for the color or paint effect used in the stroke region; the alpha value of every pixel in the stroke paint will be multiplied by the specified value.

Allowed values: a number in the range 0.0–1.0; SVG 2 allows percentages (but no browser support yet)
Default: 1
Applies to: shape elements, text elements
Defined in: SVG 1

stroke-width #

Sets the width of the stroke region, perpendicular to the edge of the shape and centered over it.

Allowed values: a non-negative length with units, percentage (proportional to the coordinate system diagonal, as defined in the Units guide), or number (of SVG user units)
Default: 1px
Applies to: shape elements, text elements
Defined in: SVG 1

text-anchor #

Defines how each chunk of continuous text in the inline flow direction (horizontal or vertical) should be aligned relative to the anchor point in that axis (x or y).

Allowed values: start, middle, or end
Default: start
Applies to: text elements
Defined in: SVG 1

text-decoration #

Sets the type of emphasis line, if any, that should be added along the length of the span of text.

Allowed values:
1. none
2. one or more of the keywords underline, overline, or line-through
3. (new in CSS3) a combination of the values for the (new) longhand properties text-decoration-position, text-decoration-style, and text-decoration-color; there are also new text-decoration-fill and text-decoration-stroke properties for SVG; none of the longhands have presentation attributes
Default: none
Not inherited
Applies to: text elements
Defined in: CSS 2, CSS Text Decoration Level 3

text-orientation#

How characters should be oriented in vertical text; replaces glyph-orientation-vertical. No presentation attribute.

Allowed values: one of mixed, upright, sideways-right, sideways-left, sideways, or use-glyph-orientation
Default: mixed
Applies to: text elements
Defined in: CSS Writing Modes Level 3

text-rendering #

Hints to the browser how it should optimize text shaping adjustments.

Supported in some browsers as a way to control ligature and kerning use, even in non-SVG text; the font-variant-ligatures and font-kerning properties are now the standard way to do this.

Allowed values: one of
1. auto,
2. optimizeSpeed (which often turns off ligatures and kerning),
3. optimizeLegibility (which may turn on optional ligatures), or
4. geometricPrecision (which should turn off any resolution-based adjustments to glyph shapes, so that text scales exactly like an SVG shape)
Default: auto
Applies to: text elements
Defined in: SVG 1

transform #

Applies a series of alterations to the coordinate system before calculating the size, shape, and position of the current element (or its descendents).

The syntax for the transform style property is different from the transform attribute. Browser support for the style property on SVG elements is still limited; consider using the attribute instead.

Allowed values: A list of transformation functions, with units for all parameters, as described in the Transform Functions guide, or none.
Default: none
Applies to: graphics elements and container elements (but not to <tspan>, <textPath>, or <a> within text); should also apply to gradients and patterns, but support is limited
Defined in: CSS Transforms Level 1

transform-box #

The reference rectangle to use for calculating the origin and any percentage lengths within transformations. No presentation attribute. Browser support is still limited.

Allowed values: view-box, fill-box, or border-box (which has same effect as fill-box for SVG elements without CSS layout boxes)
Default: view-box
Applies to: the same elements as transform
Defined in: CSS Transforms Level 1

transform-origin #

The coordinate system origin used for calculating transformations; should be calculated relative to the transform-box reference box. No presentation attribute. Browser support for SVG elements is still limited.

Allowed values: Up to three values, for the x, y, and z position:
1. left, center, right, or a percentage or length, for the x position (defaults to 50%, aka center)
2. top, center, bottom, or a percentage or length, for the y position (defaults to 50%, aka center)
3. A length, for the z origin (defaults to 0px)
Default: 50% 50% (this is the initial value), but set to 0 0 for SVG elements without CSS layout boxes in the browser default styles
Applies to: the same elements as transform
Defined in: CSS Transforms Level 1

transition and its shorthands #

See “CSS Transitions” in Chapter 19, or consult the CSS Transitions spec.

unicode-bidi #

Determines whether the browser should apply the Unicode bidirectional algorithm to re-arrange the character content to suit the layout direction.

Allowed values:
1. normal, embed, or bidi-override
2. (new in CSS3) isolate, isolate-override and plaintext
Default: normal
Applies to: text elements
Defined in: CSS 2, CSS Writing Modes Level 3

visibility #

Indicates whether graphics for this element should be painted to the screen. Does not affect layout. May affect pointer-events. For SVG, does not effect container elements except by inheriting to their children.

Allowed values: either visible or hidden; collapse is also valid and is treated like hidden in SVG.
Default: visible
Applies to: graphics elements, text elements
Defined in: CSS 2

width #

Sets the width of the layout rectangle of certain elements within an SVG layout context.

The attribute only maps to the style property on the SVG elements that the property applies to. Browser support for the applying the style property to SVG layout is limited.

Allowed values:
1. auto, which has a different meaning depending on the element (see the relevant element reference for the default behavior)
2. a non-negative length with units, or a percentage (of the coordinate system width)
3. (for presentation attributes only) a non-negative number of SVG user units
Default: auto
Not inherited
Applies to: <rect>, <svg>, <image>, <foreignObject>, <symbol>, <use>; HTML media elements embedded in an SVG layout context (which follow HTML rules for presentation attributes); CSS layout boxes
Defined in: CSS 2, SVG 2

word-spacing #

Determines whether and how much extra space should be added to whitespace characters that serve as word breaks in the text.

Allowed values:
1. normal
2. a length, with units or (for presentation attributes only) as a number of SVG user units
3. (new in CSS3) a percentage, which increases spacing relative to the normal spacing for that whitespace character
Default: normal
Applies to: text elements
Defined in: CSS 2, SVG 1, CSS Text Level 3

writing-mode #

Defines the layout orientation for text.

The SVG 1 values are deprecated and should only be used as fallbacks for CSS3 values.

Allowed values:
1. for horizontal text, with lines stacked top-to-bottom: in SVG 1, lr, lr-tb, rl, rl-tb; in CSS3, horizontal-tb
2. for vertical text, with lines stacked right-to-left: in SVG 1, tb or tb-rl; in CSS3, vertical-rl
3. for vertical text, with lines stacked left-to-right: in CSS3, vertical-lr
Default: in SVG 1, lr-tb; in CSS3 horizontal-tb
Applies to: text elements
Defined in: SVG 1, CSS Writing Modes Level 3

x #

Sets the horizontal reference coordinate (minimum coordinate, or top-left point) for the layout rectangle of certain elements within an SVG layout context.

The attribute only maps to the style property on the SVG elements that the property applies to. Browser support for the style property is limited.

Allowed values: a length with units, percentage (of the coordinate system width), or number (of SVG user units)
Default: 0
Not inherited
Applies to: <rect>, <svg>, <image>, <foreignObject>, <symbol>, <use>; HTML media elements embedded in an SVG layout context (which don’t have presentation attributes)
Defined in: SVG 2

y #

Sets the vertical reference coordinate (minimum coordinate, or top-left point) for the layout rectangle of certain elements within an SVG layout context.

The attribute only maps to the style property on the SVG elements that the property applies to. Browser support for the style property is limited.

Allowed values: a length with units, percentage (of the coordinate system height), or number (of SVG user units)
Default: 0
Not inherited
Applies to: <rect>, <svg>, <image>, <foreignObject>, <symbol>, <use>; HTML media elements embedded in an SVG layout context (which don’t have presentation attributes)
Defined in: SVG 2