SVGs are not resizing correctly in Internet Explorer and there is unnecessary blank space around them

Question

SVGs are not resizing correctly in Internet Explorer and there is unnecessary blank space around them

Recently, I made the decision to switch to using SVG symbols for one of my projects. However, I encountered a challenge as I needed these SVGs to be responsive. My main objective was to minimize the number of HTTP requests, leading me to explore the option of merging all SVG files into one SVG, defining symbols, and utilizing them as follows:

<svg style="display:none;">
<defs>
<symbol id="mys">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="
        // SVG path data here
    ">
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet" style="width:100%;">
    <use xlink:href="#mys"></use>
  <svg>
</div>

If you'd like to see this in action and observe the different behaviors across browsers, check out this jsfiddle link: http://jsfiddle.net/ws472q71/

Despite successfully getting this code to work in Firefox and Chrome, I faced compatibility issues with Internet Explorer. I tried various fixes suggested online but to no avail.

I'm seeking advice on what might be going wrong and if there are any alternative solutions that allow merging SVGs into a single file while maintaining responsiveness.

Your insights and suggestions would be greatly appreciated. Thank you!

html css svg

Answer 1

Answer №1

After some exploration, it seems that Internet Explorer has a glitch where it fails to properly scale the SVG unless both width and height are provided.

To resolve this issue in IE, there is a clever workaround discovered by Nicolas Gallagher.

The solution involves using a <canvas> element. IE does have proper scaling for canvas elements. By adding a canvas within the <div> containing the SVG, you can ensure that the SVG displays at the correct size. Make sure the canvas has the same aspect ratio as your SVG.

<div style="position:relative;width:100%;background:blue;">
  <canvas width="254" height="108"></canvas>
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
    <use xlink:href="#mys"></use>
  </svg>
</div>

Applying CSS:

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

<svg style="display:none;">
<defs>
<symbol id="mys">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
        c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
        C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
        l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
        c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
        c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
        c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
        s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
         M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
        s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
        S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
  <canvas width="254" height="108"></canvas>
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
    <use xlink:href="#mys"></use>
  </svg>
</div>

This technique works whether you need to match the width or height of the SVG.

Answer 2

After some exploration, it seems that Internet Explorer has a glitch where it fails to properly scale the SVG unless both width and height are provided.

To resolve this issue in IE, there is a clever workaround discovered by Nicolas Gallagher.

The solution involves using a <canvas> element. IE does have proper scaling for canvas elements. By adding a canvas within the <div> containing the SVG, you can ensure that the SVG displays at the correct size. Make sure the canvas has the same aspect ratio as your SVG.

<div style="position:relative;width:100%;background:blue;">
  <canvas width="254" height="108"></canvas>
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
    <use xlink:href="#mys"></use>
  </svg>
</div>

Applying CSS:

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

<svg style="display:none;">
<defs>
<symbol id="mys">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
        c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
        C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
        l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
        c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
        c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
        c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
        s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
         M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
        s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
        S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
  <canvas width="254" height="108"></canvas>
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
    <use xlink:href="#mys"></use>
  </svg>
</div>

This technique works whether you need to match the width or height of the SVG.

Answer 3

Answer №2

For those struggling to apply this solution or experiencing difficulties with external SVG files rather than inline SVG code:

It is crucial to ensure that your SVG file, when edited in a text editor, includes the viewBox and preserveAspectRatio attributes within the opening <svg> tag. Without these attributes, no matter what adjustments you make, the SVG will not scale properly in Internet Explorer, even though it may scale correctly in other browsers.

Once these attributes are included, you can set the width/height of the image element importing the SVG to 100% and use max-width or max-height to control scaling, resulting in the expected behavior. However, alignment issues may still arise.

Answer 4

For those struggling to apply this solution or experiencing difficulties with external SVG files rather than inline SVG code:

It is crucial to ensure that your SVG file, when edited in a text editor, includes the viewBox and preserveAspectRatio attributes within the opening <svg> tag. Without these attributes, no matter what adjustments you make, the SVG will not scale properly in Internet Explorer, even though it may scale correctly in other browsers.

