How to set the SVG background color ?

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

To set the background color of the SVG body, backgrounnd can be done in two ways:

  • Method 1: You can add the background color to the SVG body itself.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.