Blog

Oplossing voor het verkeerd schalen van SVG bestanden in Internet Explorer

IE9, IE10 en IE 11 schalen SVG bestanden niet juist wanneer ze zijn toegevoegd middels een img tag als de viewbox, width en height attributen in het SVG bestand zijn gespecificeerd.

Een handige oplossing op basis van CSS is onderstaande code. Het SVG bestand wordt nu proportioneel geschaald op basis van de grootte van zijn container.

/*
* [1] IE9
* [2] IE10+
*/
/* 1 */
img[src*=".svg"] {
width: 100%;
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img[src*=".svg"] {
width: 100%;
}
}

Comments are closed.