Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

SVG <style> Element

  • Last Updated : 27 Oct, 2020

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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:




<!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:




<!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
  • Edge
  • Firefox
  • Safari
  • Internet Explorer
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :