CODEWITHSUNDEEP
htmlcsssvg
Yanick Rochon
Yanick Rochon

Reputation: 53576

How can I prevent SVG elements from resizing in the browser?

Below is a screen capture of a problem I have encountered many times already, which I have ignored, but now it sorts of bothers me.

SVG Resize

The relevant code for this snippet is

.container {
  width: 200px;
}
.labelContainer {
  display: flex;
  flex-direction: row;
  margin-right: 48px;
}
.label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<div>
  <a href="#" class="labelContainer">
    <span class="label">Super Transporter Company 3000 Ltd.</span>
    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" style="width:24px !important;">
      <path d="M10,17L15,12L10,7V17Z"></path>
    </svg>
  </a>
</div>
<div class="container">
  <a href="#" class="labelContainer">
    <span class="label">Super Transporter Company 3000 Ltd.</span>
    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" style="width:24px !important;">
      <path d="M10,17L15,12L10,7V17Z"></path>
    </svg>
  </a>
</div>

Why does this happen? How can I prevent the SVG element from resizing?

Upvotes: 9

Views: 18946

Answers (2)

Akaisteph7
Akaisteph7

Reputation: 6506

My issue was that the parent element was applying a flex-shrink on the child elements even though they were not shown in the css. Just setting flex-shrink: 0 on the target element fixed my issue.

Upvotes: 11

Igor Nowosad
Igor Nowosad

Reputation: 649

Browser set min-width and min-height for svg elements to "auto" by default. So when it render your svg and see that you have not set the min-width, then it will shrink it as much as it can to fit more text.

So you have to set min-width attribute for svg element.

Upvotes: 27

Related Questions