Fixing SVG’s with ‘background-size:100% 100%’ in Chrome and Firefox

With an element that needs to be able to expand and contract both vertically and horizontally, '100% 100%' is the most suitable value for the background-size property. Unfortunately both Chrome and Firefox have issues displaying SVG's correctly using these values. As can be seen below, Chrome only sets the width at 100% and attempts to preserve the aspect ratio, and Firefox renders the horizontal edges poorly - the top and bottom are quite fuzzy.

Chrome before fix
Chrome v.23
Firefox before fix
Firefox v.16

The issue is known in Chrome, and a workaround is suggested here(Comment 7). The SVG needs to be opened up in a text editor, and 'preserveAspectRatio="none"' needs to be added to the beginning SVG tag.

The issue in Firefox is also a known bug, and is discussed here. To fix the issue in the example, the height attribute was removed from the beginning SVG tag.

This is the SVG XML used in the examples before the edits:

This is the SVG XML after the edits:

These are the rendered elements after the edits have been made:

Chrome after fix
Chrome v.23
Firefox after fix
Firefox v.16



    Your comment