img标签使用@符号无法显示svg

解决 img 标签中使用 @ 符号导致 SVG 图片不显示的问题
当在 HTML 的 <img> 标签中尝试加载带有特殊字符（如 @）的 URL 路径时，可能会遇到解析错误或路径识别失败的情况。对于这种情况，可以采取以下几种方法来解决问题。
方法一：URL 编码
如果路径中含有特殊字符（例如 @），建议对该部分进行 URL 编码处理。具体来说，@ 应该被编码成 %40。这能确保浏览器能够正确解释并请求资源。
<img src="data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20100%20100%27%20style=%27border:1pxsolid;%20width:100px;%20height:100px;%27%3E%3Ccircle%20cx=%2750%27%20cy=%2750%27%20r=%2740%27%20stroke=%27black%27%20stroke-width=%273%27%20fill=%27red%27/%3E%3C/svg%3E">

上述例子展示了如何将整个 SVG 定义嵌入到 img 的 src 属性内，并对其中可能引起冲突的部分进行了适当编码[^2]。
方法二：Base64 编码
另一种解决方案是采用 Base64 对图像数据进行编码。这种方式不仅可以规避特殊字符带来的问题，还能减少 HTTP 请求次数，提升页面性能。
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0ibWFyZ2luOjA7IGJveDoxcHNvbGlkIDEwMHB4IDEwMHB4OyI+CjxyZWN0IHdpZHRoPSIxMDAiIGNsYXNzPSJjbGFzc0RldmlhdGlvbiIgaGVpZ2h0PSIxMDAiIGZpbGw9ImJsYWNrIiAvPgo8L3N2Zz4K"/>

这段代码展示了一个经过 base64 编码后的简单矩形图形作为示例。
方法三：调整服务器配置
有时问题也可能源于 Web 服务器端设置不当。确认服务器已正确配置 MIME 类型支持 .svg 文件非常重要。Apache 和 Nginx 都允许管理员自定义 mime.types 来增加新的媒体类型映射关系。
对于 Apache，在 .htaccess 或 httpd.conf 中加入：
AddType image/svg+xml svg svgz

而对于 Nginx，则是在 nginx.conf 中相应位置添加：
types {
...
image/svg+xml svg svgz;
}

这种方法适用于那些确实由服务器返回响应头引起的兼容性问题[^1]。