The gradient of an SVG graphic stretches non-uniformly when you view the webpage in Internet Explorer 9

Article translations Article translations
Article ID: 2564594 - View products that this article applies to.
Expand all | Collapse all

On This Page


You have a webpage that contains a Scalable Vector Graphics (SVG) graphic. When you use Windows Internet Explorer 9 to view the webpage, you may notice that the radial gradient of the graphic is elliptical instead of circular.

This issue occurs when the following conditions are true:
  • The gradientUnits property is set to userSpaceOnUse.
  • The r property uses percentage units such as, for example, r="50%."


Security update information

To resolve this problem, install the most recent cumulative security update for Windows Internet Explorer. To do this, visit the following Microsoft website:
For more technical information about the most recent cumulative security update for Windows Internet Explorer, visit the following Microsoft website:
Note This update was first included in security update 2530548 (MS11-050). For more information, click the following article number to view the article in the Microsoft Knowledge Base:
2530548 MS11-050 Cumulative security update for Internet Explorer: June 14, 2011


For more information, visit the following Microsoft websites:
General information about gradientUnits

Internet Explorer 9 Guide for Developers

How to Add SVG to a Webpage


Article ID: 2564594 - Last Review: June 22, 2011 - Revision: 1.0
  • Windows Internet Explorer 9
kbqfe kbfix kbsurveynew kbprb KB2564594

Give Feedback


Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from