Firefox Tomorrow

svg element

<style>

View on MDN ↗

The <style> SVG element allows style sheets to be embedded directly within SVG content.

[!NOTE] SVG’s style element has the same attributes as the corresponding element in HTML (see HTML’s <style> element).

Usage context

Attributes

  • type
    • : This attribute defines type of the style sheet language to use as a media type string. Value type: <media-type>; Default value: text/css; Animatable: no
  • media
    • : This attribute defines to which media the style applies. Value type: <media-query-list>; Default value: all; Animatable: no
  • title
    • : This attribute is the title of the style sheet which can be used to switch between alternate style sheets. Value type: <string>; Default value: none; Animatable: no

DOM Interface

This element implements the SVGStyleElement interface.

Example

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: gold;
      stroke: maroon;
      stroke-width: 2px;
    }
  </style>

  <circle cx="5" cy="5" r="4" />
</svg>
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also