如何在img标签src中通过ID引用内联SVG或直接嵌入SVG代码？

一、能否通过ID引用已加载的内联SVG？ #

不行。img标签的src属性仅支持指向外部资源文件、data URI或Blob URL，无法直接通过ID引用页面中已加载的内联SVG。你尝试的src="url(#my_svg)"不符合img的src语法规范，浏览器无法识别解析。

如果想复用页面内的内联SVG，更合适的方案是用<use>标签配合SVG的<defs>：

<svg style="display: none;">
  <defs>
    <svg id="my_svg" viewBox="0 0 100 100">
      <!-- 你的SVG内容 -->
      <circle cx="50" cy="50" r="40" fill="red" />
    </svg>
  </defs>
</svg>

<!-- 复用SVG -->
<svg width="50" height="50">
  <use href="#my_svg" />
</svg>

这种方式完全不需要额外HTTP请求，也不会重复代码。

二、能否将SVG代码直接输出到img的src属性中？ #

可以，就是你尝试的data URI方案，但你的PHP代码存在需要调整的细节：

1. 仅替换双引号不够，需要对SVG字符串做完整的URL编码，避免<、>、空格等字符导致解析错误。
2. 注意PHP代码的输出格式，避免引入多余空白字符。

优化后的PHP代码示例（UTF-8编码方案，可读性更好、体积更小）：

<?php
$svg_str = logo_svg();
// 对SVG字符串进行URL编码，确保兼容所有浏览器
$encoded_svg = rawurlencode($svg_str);
?>

<img src="data:image/svg+xml;utf8,<?php echo $encoded_svg; ?>" 
     style="position:absolute;width:100%;height:100%;" />

也可以使用base64编码方案：

<?php
$svg_str = logo_svg();
$base64_svg = base64_encode($svg_str);
?>

<img src="data:image/svg+xml;base64,<?php echo $base64_svg; ?>" 
     style="position:absolute;width:100%;height:100%;" />

这种方案确实能避免创建单独的SVG文件和重复HTTP请求，适合小型SVG图标。

补充说明 #

• 如果SVG需要支持交互（如hover效果、点击事件），img标签内的SVG无法响应，此时建议用内联SVG或<use>方案。
• 大型SVG使用data URI会增加HTML文件体积，可能影响页面加载速度，这种情况更适合用外部SVG文件配合缓存策略。

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