What Are SVG Presentation Attributes

SVG elements can be styled using Presentation Attributes. Presentation Attributes are a shorthand for setting a CSS property on an element.

In SVG, a subset of all CSS properties may be set by SVG attributes, and vice versa. The SVG specification lists the SVG attributes that may be set as CSS properties.

Of the following, only the fill attribute is a Presentation Attribute.

<text fill="white" x="50" y="-6" transform="rotate(90)" text-anchor="middle">100 px</text>

Precedence of CSS and Presentation Attributes

Styles later in the list override those before them:

  1. User Agent Styles
  2. SVG Presentation Attributes
  3. Internal Style Sheet (in a <style type="text/css">...</style> element inside the svg element)
  4. External Style Sheet (in a <link> element)
  5. Document Style
    1. Sheet (in a <style> element in the <head> tag)
    2. Import (@IMPORT URL in a <style> element in the <head> tag
  6. Inline Class Attribute (in a class= attribute)
  7. Inline Style Attribute (in a style= attribute)

Example for an SVG Internal Style Sheet

In CSS a > for a child selector is allowed. Therefore the child definitions should be wrapped in a <![CDATA[ ... ]]> section.

<svg>
   <style>
    <![CDATA[
    circle {
      fill: orange;
      stroke: black;
      stroke-width: 10px; /* Note: The value of a pixel depends
                             on the view box */
    }
    ]]>
  </style>
  ...

Appliance

TODO

results matching ""

    No results matching ""