为何部分SVG自动缩放其他图片溢出？如何设置SVG溢出？

问题场景 #

在HTML中引入这张SVG图片：

<img src="https://keyller.io/generators/fr/solfege/cle-de-sol/img/treble-clef-9-sol.svg">

并应用以下CSS：

img { 
    position: absolute;
    left: 500px;    
}

这张SVG靠近视口右边界时会自动缩放以适配页面，但换成JPG图片或另一张SVG：

<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overflow_logo.svg">

时，图片都会直接溢出页面。

一、为什么会有差异？ #

核心原因是SVG的内部属性设置和浏览器对不同图片类型的默认渲染逻辑：

• 第一张SVG内部定义了viewBox属性，这个属性相当于给SVG划定了一个“可见画布范围”。当它作为<img>引入且没设固定宽高时，浏览器会基于viewBox自动计算缩放比例，确保SVG能在当前可用空间内完整显示——当右侧空间不足时，就会自动缩小适配。
• JPG是位图，本身有固定的像素尺寸，浏览器默认按原尺寸渲染，不会主动缩放适配空间，所以超出视口就会溢出。
• 另一张Stack Overflow的SVG，要么没定义viewBox，要么根元素设置了固定宽高且未搭配viewBox，浏览器会直接按它指定的固定尺寸渲染，不会自动缩放，因此会溢出。

二、如何让第一张SVG改为溢出？ #

要强制它按原尺寸渲染（超出视口就溢出），有两种简单方法：

方法1：给<img>设置固定宽高 #

直接在CSS里指定和SVG原尺寸一致的宽高，覆盖浏览器的自动缩放逻辑：

img {
    position: absolute;
    left: 500px;
    /* 替换为SVG的原始宽高值 */
    width: 200px;
    height: 300px;
}

方法2：修改SVG文件（有权限的话） #

在SVG的根<svg>标签中添加明确的固定宽高属性，让浏览器不再依赖viewBox自动缩放：

<svg width="200px" height="300px" viewBox="...">
    <!-- 原有SVG内容 -->
</svg>

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