Chrome is clipping the edges off SVG images , where other browsers don't

I have some SVG icons I'm using which show up correctly in Firefox and Safari, like this:

...but they come out clipped at the edges like this in Chrome (both MacOS and Windows):

The source images are square (they have square viewBoxes, even if there's extra internal blank space), and my SVG markup treats them as square:

        <image id="download" href="assets/download.svg" x="161.5" y="0.5" width="2.5" height="2.5"/>

        <text id="low-battery-text" x="169" y="2.75" text-anchor="end"></text>
        <image id="low-battery" href="assets/low-battery.svg" x="169.5" y="0.5" width="2.5" height="2.5"/>

If I make the specified height of these icons a bit taller then Chrome stops clipping them, but that changes the positioning and scaling of the images a bit too. And besides, it shouldn't be necessary.

I get the impression that Chrome is ignoring the viewBox values for the SVG images, it's finding the internal edges of the images, and scaling according to that (but that's just a guess). (No, that's not it.)

Here's what the SVG inside one of the SVG files looks like:

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<g>
    <path fill="#0F0" d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012
        v-8.861H25.462z"/>
    <path fill="#0F0" d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723
        c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742
        c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193
        C15.092,18.979,14.62,18.426,14.62,18.426z"/>
</g>
</svg>

I can only find very different topics discussed when I try to Google for an answer to this problem, so I hoping someone who may have encountered a similar issue might have a suggestion for fixing it.

Update:

Interesting experiment - it isn't a good solution, but it's perhaps revealing of the underlying problem.

If I bypass using an SVG image file, and paste the content of the SVG file into my own SVG, the clipping problem goes away:

        <svg viewBox="0 0 30 30" x="161.5" y="0.5" width="2.5" height="2.5">
          <g>
            <path fill="#0F0" d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012
              v-8.861H25.462z"/>
            <path fill="#0F0" d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723
              c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742
              c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193
              C15.092,18.979,14.62,18.426,14.62,18.426z"/>
          </g>
        </svg>