Once these attributes are included, you can set the width/height of the image element importing the SVG to 100% and use max-width or max-height to control scaling, resulting in the expected behavior. However, alignment issues may still arise.

Answer 5

Answer №3

While Nicolas Gallagher's solution was effective, I encountered some responsiveness issues when adjusting the viewport size. Here is the fix I implemented:

 <div class="container">
    <canvas width="3" height="1"></canvas>
    <svg class="mys" viewBox="0 0 254 108">
         <use xlink:href="#mys"></use>
    </svg>
 </div>

I added "max-width:100%;" to the "container" class:

.container{
     position: relative;
     display: inline-block;
     height: 550px;
     max-width: 100%;
}

This fix may not address all scaling issues. You may still need to use media queries to adjust the height accordingly, but at least the svg element will now stay within its container. Hopefully this solution proves helpful for someone.

Answer 6

While Nicolas Gallagher's solution was effective, I encountered some responsiveness issues when adjusting the viewport size. Here is the fix I implemented:

 <div class="container">
    <canvas width="3" height="1"></canvas>
    <svg class="mys" viewBox="0 0 254 108">
         <use xlink:href="#mys"></use>
    </svg>
 </div>

I added "max-width:100%;" to the "container" class:

.container{
     position: relative;
     display: inline-block;
     height: 550px;
     max-width: 100%;
}

This fix may not address all scaling issues. You may still need to use media queries to adjust the height accordingly, but at least the svg element will now stay within its container. Hopefully this solution proves helpful for someone.

Answer 7

Answer №4

If you're dealing with <img> elements, you can rephrase it in the following manner.

Code Snippet for HTML:

<div class="ie-svgHeight">
  <img src="path.svg" class="ie-svgHeight-img">
  <canvas class="ie-svgHeight-canvas"></canvas>
</div>

Code Snippet for SCSS:

.ie-svgHeight {
  position: relative;

  &-canvas {
    display: block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
  &-img { height: 100%; }
}

Answer 8

If you're dealing with <img> elements, you can rephrase it in the following manner.

Code Snippet for HTML:

<div class="ie-svgHeight">
  <img src="path.svg" class="ie-svgHeight-img">
  <canvas class="ie-svgHeight-canvas"></canvas>
</div>

Code Snippet for SCSS:

.ie-svgHeight {
  position: relative;

  &-canvas {
    display: block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
  &-img { height: 100%; }
}

SVGs are not resizing correctly in Internet Explorer and there is unnecessary blank space around them

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Transition smoothly with a fade-in effect as you scroll through the images, and proceed to

Images that adapt to various sizes while maintaining a consistent visual hierarchy

Ensuring Consistent Vertical Spacing for CSS-Animated Bootstrap 5 Navbar Toggler Buttons in All Browsers

Renaming form elements using JQuery's .load method

The image seems to be misaligned inside the DIV, and interestingly, this issue appears to be

Ways to modify the input field value in my form based on the current page context

Tips for avoiding css reanimation when clicking on a calendar

Having trouble getting the show/hide div feature to work in a fixed position on the

What is the best way to show a pop-up message to a visitor on my site for the first time

Issue with form action failing to properly refresh

Ways to block past dates on bootstrap date picker starting from the current date and how to prevent dates beyond 90 days in the future from being selected on the

Employees are unable to operate within an HTML page embedded in a WPF project

What is the method for advancing the cursor to the next line in this animation?

Cannot Get jQuery .flip() to Work Automatically Every 2 Seconds

Guide to creating a rising or waving effect for text using CSS or JavaScript without the need for animation

Issue with Material-UI and React: Changes not visible after using <ThemeProvider>

Is there a way to incorporate a delete button for each li element that is included in my list?

Display the user's location on Google Maps in addition to all other markers for a comprehensive view

Ways to attach an item using its lower point instead of its upper coordinate

Issue with jQuery where it returns "undefined" when trying to access the CSS display property