SVG不能自动降级为位图，必须主动触发光栅化；直接img标签引用仍是矢量渲染，canvas绘制或服务端截图才是真正的位图生成方式。
SVG 不能“降级”为位图，但可以渲染成位图并导出 —— 关键在何时、用什么方式触发光栅化。
为什么直接 <img src="logo.svg"> 不算降级
浏览器加载 SVG 时仍按矢量渲染：缩放不模糊、CSS 可控制、DOM 可访问。它只是被显示出来，没生成像素数据。所谓“降级”，本质是主动放弃矢量特性，换取位图的兼容性或处理自由度。
常见误操作：
– 把 SVG 文件后缀改成 .png（文件内容仍是 XML，打不开）
– 在 CSS 中设 width: 100px; height: 100px（只是缩放显示，底层仍是矢量）
canvas 是最可控的光栅化入口
用 JavaScript 将 SVG 内容绘制到 <canvas>，浏览器会强制执行光栅化。这是真正生成位图像素的过程。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须确保 SVG 已加载完成，且无跨域限制（否则
canvas会被污染，无法toDataURL()） - 推荐用
new Image()加载 SVG，再 draw 到 canvas，比直接操作内联 SVG 更稳定 - 注意 canvas 的
width/height属性值决定输出分辨率，不是 CSS 样式
示例关键步骤：
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = 400; // 实际像素宽
canvas.height = 200; // 实际像素高
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 400, 200);
const pngDataUrl = canvas.toDataURL('image/png'); // 此时已是位图
};
img.src = 'logo.svg';
服务端生成位图更可靠，尤其对复杂 SVG
浏览器光栅化受制于 SVG 复杂度、字体嵌入、滤镜支持等。比如含 <feDropShadow> 或外部 CSS 的 SVG，在某些浏览器里可能渲染异常或空白。
可选方案：
- 用 Puppeteer 启动无头 Chrome，加载 SVG 页面后截图：
page.screenshot({ type: 'png', fullPage: true }) - 用
sharp+svg2png（Node.js）：自动处理字体 fallback 和尺寸适配 - 避免依赖客户端环境，适合 CI/CD 批量生成 favicon、邮件图片等
用 <img> + srcset 做“伪降级”要小心
有人把 SVG 和 PNG 放进 srcset，指望浏览器选位图 —— 这不可控。现代浏览器优先选 SVG（更小、更清晰），除非明确禁用：
- 不支持
srcset的老浏览器（IE）会 fallback 到src，但你得手动提供 PNG 地址 - 想强制用位图，只能 JS 检测特性（如
SVGElement是否存在），再动态换src - 注意：这样失去 SVG 的所有优势，却没解决跨域、字体缺失等真实问题
真正需要位图时，别绕弯子；该用 canvas 就用 canvas，该走服务端就走服务端。SVG 的“降级”不是格式转换，而是主动放弃数学描述，换回像素网格 —— 这个决策点，必须由你亲手触发。
