Why do SVG images on a page cause Chrome to use 100% of the CPU?_问答_开发者

Why do SVG images on a page cause Chrome to use 100% of the CPU?

开发者 https://www.devze.com 2023-03-10 04:34 出处：网络

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 permane

<?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):

&开发者_如何学Golt;!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.

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>

There may be many reasons:

SVG is roughly equivalent to Flash (if it is your thing) movieclips, each element with its numerous events, properties, attributes which can be animated, scripted, sauted, served cold, interact with HTML content in unpredictable ways which includes alpha blending, hit box testing, path clipping, embedded XML/HTML content which might embed SVG, getting dimentions from HTML content, event propogation.
Your build of chrome is buggy.
Your version of chrome is buggy.
Your graphics api doesn't accelerate alpha compositing which this particular SVG implementation use.
Your graphics driver is buggy.
Your OS is buggy.