We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

CategoriesNone
Permitted contentAny elements or character data

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGStyleElement interface.

Example

SVG

<svg width="150" height="150" 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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1.5993.1
type ? ? ? ? ? ?
media ? ? ? ? ? ?
title ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support31 Yes4 Yes3.1 ?
type ? ? ? ? ? ? ?
media ? ? ? ? ? ? ?
title ? ? ? ? ? ? ?

See also

Document Tags and Contributors

Contributors to this page: Jeremie, Sebastianz, mattwojo, kscarfone, Manuel_Strehl
Last updated by: Jeremie,