如何使用<object>标签显示百分比宽高且支持外部资源的SVG

问题背景 #

• 最初采用<img>标签加载PNG图片，仅需设置CSS width: 60%即可实现响应式效果，适配各类显示设备。
• 后续计划将PNG替换为画质表现更好的SVG格式，为避免单个SVG文件体积过大，需要在SVG内部引用其他外部SVG资源，实现过程中遇到两类问题：
  • 将<img>标签的src属性直接指向SVG文件时，SVG内部引用的外部资源无法正常加载
  • 改用支持SVG加载外部资源的<object>标签实现需求时，给标签设置的CSS百分比宽度属性无法生效
• 核心诉求：确认<object>标签是否支持设置百分比宽度，或是是否存在其他支持外部资源引用的标签可替代实现该需求。

具体解决方法 #

修复<object>标签百分比宽度失效问题 #

<object>标签本身完全支持百分比宽度设置，失效是因为缺少必要的属性和配套CSS规则，按以下步骤调整即可正常生效：

1. 给<object>标签显式声明type="image/svg+xml"属性，让浏览器提前识别加载内容类型
2. CSS规则除设置width: 60%外，同步添加height: auto属性
3. 给SVG根节点配置固定的viewBox属性，不要在SVG根节点写死固定的width、height像素值，同时添加preserveAspectRatio="xMidYMid meet"属性保证缩放比例正常
   参考代码如下：

<style>
.responsive-svg {
  width: 60%;
  height: auto;
}
</style>
<object class="responsive-svg" data="main.svg" type="image/svg+xml"></object>

对应SVG根节点配置示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid meet">
  <!-- 内部通过<image>、<use>等标签引用的外部SVG资源可正常加载 -->
</svg>

可选替代实现方案 #

如果不想使用<object>标签，也可以选择以下两种支持外部资源引用的实现方式：

• 内联SVG方案：直接将主SVG的代码嵌入HTML页面中，内部通过<use>或<image>标签引用外部SVG资源，这种方式下直接给<svg>标签设置width: 60%; height: auto;即可实现响应式，兼容性更好
• <iframe>标签方案：使用<iframe>加载主SVG文件，配置和<object>一致，设置width: 60%; height: auto;，同时保证SVG根节点的viewBox配置正确，即可正常加载内部外部资源、实现响应式效果

注意：所有SVG内部引用外部资源的场景，需要保证被引用的SVG资源和站点同域，或是被引用资源所在服务器配置了合法的跨域访问头，否则仍会出现资源加载失败的问题。

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