How to repeat a background SVG image in Internet Explorer 10

by Kasper Tidemann

For whatever reason, Internet Explorer 10 does not support the repeating of SVG-based background images out of the box. That is, not unless the markup is changed a bit. Here is an example of the <svg> element inside an SVG file:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 50" enable-background="new 0 0 149 50" xml:space="preserve">

We need to make Internet Explorer 10 preserve the aspect ratio by slicing the image accordingly. For this to happen, preserveAspectRatio="none slice" should be added to the <svg> like so:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 50" enable-background="new 0 0 149 50" xml:space="preserve" preserveAspectRatio="none slice">

Save the file and try refreshing the page in Internet Explorer 10. You should see your image beautifully repeated now.