The media
attribute specifies a media query that must be matched for a style sheet to apply.
Only one element is using this attribute: <style>
html, body, svg { height: 100%; }
<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width: 600px)"> rect { fill: seagreen; } </style> <text y="15">Resize the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg>
Usage notes
Value | <media-query-list> |
---|---|
Default value | all |
Animatable | Yes |
<media-query-list>
-
This value holds a media query that needs to match in order for the style sheet to be applied.
If not specified, the style sheet is applied unconditionally.
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'media' in that specification. |
Candidate Recommendation | Changed the value definition from different media types as defined in CSS 2 to <media-query-list> . |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'media' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
media | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Compatibility unknown
- Compatibility unknown