SVG预览需分场景：用仅适用于可信纯图形SVG，须校验无脚本/事件且兼容旧浏览器；内联预览则必须解析清洗DOM、移除危险标签属性并动态补viewBox，服务端还需二次XML校验防XSS。
上传 SVG 文件并预览，核心难点不在「上传」本身，而在「预览」——浏览器对 SVG 的解析和渲染有特殊限制，直接用 URL.createObjectURL(file) 生成 blob URL 后赋给 <img alt="HTML怎么上传SVG矢量图文件并预览" > src 是可行的，但若用户上传的是含脚本、<script></script> 标签或危险属性（如 onload）的 SVG，会触发安全拦截或直接空白；而内联预览（解析后插入 DOM）又面临 XSS 风险。必须做内容清洗 + 安全沙箱隔离。
用 <img alt="HTML怎么上传SVG矢量图文件并预览" > 预览上传的 SVG：简单但有硬限制
这是最快落地的方式，适用于可信来源或已知干净的 SVG（比如设计团队统一导出的图标）。
- 必须确保上传的 SVG 文件是「纯图形」：无
<script></script>、无onxxx事件、无<foreignobject></foreignobject>、无外部<use></use>引用 -
File对象需通过URL.createObjectURL()转为临时 URL，再赋给<img src alt="HTML怎么上传SVG矢量图文件并预览" >——不能直接读取为字符串再设src="data:image/svg+xml;base64,..."，否则中文或特殊字符易乱码 - 部分旧版 Safari 和安卓 WebView 会对 blob URL 的 SVG 拒绝渲染，建议加兜底：
img.onerror = () => { img.src = fallbackPngUrl; } - 预览时无法控制内部颜色（
fill等），如需 hover 变色，此方案不可行
示例关键代码：
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file || !file.type.includes('svg')) return;
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;
img.onload = () => URL.revokeObjectURL(url); // 用完立即释放
});
安全内联预览：解析 + 清洗 + 插入 <svg></svg>
当需要支持样式控制、动画、或用户可上传自定义 SVG（如图表导出再编辑）时，必须走内联路径，但绝不能直接 innerHTML = svgString。
立即学习“前端免费学习笔记（深入）”；
- 先用
new DOMParser().parseFromString(svgString, 'image/svg+xml')解析，检查parsererror元素是否存在——存在即说明 SVG 语法错误或含非法标签 - 手动移除所有
onload、onclick、href="javascript:"、<script></script>、<style></style>（除非你明确允许 CSS 注入）等节点和属性 - 保留
viewBox，删掉width/height（让 CSS 控制尺寸更灵活）；强制设置xmlns="http://www.w3.org/2000/svg"属性，避免 IE/旧 Edge 解析失败 - 插入前用
document.adoptNode()跨文档转移节点，防止污染当前 DOM
清洗逻辑精简示意：
const parser = new DOMParser();
const doc = parser.parseFromString(svgString, 'image/svg+xml');
if (doc.querySelector('parsererror')) throw new Error('Invalid SVG');
// 移除危险属性和元素
doc.querySelectorAll('[on\:]').forEach(el => el.removeAttribute('on'));
doc.querySelectorAll('script, style, foreignObject').forEach(el => el.remove());
doc.documentElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
const svgEl = document.adoptNode(doc.documentElement);
container.innerHTML = '';
container.appendChild(svgEl);
上传到服务端前，先校验 SVG 内容合法性
前端清洗只是第一道防线，服务端必须二次校验，否则 XSS 风险极高。不要依赖 file.type === 'image/svg+xml' —— MIME 类型完全可伪造。
- 服务端收到文件后，用 XML 解析器（如 Node.js 的
sax或libxmljs）流式解析，拒绝含<script></script>、<object></object>、<iframe></iframe>、href="data:"的文件 - 禁止外部实体引用（XXE）、限制嵌套深度、过滤掉所有事件属性名（正则匹配
^onw+$） - 若业务允许，可强制转为「SVG 图标子集」：只保留
<svg></svg>、<path></path>、<circle></circle>、<rect></rect>、<g></g>和基础属性（fill、stroke、viewBox） - 返回给前端的「可预览 URL」应走 CDN 静态托管，并配置
Content-Security-Policy: default-src 'none'; img-src 'self';
真正容易被忽略的点：预览时的 viewBox 缺失会导致图形挤压或偏移，而用户上传的 SVG 往往来自 Sketch/Figma 导出，不一定带 viewBox。如果清洗后发现没有，别硬补默认值，应该用 getBBox() 动态计算边界再注入——否则缩放行为完全不可控。
