title: Inline SVG not showing in pug and webpack
body: <p>I'm using Webpack4 with pug as my template engine. My config is all set up and everything works ok.</p>
  
  <p>I want to add the odd inline SVG icon in my pug templates and am using this using <a href="https://www.npmjs.com/package/html-webpack-inline-svg-plugin" rel="nofollow noreferrer">HtmlWebpackInlineSVGPlugin</a> which has worked for my first SVG but not my second.</p>
  
  <p><strong>My 'common' config file (I have dev and prod versions too as per Webpack docs):</strong></p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const webpack = require('webpack');
  const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
  
  module.exports = {
    entry: {
      app: './src/js/index.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist')
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.pug',
        title: 'Output Management',
        minify: {
          removeScriptTypeAttributes: true // removes type="text/javascript" from injected &lt;script&gt; tags
        }
      }),
      new HtmlWebpackInlineSVGPlugin({
        runPreEmit: true,
      }),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ],
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        },
        {
          test: /\.pug$/,
          loader: 'pug-loader',
          query: {
            pretty: true // false is default. Set to true to not minify resulting html
          }
        }
      ]
    }
  };
  </code></pre>
  
  <h2>THIS WORKS</h2>
  
  <p><strong>header.pug template</strong></p>
  
  <pre><code>img(inline src="src/images/icons/close-icon.svg")
  </code></pre>
  
  <p><strong>close-icon.svg contents:</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;svg viewBox="0 0 15 15"&gt;
      &lt;path d="m1.3761 1.3683 12.288 12.288m-12.328-0.024469 12.288-12.288" fill="none" stroke="currentColor" stroke-width="2.3272"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>This shows fine.
  However another SVG won't show using the same method:</p>
  
  <h2>SVG CODE COMPILES INTO INDEX.HTML FILE BUT ICON DOESN"T SHOW AND BITS ARE STRIPPED OUT</h2>
  
  <p><strong>search.pug template</strong></p>
  
  <pre><code>img(inline src="src/images/icons/search-icon.svg")
  </code></pre>
  
  <p><strong>search-icon.svg contents:</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;svg class="search__icon" role="img" aria-labelledby="header-search-ico" width="30" height="30" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;title id="header-search-ico"&gt;Search&lt;/title&gt;
  &lt;path d="m13.052 6.4998c-5.2483 8.909e-4 -9.5022 4.2558-9.502 9.5041 8.962e-4 5.2476 4.2545 9.5012 9.502 9.502 5.2483 2.89e-4 9.5033-4.2536 9.5041-9.502 2.9e-4 -5.2491-4.255-9.5043-9.5041-9.5041zm7.0353 16.224 6.5139 6.6193s0.4042 0.41477-6.5139-6.6193z" fill="none" stroke-linecap="round"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>Resulting html</strong></p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="header-search-ico" class="search__icon" viewBox="0 0 30 30"&gt;
  &lt;path fill="none" d="M13.052 6.5a9.504 9.504 0 1 0 .003 19.007A9.504 9.504 0 0 0 13.052 6.5zm7.035 16.224l6.514 6.62s.404.414-6.514-6.62z"&gt;&lt;/path&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>So the <code>&lt;title&gt;</code> tag and below attributes are getting stripped out plus the path looks screwed up. Does anybody have any experience using inline SVGs in pug templates using webpack?</p>
  
  <ul>
  <li>role </li>
  <li>width</li>
  <li>height</li>
  <li>stroke-linecap</li>
  </ul>