How do I set max-width on an svg+xml image in IE?

3
votes

I am attempting to set a max-width on an svg+xml image in IE.

Please see the following example:

http://jsfiddle.net/LpY5S/2/

HTML:

<img class="signature-image" 
     src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQ1IiBoZWlnaHQ9IjEwMiI+PHBhdGggc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0icmdiKDUxLCA1MSwgNTEpIiBmaWxsPSJub25lIiBkPSJNIDc3IDM3IGMgLTAuMDUgLTAuMDQgLTIuNjIgLTEuMTEgLTMgLTIgYyAtMS4zIC0zLjA0IC0yLjQ2IC04LjA0IC0zIC0xMiBjIC0wLjQ0IC0zLjIgLTAuNDIgLTcuMDUgMCAtMTAgYyAwLjE5IC0xLjMyIDEuMTYgLTIuODggMiAtNCBjIDEuMDcgLTEuNDIgMi41MyAtMi45MyA0IC00IGMgMi4wOSAtMS41MiA0Ljg4IC0zLjcyIDcgLTQgYyAyLjE3IC0wLjI5IDUuNTggMS4xMiA4IDIgYyAxLjA2IDAuMzggMi4yNyAxLjE3IDMgMiBjIDEuNDUgMS42NiAzLjE3IDMuOTMgNCA2IGMgMS4wNiAyLjY0IDEuNTggNi4wMyAyIDkgYyAwLjIzIDEuNjEgMC40NiAzLjYxIDAgNSBjIC0wLjc0IDIuMjMgLTIuMzIgNS4zMiAtNCA3IGMgLTEuOTcgMS45NyAtNS4zNCAzLjY3IC04IDUgYyAtMS4xNiAwLjU4IC0yLjc5IDEuMSAtNCAxIGwgLTggLTIiLz48cGF0aCBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSJyZ2IoNTEsIDUxLCA1MSkiIGZpbGw9Im5vbmUiIGQ9Ik0gMTMzIDM4IGMgLTAuMTQgLTAuMTIgLTYuNDMgLTQuNDggLTggLTcgYyAtMS4zNyAtMi4xOCAtMS44IC02LjIxIC0yIC05IGMgLTAuMTEgLTEuNTQgMC4zNSAtMy41MiAxIC01IGMgMS41OSAtMy42MyAzLjQzIC04LjcxIDYgLTExIGMgMi42NyAtMi4zNyA4LjI1IC00LjI5IDEyIC01IGMgMi42MSAtMC41IDYuMzkgMC4zNSA5IDEgYyAxLjA0IDAuMjYgMi4zNCAxLjE1IDMgMiBjIDEuNDggMS45IDIuOTMgNC42NiA0IDcgYyAwLjU1IDEuMiAwLjkxIDIuNjcgMSA0IGMgMC4yMyAzLjIyIDAuMjMgNi43OCAwIDEwIGMgLTAuMDkgMS4zMyAtMC4zNyAyLjkxIC0xIDQgYyAtMS41NCAyLjY0IC0zLjc3IDYuMTIgLTYgOCBjIC0xLjcgMS40NCAtNC43NSAyLjQ0IC03IDMgYyAtMS40OCAwLjM3IC0zLjYyIDAuMzQgLTUgMCBjIC0xIC0wLjI1IC0xLjk0IC0xLjY1IC0zIC0yIGwgLTkgLTIiLz48cGF0aCBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSJyZ2IoNTEsIDUxLCA1MSkiIGZpbGw9Im5vbmUiIGQ9Ik0gMSAzNyBjIDAuMzMgMC40NyAxMi4zNiAxOC42NCAxOSAyNyBjIDIuMTQgMi42OSA1LjE1IDQuNzIgOCA3IGMgNy40NSA1Ljk2IDE0LjM4IDEyLjM1IDIyIDE3IGMgNS42NSAzLjQ1IDEyLjU0IDYuMjkgMTkgOCBjIDkuNTIgMi41MyAxOS45MiA0LjU1IDMwIDUgYyAyNi44MyAxLjIxIDU0LjcxIDAuODQgODEgMCBjIDQuMzMgLTAuMTQgOC44NSAtMS41NyAxMyAtMyBjIDUuNDQgLTEuODcgMTEuMzYgLTQuMjYgMTYgLTcgYyAyLjI1IC0xLjMzIDQuNDggLTMuNzIgNiAtNiBjIDcuNTcgLTExLjM2IDE1Ljk4IC0yMy45NiAyMiAtMzYgYyAyLjY3IC01LjMzIDMuOTUgLTEyLjEyIDUgLTE4IGMgMC41NiAtMy4xNSAtMC4zNCAtNi43NiAwIC0xMCBsIDIgLTkiLz48cGF0aCBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSJyZ2IoNTEsIDUxLCA1MSkiIGZpbGw9Im5vbmUiIGQ9Ik0gMTAyIDUzIGMgMC4wMiAwLjA5IDAuMzMgMy41NiAxIDUgYyAxLjU0IDMuMjkgMy45IDcuMTkgNiAxMCBjIDAuNjUgMC44NyAyIDEuNzUgMyAyIGMgMS4zOCAwLjM0IDMuNzYgMC41NiA1IDAgYyAxLjk0IC0wLjg4IDQuNjYgLTMuMjggNiAtNSBjIDAuNzEgLTAuOTEgMC45MSAtMi42NyAxIC00IGMgMC4yMyAtMy4yMiAwIC0xMCAwIC0xMCIvPjxwYXRoIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9InJnYig1MSwgNTEsIDUxKSIgZmlsbD0ibm9uZSIgZD0iTSA4NCAyMiBsIDEgMSIvPjxwYXRoIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9InJnYig1MSwgNTEsIDUxKSIgZmlsbD0ibm9uZSIgZD0iTSAxNDMgMjAgbCAxIDEiLz48L3N2Zz4=">

