Skip to content
Related Articles

Related Articles

Improve 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.

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

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :