SVG <style> Element

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The SVG <style> element allows style sheets to be embedded directly within the SVG content.

Syntax:

<style>
    Styling Content
</style>

Attribute:

type: Type of stylesheet to be used.
media: This attribute defines which media the style applies.
title: This attribute the title of the style sheet which can be used to switch between alternate style sheets.
Global Attributes: Some global attributes used like core attributes and styling attributes, etc.

Example 1:

html

<!DOCTYPE html>
<html>
<body>
    <svg viewBox="0 0 20 20" 
         xmlns="http://www.w3.org/2000/svg">
        <style>
            circle {
              fill: green;
            }
        </style>
        <circle cx="5" cy="5" r="4" />
    </svg>
</body>

</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>

<body>
    <svg viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg">
        <style>
            rect {
              fill: green;
              stroke: black;
              stroke-width: .1px;
            }
        </style>
        <rect height="5" width='5'/>
    </svg>
</body>

</html>

Output:

Browsers Supported: The following browsers are supported by this SVG element:

Chrome 1 and above
Edge 12 and above
Firefox 1.5 and above
Safari 3.1 and above
Internet Explorer 9 and above
Opera 9 and above

Explore