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.
<!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>
|
Output:
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.html
<!DOCTYPE html><html><head><title>SVG set Background Color</title></head><body><center><h1style="color:green;">GeeksforGeeks</h1><h4>SVG set Background Color</h4><svgheight="100"width="100"style="background-color:green"><circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="red"/></svg></center></body></html>
Output: -
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.
html
<!DOCTYPE html><html><head><title>SVG set Background Color</title></head><body><center><h1style="color:green;">GeeksforGeeks</h1><h4>SVG set Background Color</h4><svgheight="100"width="100"><rectwidth="100%"height="100%"fill="green"/><circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="red"/></svg></center></body></html>
Output:
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.