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

user_320700 0
Viewed 4686

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?

svg css html
1 Answers

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.

user_65998260
Related