<style>

The <style> SVG element allows style sheets to be embedded directly within SVG content. SVG's style element has the same attributes as the corresponding element in HTML (see HTML's <style> element).

Usage context

Categories	None
Permitted content	Any elements or character data

Attributes

Global attributes

• Core attributes

Specific attributes

• type
• media
• title

DOM Interface

This element implements the SVGStyleElement interface.

Example

SVG

<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
  <style>
    /* <![CDATA[ */
    circle {
      fill: orange;
      stroke: black;
      stroke-width: 10px; /* Note: The value of a pixel depends
                             on the view box */
    }
    /* ]]> */
  </style>

  <circle cx="50" cy="50" r="40" />
</svg>

Result

Specifications

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2 The definition of '<style>' in that specification.	Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<style>' in that specification.	Recommendation	Initial definition

Browser compatibility

The chart is based on these sources.

See also

• <style> element in HTML