W3cubDocs

/SVG

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 attribute allows to style an element using CSS declarations. It functions identically to the style attribute in HTML.

You can use this attribute with any SVG element.

Example

<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
  <rect
    width="80"
    height="40"
    x="10"
    y="10"
    style="fill: skyblue; stroke: cadetblue; stroke-width: 2;" />
</svg>

Usage notes

Value <style>
Default value None
Animatable No
<style>

The syntax of style data depends on the style sheet language. By default, the style sheet language is CSS.

Specifications

Specification
Scalable Vector Graphics (SVG) 2>
# ElementSpecificStyling>

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS
style 1 12 1 15 1 18 4 14 1 1.0 4.4 1

See also

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/style