<style>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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).

Example

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

html

<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>

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

Usage context

Categories	None
Permitted content	Any elements or character data

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # StyleElement