SVG’s Styling Properties

SVG uses styling properties to describe many of its document parameters. Styling properties define how the graphics elements in the SVG content are to be rendered.

SVG uses styling properties for the following:

  • Parameters which are clearly visual in nature and thus lend themselves to styling. Examples include all attributes that define how an object is “painted,” such as fill and stroke colors, linewidths and dash styles.
  • Parameters having to do with text styling such as font family and size.
  • Parameters which impact the way that graphical elements are rendered, such as specifying clipping paths, masks, arrowheads, markers and filter effects.

SVG shares many of its styling properties with CSS [CSS2] and XSL [XSL]. Except for any additional SVG-specific rules explicitly mentioned in this specification, the normative definition of properties that are shared with CSS and XSL is the definition of the property from the CSS2 specification [CSS2].

The following properties are shared between CSS2 and SVG. Most of these properties are also defined in XSL:

  • Font properties:

◦ ‘font’

◦ ‘font-family’

◦ ‘font-size’

◦ ‘font-size-adjust’

◦ ‘font-stretch’

◦ ‘font-style’

◦ ‘font-variant’

◦ ‘font-weight’

  • Text properties:

◦ ‘direction’

◦ ‘letter-spacing’

◦ ‘text-decoration’

◦ ‘unicode-bidi’

◦ ‘word-spacing’

  • Other properties for visual media:

◦ ‘clip’, only applicable to outermost svg element.

◦ ‘color’, used to provide a potential indirect value (currentColor) for the ‘fill’, ‘stroke’, ‘stop-color’, ‘floodcolor’

and ‘lighting-color’ properties. (The SVG properties which support color allow a color specification

which is extended from CSS2 to accommodate color definitions in arbitrary color spaces. See Color profile

descriptions.)

◦ ‘cursor’

◦ ‘display’

◦ ‘overflow’, only applicable to elements which establish a new viewport.

◦ ‘visibility’

The following SVG properties are not defined in CSS2. The complete normative definitions for these properties are found in this specification:

  • Clipping, Masking and Compositing properties:

◦ ‘clip-path’

◦ ‘clip-rule’

◦ ‘mask’

◦ ‘opacity’

  • Filter Effects properties:

◦ ‘enable-background’

◦ ‘filter’

◦ ‘flood-color’

◦ ‘flood-opacity’

◦ ‘lighting-color’

  • Gradient properties:

◦ ‘stop-color’

◦ ‘stop-opacity’

  • Interactivity properties:

◦ ‘pointer-events’

  • Color and Painting properties:

◦ ‘color-interpolation’

◦ ‘color-interpolation-filters’

◦ ‘color-profile’

◦ ‘color-rendering’

◦ ‘fill’

◦ ‘fill-opacity’

◦ ‘fill-rule’

◦ ‘image-rendering’

◦ ‘marker’

◦ ‘marker-end’

◦ ‘marker-mid’

◦ ‘marker-start’

◦ ‘shape-rendering’

◦ ‘stroke’

◦ ‘stroke-dasharray’

◦ ‘stroke-dashoffset’

◦ ‘stroke-linecap’

◦ ‘stroke-linejoin’

◦ ‘stroke-miterlimit’

◦ ‘stroke-opacity’

◦ ‘stroke-width’

◦ ‘text-rendering’

  • Text properties:

◦ ‘alignment-baseline’

◦ ‘baseline-shift’

◦ ‘dominant-baseline’

◦ ‘glyph-orientation-horizontal’

◦ ‘glyph-orientation-vertical’

◦ ‘kerning’

◦ ‘text-anchor’

◦ ‘writing-mode’

A table that lists and summarizes the styling properties can be found in the Property Index.

Leave a Reply

Your email address will not be published. Required fields are marked *