How to set the SVG background color ? - GeeksforGeeks

07 Dec, 2021
There are two types of images that can be used in the background and in both cases you can change the background color of the image.
Raster: The images where each pixels represents the individual color within the image. So when we zoom in, the pixels start enlarging and hence after a certain point, the image starts getting blur.
Vector: These are the images where the information about drawing has been stored. So when they are zoomed, the image is redrawn according to the size of that page. Hence they do not pixelate and we get crisp and sharp images. Since these images are scalable they are known as SVGs (Scalable Vector Graphics).
The SVG stands for Scalable Vector Graphics. The SVG background is used to draw any kind of shape, set any color you want by the set property. The below examples illustrates the concept of SVG set background-color more specifically. The SVG allowed the CSS background sizing, position, and much more complex property.
Example: The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, then it sets the center of the circle to (0, 0). The r attribute defines the radius of the circle. To set the background color to this SVG, there are two ways.
html
<!DOCTYPE html><html>  <head>    <title>        SVG set Background Color    </title></head>  <body>    <center>        <h1 style="color:green;">GeeksforGeeks</h1>        <h4>SVG set Background Color</h4>          <svg height="100" width="100">            <circle cx="50" cy="50" r="40" stroke="black"                     stroke-width="3" fill="red" />        </svg>    </center></body>  </html>
To set the background color of the SVG body, background can be done in two ways:
Method 1: You can add the background color to the SVG body itself.htmlhtml<!DOCTYPE html><html>  <head>    <title>        SVG set Background Color    </title></head>  <body>    <center>        <h1 style="color:green;">GeeksforGeeks</h1>        <h4>SVG set Background Color</h4>          <svg height="100" width="100" style="background-color:green">            <circle cx="50" cy="50" r="40" stroke="black"                     stroke-width="3" fill="red" />        </svg>    </center></body>  </html>Output:
html
<!DOCTYPE html><html>  <head>    <title>        SVG set Background Color    </title></head>  <body>    <center>        <h1 style="color:green;">GeeksforGeeks</h1>        <h4>SVG set Background Color</h4>          <svg height="100" width="100" style="background-color:green">            <circle cx="50" cy="50" r="40" stroke="black"                     stroke-width="3" fill="red" />        </svg>    </center></body>  </html>
Method 2: You can add a rectangle as the first or lowermost layer with 100% width and 100% height and set the color of your desired background color and then we can start drawing the shape.htmlhtml<!DOCTYPE html><html>  <head>    <title>        SVG set Background Color    </title></head>  <body>    <center>        <h1 style="color:green;">GeeksforGeeks</h1>        <h4>SVG set Background Color</h4>          <svg height="100" width="100">            <rect width="100%" height="100%" fill="green" />            <circle cx="50" cy="50" r="40" stroke="black"                    stroke-width="3" fill="red" />        </svg>    </center></body>  </html>Output:
html
<!DOCTYPE html><html>  <head>    <title>        SVG set Background Color    </title></head>  <body>    <center>        <h1 style="color:green;">GeeksforGeeks</h1>        <h4>SVG set Background Color</h4>          <svg height="100" width="100">            <rect width="100%" height="100%" fill="green" />            <circle cx="50" cy="50" r="40" stroke="black"                    stroke-width="3" fill="red" />        </svg>    </center></body>  </html>
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
surinderdawra388
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
How to Insert Form Data into Database using PHP ?
CSS to put icon inside an input element in a form
REST API (Introduction)
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript