Search code examples
htmlcsssvggraphicstransparency

How to make background of SVG image opaque

I'm trying to make the entire SVG image background opaque.

All I could find on my search was how to make specific elements inside the image opaque, but I couldn't find anything regarding the background.

I know how to make the circle itself opaque/transparent, but not the background.

What do I need to add to make everything behind the circle opaque?

This is how the picture looks, note the white/grey squares indicating transparency

enter image description here

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100">
  <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

Solution

  • Try this out You can also refer this link for the same: https://www.geeksforgeeks.org/how-to-set-the-svg-background-color/

    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100">
  <rect width="100%" height="100%" fill="green" />
  <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>