Giters

posthtml / htmlnano

Modular HTML minifier, built on top of the PostHTML

Home Page:https://htmlnano.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Inline SVG symbols and users nuked

folknor opened this issue · comments

commented

See parcel-bundler/parcel#6629, there's no new information in this ticket description that isn't covered there.

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<svg xmlns="http://www.w3.org/2000/svg">
			<symbol id="logo" viewBox="0 0 512 512">
				<path d="M157.52 272h36.96L176 218.78 157.52 272zM352 256c-13.23 0-24 10.77-24 24s10.77 24 24 24 24-10.77 24-24-10.77-24-24-24zM464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM250.58 352h-16.94c-6.81 0-12.88-4.32-15.12-10.75L211.15 320h-70.29l-7.38 21.25A16 16 0 0 1 118.36 352h-16.94c-11.01 0-18.73-10.85-15.12-21.25L140 176.12A23.995 23.995 0 0 1 162.67 160h26.66A23.99 23.99 0 0 1 212 176.13l53.69 154.62c3.61 10.4-4.11 21.25-15.11 21.25zM424 336c0 8.84-7.16 16-16 16h-16c-4.85 0-9.04-2.27-11.98-5.68-8.62 3.66-18.09 5.68-28.02 5.68-39.7 0-72-32.3-72-72s32.3-72 72-72c8.46 0 16.46 1.73 24 4.42V176c0-8.84 7.16-16 16-16h16c8.84 0 16 7.16 16 16v160z"/>
			</symbol>
		</svg>

		<svg class="logo" width="120" height="120">
			<use xlink:href="#logo" />
		</svg>
	</body>
</html>

htmlnano without using minifySvg: false will

  1. Reduce the first SVG element in the sample to <svg xmlns="http://www.w3.org/2000/svg" />
  2. Remove the second SVG element completely

@mischnic provided a pure node example in the linked ticket:

const htmlnano = require('htmlnano');
const html = `<!DOCTYPE html>
<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="logo" viewBox="0 0 512 512">
        <path d="M157.52 272h36.96"/>
    </symbol>
</svg>

<svg class="logo" width="120" height="120">
    <use xlink:href="#logo" />
</svg>`;
const options = {
    // minifySvg: false
};
const postHtmlOptions = {};

htmlnano
    .process(html, options, htmlnano.presets.safe, postHtmlOptions)
    .then(function (result) {
        console.log(result.html);
    })
    .catch(function (err) {
        console.error(err);
    });

Do you want me to file this ticket in https://github.com/svg/svgo ?

Please let me know if I should, and also if there is any other information I can provide or tests I can run for you.

Thank you!

commented

Sorry for the late reply! I was on vacation.

I found a similar issue: svg/svgo#416 (comment) The proposed solution is to disable removeUselessDefs plugin.

I tried it locally and it seems to work. Can you please confirm that you get the expected result? Then I could disable this plugin in the htmlnano preset.

Here is the code I used:

const htmlnano = require('htmlnano');
const { extendDefaultPlugins } = require('svgo');
const html = `<!DOCTYPE html>
<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="logo" viewBox="0 0 512 512">
        <path d="M157.52 272h36.96"/>
    </symbol>
</svg>

<svg class="logo" width="120" height="120">
    <use xlink:href="#logo" />
</svg>`;
const options = {
    minifySvg: {
        plugins: extendDefaultPlugins([
            { name: 'collapseGroups', active: false },
            { name: 'convertShapeToPath', convertShapeToPath: false },
            { name: 'removeUselessDefs', active: false },
        ]),
    }
};
const postHtmlOptions = {};

htmlnano
    .process(html, options, htmlnano.presets.safe, postHtmlOptions)
    .then(function (result) {
        console.log(result.html);
    })
    .catch(function (err) {
        console.error(err);
    });
commented

I tried it locally and it seems to work. Can you please confirm that you get the expected result?

No, unfortunately. When I modify .htmlnanorc like so;

{
	"minifySvg": {
		"plugins": [
			{
				"name": "removeUselessDefs",
				"active": false
			}
		]
	}
}

OR like this:

{
	"minifySvg": {
		"plugins": [
			{
				"name": "removeUselessDefs",
				"active": false
			},
			{
				"name": "collapseGroups",
				"active": false
			},
			{
				"name": "convertShapeToPath",
				"convertShapeToPath": false
			}
		]
	}
}

This part of the HTML is still removed:

<svg class="logo" width="120" height="120">
    <use xlink:href="#logo" />
</svg>

And I'm 100% certain that .htmlnanorc is parsed into the config used by parcel, because without removeUselessDefs everything is nuked. And if I put this in it

{
	"minifySvg": false
}

Everything is kept.

commented

The bug has been fixed in parcel-bundler/parcel@f3a51dd and released in v2.0.0-rc.0 version.