CODEWITHSUNDEEP
csssvg
Max Travis
Max Travis

Reputation: 1318

How to set svg icon to fit the container size?

So, the question is - how to set the svg icon to fit the container size? For not it unfortunately crops without any resize... I cannot figure out how to make my file-svg scale! This is question is not about inline svg manipulation! 

div {
  width: 50px;
  height: 50px;
}

img {
  width:100%;
  height:100%;
}
<div>
  <img src="https://svgshare.com/i/7Bw.svg" viewBox="0 0 10 10" preserveAspectRatio="none">
</div>

Upvotes: 3

Views: 2372

Answers (1)

Temani Afif
Temani Afif

Reputation: 272590

You need to define viewBox inside the SVG to able to scale it later:

img {
  width:100%;
  height:100%;
}
<div style="width:50px;height:50px;">
  <img src="https://svgshare.com/i/7EX.svg">
</div>

<div style="width:100px;height:100px;">
  <img src="https://svgshare.com/i/7EX.svg">
</div>

Here is the SVG code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 98">
    <circle class='ui-icon__svg ui-icon__border' cx='50' cy='50' r='48' />
        <path class='ui-icon__svg' d='M31.5 42.5V36l45-.1.1 22.6H70m0 6.7H25l-.1-22.7H70v22.7zM36 43.1l.1 22-.1-22zm22.9 0l.1 22-.1-22zm-16.3-6.6l.1 6.1-.1-6.1zm22.9 0l.1 6.1-.1-6.1z' />
</svg>

Upvotes: 2

Related Questions