Menu
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.
445
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With