Unexpected whitespace in SVG rendered by <img> tag in HTML5 on Chrome 117
I've been working on this all day and I've been banging my head against this for hours... I'm relatively new to this, so bear with me. Hey everyone, I'm running into an issue that's driving me crazy. Quick question that's been bugging me - I'm running into an scenario where an SVG image is rendered with unexpected whitespace around it when using an `<img>` tag in my HTML5 document... This happens specifically in Chrome 117, but looks fine in Firefox and Edge. I have the following SVG code: ```svg <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="red" /> </svg> ``` I embed it in my HTML like this: ```html <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='red' /%3E%3C/svg%3E" alt="Red Circle" /> ``` Despite my attempts to set `display: block;` in my CSS to remove whitespace, the scenario continues: ```css img { display: block; margin: 0; padding: 0; } ``` I also tried adding a `style` attribute directly to the `<img>` tag: ```html <img style="display: block; margin: 0; padding: 0;" ... /> ``` Nothing seems to work, and the whitespace appears only in Chrome. I've also checked if the SVG has any inherent padding or margin properties, but it doesn't seem to. I'm at a loss here. Is there a specific attribute or workaround for this behavior in Chrome that I might be missing? This is part of a larger web app I'm building. What's the best practice here? I'm working on a service that needs to handle this. How would you solve this? Am I missing something obvious?