How can I scale an SVG to fit the parent div container?-CodePudding

I have multiple SVGs coming from different sources, so their height, width and viewbox aren't the same. I want to render them in the same div which has fixed height and width, and I want my SVGs to fill up that div. How can I scale the SVGs to fit the div container?

For e.g., in the below code I want both the SVGs to fill up to 'parent' div which is 100*100px. Here's the fiddle link for the same.

   <!DOCTYPE html>
    <html>
    <head>
      <meta name="description" content="ES6 in Action: New String Methods [3]">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
    </head>
    <body>
      
      <div class='parent'>
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="50" width="50" x="0px" y="0px" viewBox="0 0 386.972 386.972" style="enable-background:new 0 0 386.972 386.972;" xml:space="preserve">
        <path d="M25.99,0v386.972l334.991-193.486L25.99,0z M55.99,51.972l245.009,141.514L55.99,335V51.972z" />
    </svg>
      </div>
      
      <div class='parent'><svg viewBox="0 0 64 64" width="20px" height="20px"  style="fill: currentcolor;"><path d="M49.26,56.17H14.74a6.91,6.91,0,0,1-6.91-6.91V32a3.45,3.45,0,1,1,6.91,0V49.26H49.26V32a3.45,3.45,0,1,1,6.91,0V49.26A6.91,6.91,0,0,1,49.26,56.17Z"></path><path d="M44.81,24.08a3.5,3.5,0,0,1-4.9,0l-4.45-4.45V35.44a3.45,3.45,0,0,1-6.91,0V19.62l-4.45,4.45a3.5,3.5,0,0,1-4.9,0,3.44,3.44,0,0,1,0-4.87L29.55,8.85a6,6,0,0,1,.52-.45,2.61,2.61,0,0,1,.62-.31,3.45,3.45,0,0,1,2.62,0,2.61,2.61,0,0,1,.62.31,6,6,0,0,1,.52.45L44.81,19.21A3.44,3.44,0,0,1,44.81,24.08Z"></path></svg></div>
    </body>
    </html>

CodePudding user response：

set your SVG width to 100% and remove the height:

<svg width="100%">

CodePudding user response：

In the given example the width and height are fixed. Just remove them and the SVG will stretch automatically :

    <!DOCTYPE html>
    <html>
    <head>
      <meta name="description" content="ES6 in Action: New String Methods [3]">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <style>
    .parent {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  object-fit: contain;
    }</style>
  
      <div class='parent'>
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 386.972 386.972" style="enable-background:new 0 0 386.972 386.972;" xml:space="preserve">
        <path d="M25.99,0v386.972l334.991-193.486L25.99,0z M55.99,51.972l245.009,141.514L55.99,335V51.972z" />
    </svg>
      </div>
      
      <div class='parent'><svg viewBox="0 0 64 64"  style="fill: currentcolor;"><path d="M49.26,56.17H14.74a6.91,6.91,0,0,1-6.91-6.91V32a3.45,3.45,0,1,1,6.91,0V49.26H49.26V32a3.45,3.45,0,1,1,6.91,0V49.26A6.91,6.91,0,0,1,49.26,56.17Z"></path><path d="M44.81,24.08a3.5,3.5,0,0,1-4.9,0l-4.45-4.45V35.44a3.45,3.45,0,0,1-6.91,0V19.62l-4.45,4.45a3.5,3.5,0,0,1-4.9,0,3.44,3.44,0,0,1,0-4.87L29.55,8.85a6,6,0,0,1,.52-.45,2.61,2.61,0,0,1,.62-.31,3.45,3.45,0,0,1,2.62,0,2.61,2.61,0,0,1,.62.31,6,6,0,0,1,.52.45L44.81,19.21A3.44,3.44,0,0,1,44.81,24.08Z"></path></svg></div>
    </body>
    </html>