background size on a svg-CodePudding

today wanted to set the size of a background on a svg using the background-size property, but it didn't worked because the background wasn't an image, but it was a normal color (#ecf2f8)

here is what i want to do:

here is what i did:

here is my code:

#svg-social {
      position: absolute;
      right: 50px;
      bottom: 45px;
      background-color: #ecf2f8;
      border-radius: 100px;
    }

<p id="main-text">
      Ever been in a room and felt like something was missing?<br> Perhaps 
      it felt slightly bare and uninviting. I’ve got some<br> simple tips 
      to help you make any room feel complete.</p>
      <div id="author">
        <img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
        <h5 id="name">Michelle Appleton</h5>
        <p id="date">28 Jun 2020</p>
      </div>
    
      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">
    
    
        <path fill="#6E8098"
          d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
      </svg>
      
      <div id="socials">
        <div id="triangle"></div>
      </div>
    </div>

Have a nice day!

CodePudding user response：

Try using padding to increase the size of the background around your element:

#svg-social {
  position: absolute;
  right: 50px;
  bottom: 45px;
  background-color: #ecf2f8;
  border-radius: 100px;
  padding: 10px;
}

The px value you pick depends on what you want, just play around with different values and see if it gets your desired output.

Example code snippet with padding in CSS:

#svg-social {
  position: absolute;
  right: 50px;
  bottom: 45px;
  background-color: #ecf2f8;
  border-radius: 100px;
  padding: 10px;
}

<html>
<head>
<title>while</title>
 </head>

<body>

<p id="main-text">
  Ever been in a room and felt like something was missing?<br> Perhaps 
  it felt slightly bare and uninviting. I’ve got some<br> simple tips 
  to help you make any room feel complete.</p>
  <div id="author">
    <img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
    <h5 id="name">Michelle Appleton</h5>
    <p id="date">28 Jun 2020</p>
  </div>

  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">


    <path fill="#6E8098"
      d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
  </svg>
  
  <div id="socials">
    <div id="triangle"></div>
  </div>
</div>
</body>
</html>

Html-css-js snippet of code: Ever been in a room and felt like something was missing?
Perhaps it felt slightly bare and uninviting. I’ve got some
simple tips to help you make any room feel complete.

Michelle Appleton

28 Jun 2020

CodePudding user response：

You could use padding to resize the background of your icon. You can also resize the SVG icon by using transform: scale(1);

I added padding and transform:scale() in the CSS, please do check the snippet if it is your desired output

CodePudding user response：

You need to create a div and add the background to the div, because i don't know why, with the padding property the svg disappears, here is the code: