<style>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
| Categories | None |
|---|---|
| Permitted content | Any elements or character data |
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
mediathe 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
<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>
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # StyleElement |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
style
|
|
|
|
|
|
|
|
|
|
|
|
|
media
|
|
|
|
|
|
|
|
|
|
|
|
|
title
|
|
|
|
|
|
|
|
|
|
|
|
|
type
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support