CSS:

.signature-image {
    max-width:100%;
}

Raw SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="245" height="102">
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 77 37 c -0.05 -0.04 -2.62 -1.11 -3 -2 c -1.3 -3.04 -2.46 -8.04 -3 -12 c -0.44 -3.2 -0.42 -7.05 0 -10 c 0.19 -1.32 1.16 -2.88 2 -4 c 1.07 -1.42 2.53 -2.93 4 -4 c 2.09 -1.52 4.88 -3.72 7 -4 c 2.17 -0.29 5.58 1.12 8 2 c 1.06 0.38 2.27 1.17 3 2 c 1.45 1.66 3.17 3.93 4 6 c 1.06 2.64 1.58 6.03 2 9 c 0.23 1.61 0.46 3.61 0 5 c -0.74 2.23 -2.32 5.32 -4 7 c -1.97 1.97 -5.34 3.67 -8 5 c -1.16 0.58 -2.79 1.1 -4 1 l -8 -2"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 133 38 c -0.14 -0.12 -6.43 -4.48 -8 -7 c -1.37 -2.18 -1.8 -6.21 -2 -9 c -0.11 -1.54 0.35 -3.52 1 -5 c 1.59 -3.63 3.43 -8.71 6 -11 c 2.67 -2.37 8.25 -4.29 12 -5 c 2.61 -0.5 6.39 0.35 9 1 c 1.04 0.26 2.34 1.15 3 2 c 1.48 1.9 2.93 4.66 4 7 c 0.55 1.2 0.91 2.67 1 4 c 0.23 3.22 0.23 6.78 0 10 c -0.09 1.33 -0.37 2.91 -1 4 c -1.54 2.64 -3.77 6.12 -6 8 c -1.7 1.44 -4.75 2.44 -7 3 c -1.48 0.37 -3.62 0.34 -5 0 c -1 -0.25 -1.94 -1.65 -3 -2 l -9 -2"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 1 37 c 0.33 0.47 12.36 18.64 19 27 c 2.14 2.69 5.15 4.72 8 7 c 7.45 5.96 14.38 12.35 22 17 c 5.65 3.45 12.54 6.29 19 8 c 9.52 2.53 19.92 4.55 30 5 c 26.83 1.21 54.71 0.84 81 0 c 4.33 -0.14 8.85 -1.57 13 -3 c 5.44 -1.87 11.36 -4.26 16 -7 c 2.25 -1.33 4.48 -3.72 6 -6 c 7.57 -11.36 15.98 -23.96 22 -36 c 2.67 -5.33 3.95 -12.12 5 -18 c 0.56 -3.15 -0.34 -6.76 0 -10 l 2 -9"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 102 53 c 0.02 0.09 0.33 3.56 1 5 c 1.54 3.29 3.9 7.19 6 10 c 0.65 0.87 2 1.75 3 2 c 1.38 0.34 3.76 0.56 5 0 c 1.94 -0.88 4.66 -3.28 6 -5 c 0.71 -0.91 0.91 -2.67 1 -4 c 0.23 -3.22 0 -10 0 -10"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 84 22 l 1 1"/>
    <path 
        stroke-linejoin="round" 
        stroke-linecap="round" 
        stroke-width="2" 
        stroke="rgb(51, 51, 51)" 
        fill="none" 
        d="M 143 20 l 1 1"/>
</svg>

Firefox and Chrome correctly display with max-width set, for example:

max-width: 100%

max-width: 100%

max-width: 10%

max-width: 10%

They do so by scaling the height to match the percentage that the width is scaled, so the image remains at the same aspect ratio.

IE10/11 on the other hand skews the image:

max-width: 10% in IE

max-width: 10% in IE

Can someone please assist me in getting this working in IE10/11?

2
htmlcssinternet-explorersvg
Is there a width and height specified in the SVG root element? – Sirko
@Sirko it's autogenerated from jSignature (willowsystems.github.io/jSignature/#/about) but yes it does. width="245" height="102" – joshschreuder
You might try adding viewBox and preserveAspectRatio attributes to the SVG root element. – Sirko

2 Answers

0
votes

you can update and try given css class

.signature-image {
    max-width:100%;
    width:100%; /* IE */
}
0
votes

You can update under the parent class like this: .signature-image svg { max-width:100%; width:100%; /* IE */ }

This Worked for me.