Updated June 9, 2023
Introduction to SVG in CSS
The following article provides an outline for SVG in CSS. SVG is abbreviated as Scalable Vector Graphics. This SVG is generally used for defining graphics for the web.
Real-Time Example: This concept will suit us perfectly when designing animated graphics for any website. Let’s suppose in our EDUCBA website; that the SVG concept is helpful if we wish to put circles, rectangles, polygons, eclipse, etc.
What is SVG in CSS?
- As we saw, SVG is nothing but Scalable Vector Graphics.
- SVG can make the graphics by using XML format.
- This SVG is a unique way of writing vector-based graphics using XML (Extensible Markup Language).
- Every element and attribute in SVG files are animated. This SVG is World Wide Web Consortium(W3C) recommendation.
How to Use SVG in CSS?
- The <svg> element is used to design SVG graphics in CSS.
- SVG has different approaches for designing circles, paths, boxes, texts, etc.
- It needs some browser compatibility support for working SVG features.
Below are the different browser compatibilities for SVG support:
Syntax:
<!DOCTYPE html>
<html>
<head>
<style>
/*CSS logic */
</style>
</head>
<body>
<svg>
<!- Graphic shapes logic ->
</svg>
.
.
.
</body>
</html>Examples of SVG in CSS
Different examples are mentioned below:
Example #1
SVG example with Rectangle: SVGRectangle.html.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.rectangle
{
fill:rgb(168, 109, 50); /*This will fill the inside rectangle color as brown*/
stroke-width:5;/*This will gives the rectangle border with 5px*/
stroke:rgb(50, 168, 123);/*This will gives the border color with green*/
}
h3
{
text-align: center; /*It will align the header text center*/
}
.mainBody
{
border-style: solid; /*division border as solid*/
}
</style>
</head>
<body>
<div class="mainBody">
<h3>SVG Example with Rectangle</h3>
<!- This will create the svg graphic function with 600px width and 150px height->
<svg width="600" height="150">
<!- This will create the rectangle inside the svg graphic function with 400px width and 130px height->
<rect width="400" height="130" class="rectangle" />
If you can't see the rectangle shape, it means your browser does not support for SVG feature. So please check the browser compatibility
</svg>
</div>
</body>
</html>Output:
Explanation:
- <svg> tag tells the browser that logic will create SVG graphics.
- For example, <rect> will create a rectangle shape.
- The <style> attribute makes the CSS style for our created rectangle.
- Each attribute usage I have added beside each line. Please follow those comments for a better understanding.
Example #2
SVG example with a circle: SVGCircle.html.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.cirlce
{
stroke: brown;/*This will fill the border circle color as brown*/
stroke-width :5;/*This will gives the circle border with 5px*/
fill :grey; /*This will fill the circle color as grey*/
cx:200;/*This will creates cirlce x axis with 200px*/
cy:200;/*This will creates cirlce y axis with 200px*/
r:100;/*This will creates cirlce radius with 100px*/
}
h3
{
text-align: center;/*It will align the header text center*/
color: green;/*It will gives the text color as green*/
}
.mainBody
{
border-style: solid;/*division border as solid*/
}
</style>
</head>
<body>
<div class="mainBody">
<h3>SVG Example with Circle</h3>
<!- This will create the svg graphic function with 600px width and 400px height->
<svg width="600" height="400">
<!- This will create the cirlce inside the svg graphic function->
<circle class="cirlce" />
If you can't see the cirlce shape, it means your browser does not support for SVG feature. So please check the browser compatibility
</svg>
</div>
</body>
</html>Output:
Explanation:
- <svg> tag tells the browser that logic will create SVG graphics.
- For example, <circle> will create a circle shape.
- The <style> attribute creates the CSS style for our created circle.
- Each attribute usage I have added beside each line. Please follow those comments for a better understanding.
Example #3
SVG example with eclipse: SVGEclipse.html.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.ellipse
{
stroke: green;/*This will fill the border ellipse color as green*/
stroke-width :4;/*This will gives the ellipse border with 4px*/
fill :orange; /*This will fill the ellipse color as orange*/
cx:300;/*This will creates ellipse x axis with 300px*/
cy:150;/*This will creates ellipse y axis with 150px*/
rx:150;/*This will creates ellipse x axis radius with 150px*/
ry:80;/*This will creates ellipse y axis radius with 80px*/
}
h3
{
text-align: center;/*It will align the header text center*/
color: red;/*It will gives the text color as green*/
}
.mainBody
{
border-style: solid;/*division border as solid*/
}
</style>
</head>
<body>
<div class="mainBody">
<h3>SVG Example with Eclipse</h3>
<!- This will create the svg graphic function with 600px width and 400px height->
<svg width="600" height="400">
<!- This will create the ellipse inside the svg graphic function->
<ellipse class="ellipse" />
If you can't see the eclipse shape, it means your browser does not support for SVG feature. So please check the browser compatibility
</svg>
</div>
</body>
</html>Output:
Explanation:
- <svg> tag tells the browser that logic will create SVG graphics.
- <eclipse> will create an eclipse shape.
- Inside, the <style> attribute creates the CSS style for the eclipse we created.
- Each attribute usage I have added beside each line. Please follow those comments for a better understanding.
How to Use SVG in CSS Images?
Given below shows how to use SVG in CSS Images:
1. We can use it by using the <img> tag.
Syntax:
<!DOCTYPE html>
<html>
<head>
<style>
/*CSS logic */
</style>
</head>
<body>
<img src="imageName.svg" alt="The Name you want see when you hover on the image">/*This will add the image to the web page*/
.
.
.
</body>
</html>2. We can use it by using the background-image attribute.
Syntax:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url(imageName.svg);/*Will set the image as the background for the page*/
}
</style>
</head>
<body>
<!-HTML Logic->
.
.
.
</body>
</html>3. We can use it by using the <object> tag.
Syntax:
<!DOCTYPE html>
<html>
<head>
<style>
/*CSS logic */
</style>
</head>
<body>
<object data="imageName.svg" width="100px" height="100px">/*This will add the image to the web page with certain height and width. We can put width and height as per requirement*/
</object>
.
.
.
</body>
</html>Conclusion
It adds graphics to the web page as per our requirements. This tutorial uses an SVG tag to create rectangle, circle, and ellipse shapes.
Recommended Articles
We hope that this EDUCBA information on “SVG in CSS” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
