Webpack无法实现SVG内联仅输出URL，纯JS实现问题求助

问题说明 #

我尝试通过Webpack实现SVG内联，但最终只生成了URL形式，无法达到预期的内联SVG节点效果。

Webpack配置 #

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin')

module.exports = {
    mode: 'development',
    entry: {
        index: path.resolve(__dirname, './src/index.js'),
    },
    output: {
        path: path.resolve(__dirname, './'),
        filename: 'build/[name].budle.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/template.html'),
        }),
        new HtmlWebpackInlineSVGPlugin({
            runPreEmit: true,
            inlineAll: true,
        }),
    ],

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.svg$/,
                type: 'asset/source',
            },
        ],
    },
    watch: true,
}

对应JS代码 #

const imgCar = document.createElement('img')
imgCar.setAttribute('src', carSvg)
imgCar.classList.add('car-img')
carBtnsMove.appendChild(imgCar)

当前实现效果 #

期望实现效果 #

问题排查与解决方案 #

核心问题 #

1. img标签本身无法直接渲染内联SVG节点，即使传入SVG源码，浏览器也会将其解析为Data URL或外部URL，无法将SVG节点插入DOM。
2. HtmlWebpackInlineSVGPlugin仅处理HTML模板中静态存在的<img>标签，对JS动态创建的img标签无效。

修正方案 #

方案1：直接插入SVG节点（真正的内联效果）

利用SVG源码字符串创建DOM节点，直接插入页面，这样SVG会作为DOM的一部分存在，支持CSS控制内部元素：

// 创建临时容器解析SVG字符串
const tempContainer = document.createElement('div');
tempContainer.innerHTML = carSvg;
// 获取解析后的SVG元素
const svgElement = tempContainer.firstElementChild;
svgElement.classList.add('car-img');
carBtnsMove.appendChild(svgElement);

方案2：转为Data URL（保留img标签形式）

如果需要保留img标签，可将SVG源码转为Data URL实现内联加载：

const imgCar = document.createElement('img')
// 将SVG字符串编码为Data URL
const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(carSvg)}`
imgCar.setAttribute('src', svgDataUrl)
imgCar.classList.add('car-img')
carBtnsMove.appendChild(imgCar)

补充说明 #

• Webpack配置中type: 'asset/source'是正确的，确保导入的carSvg是完整的SVG源码字符串。
• 真正的内联SVG（方案1）支持通过CSS修改SVG内部的路径、填充色等属性，而Data URL形式的img标签不支持此类操作。

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