Home/ Questions/Q 5988701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T22:59:43+00:00

I am using an SVG image on a page (via the CSS background-image property)

  • 0

I am using an SVG image on a page (via the CSS background-image property) and when I view this page in Chrome (version 11.0.696.71 on Windows), one of my CPU cores goes to 100% and stays there permanently. My SVG image is quite simple and is defined in its own XML file:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:rgb(0,0,0);fill-opacity:.05"/>
</svg>

Update:

You may need to use the SVG in a specific way on the page to experience the problem. This HTML file has the issue (currently online at http://jsbin.com/amaqo4/6):

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <table>
    <tr style="background: url(YOUR-SVG-FILE.svg)"><td>test</td></tr>
  </table>
  <div style="background: url(YOUR-SVG-FILE.svg)">test</div>
</body>
</html>

When I remove either the table or the div, the problem goes away.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is caused by the implicit width and height of 100% on the svg element. Explicitly specifying width="100%" height="100%" on the svg element causes the same issue. I’ve discovered that the problem can be solved by using unit-less dimensions, e.g. width="1" height="1".

    Here is a modified version of my SVG file that fixes the problem:

    <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:rgb(0,0,0);fill-opacity:.05"/>
</svg>
    • 0