1

I've a problem in setting automatic width for SVG icons, preserving aspect ratio, having a fixed height for Firefox, Chrome and IE11. I know this is a common problem and I've read examples reported in this very good article, but I cannot find a working snippet of code to make it work. Here's my code:

<div class="icon-container">
  <svg class="icon">
    <use xlink:href="mySvgSpritePath/icons.svg#myIcon"></use>
  </svg>
</div>

<style type="text/css">
  .icon-container {
    background-color: pink;
    width: 230px;
    height: 75px;
  }
  .icon {
    background-color: lightgreen;
  }        
</style>

As expected, I get the following, the icon takes the 100% width of its container:

enter image description here

The viewBox of my icon (viewBox="0 0 26.81 45") is not visible in my markup because it's defined inside my SVG sprite, inside a <symbol> element. This way I cannot use the padding hack described in the article, because I do not have access to viewBox values in my template producing the final html: if I could, I would set a dynamic padding for every different icon I can get from my sprite.

Of course, my desired output would be the following:

enter image description here

Have you got any suggestions, advices or even better snippets to reach this goal?

Thank you

caneta
  • 1,612
  • 2
  • 20
  • 34

1 Answers1

0

In add attribute preserveAspectRatio="xMinYMin meet"

Use em

scss template:

.icon-{{base}} {
    font-size: 1em;
    width: ({{width.inner}} / {{height.inner}})*1em;
    height: 1em;
}

Output:

.icon-medal {
    font-size: 1em;
    width: 1.32em;
    height: 1em;
}

Usage:

.icon-medal {
    font-size: 75px;
}
Амир Хан
  • 1
  • 1