如何在GitHub README中实现SVG的overflow: visible效果？

我在GitHub README里用以下代码展示SVG：

<img src="header.svg" width="800" height="400px">

当header.svg实际高度超过400px时，我希望容器能垂直扩展（或显示滚动条），尝试添加overflow: visible样式后没有效果：

<img src="header.svg" width="800" height="400px" style="overflow: visible">

已知GitHub README无法使用外部CSS，但可以将CSS嵌入SVG后展示，想问有没有办法通过HTML展示SVG，使其底部能够扩展？

方案1：改用<object>标签替代<img> #

<img>属于替换元素，overflow属性对它不生效。改用<object>标签加载SVG，配合样式可实现滚动或扩展效果：

<object data="header.svg" width="800" style="max-height: 400px; overflow: auto;"></object>

• 若想让容器自动适配SVG实际高度，去掉max-height属性即可；
• 保留max-height:400px和overflow:auto，超出400px的部分会显示垂直滚动条。

方案2：修改SVG内部代码（嵌入CSS） #

如果必须使用<img>标签，可直接在SVG文件内添加样式，强制其按实际尺寸展示：

1. 打开header.svg，在根<svg>标签中添加style="height: auto; max-width: 800px;"；
2. 移除HTML中<img>的height属性，仅保留宽度设置：

<img src="header.svg" width="800">

这样SVG会按自身实际高度自适应渲染，容器也会随之垂直扩展。

内容的提问来源于stack exchange，提问作者Danny Garside