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

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.