SVG <style> Element
Last Updated :
16 Jun, 2022
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"
<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"
<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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...