build: Bring SVGO optimization to build step

Enabling SVGO automation with 'grunt-svgmin' and conservative
plugin settings to build step, among those:
- enable removeRasterImages and sortAttrs,
- disable cleanupIDs, removeDesc, removeTitle, removeViewBox &
  removeXMLProcInst and
- make use of pretty and multipass options.

Also updating SVGs accordingly.

Bug: T185596
Change-Id: Iec947431b3549e9f1fa1eaba58340aef96c0647b
This commit is contained in:
Volker E 2018-02-12 09:13:51 -08:00
parent 0c8d05839a
commit e3007e9484
14 changed files with 68 additions and 30 deletions

View file

@ -13,6 +13,8 @@ module.exports = function ( grunt ) {
grunt.loadNpmTasks( 'grunt-eslint' );
grunt.loadNpmTasks( 'grunt-jsonlint' );
grunt.loadNpmTasks( 'grunt-stylelint' );
grunt.loadNpmTasks( 'grunt-svgmin' );
grunt.initConfig( {
eslint: {
all: [
@ -38,9 +40,44 @@ module.exports = function ( grunt ) {
'!node_modules/**',
'!vendor/**'
]
},
// SVG Optimization
svgmin: {
options: {
js2svg: {
pretty: true,
multipass: true
},
plugins: [ {
cleanupIDs: false
}, {
removeDesc: false
}, {
removeRasterImages: true
}, {
removeTitle: false
}, {
removeViewBox: false
}, {
removeXMLProcInst: false
}, {
sortAttrs: true
} ]
},
all: {
files: [ {
expand: true,
cwd: 'modules/ve-cite/icons',
src: [
'**/*.svg'
],
dest: 'modules/ve-cite/icons/',
ext: '.svg'
} ]
}
}
} );
grunt.registerTask( 'test', [ 'eslint', 'stylelint', 'jsonlint', 'banana' ] );
grunt.registerTask( 'test', [ 'eslint', 'stylelint', 'jsonlint', 'banana', 'svgmin' ] );
grunt.registerTask( 'default', 'test' );
};

View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M14.25 4c-1.033 0-1.875 1.109-2.261 1.822-.411-.713-1.241-1.822-2.26-1.822h-7.729v15h7c.938 0 1.844 1.422 2 2h2c.203-.609.938-2 2-2h7v-15h-7.75zm-3.25 14c-.25-.469-1.203-1-2-1l-4.016.016.008-11.024 4.43-.008c.94 0 1.578 1.178 1.578 2.016v10zm8.016-.984l-4.016-.016c-.734 0-1.719.445-2 1v-10c0-.839.63-2.031 1.594-2.031l4.422.016v11.031z"/>
<path d="M14.25 4c-1.033 0-1.875 1.109-2.261 1.822C11.578 5.109 10.748 4 9.729 4H2v15h7c.938 0 1.844 1.422 2 2h2c.203-.609.938-2 2-2h7V4h-7.75zM11 18c-.25-.469-1.203-1-2-1l-4.016.016.008-11.024 4.43-.008C10.362 5.984 11 7.162 11 8v10zm8.016-.984L15 17c-.734 0-1.719.445-2 1V8c0-.839.63-2.031 1.594-2.031l4.422.016v11.031z"/>
</svg>

Before

Width:  |  Height:  |  Size: 480 B

After

Width:  |  Height:  |  Size: 459 B

View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="journal" d="M5 4v17h12c1 0 2-1 2-2v-15h-14zm12 14c0 1-1 1-1 1h-8v-13h9v12z"/>
<path id="journal" d="M5 4v17h12c1 0 2-1 2-2V4H5zm12 14c0 1-1 1-1 1H8V6h9v12z"/>
<path id="text1" d="M10 9h5v2h-5z"/>
<path id="text2" d="M10 12h5v2h-5z"/>
</svg>

Before

Width:  |  Height:  |  Size: 296 B

After

Width:  |  Height:  |  Size: 298 B

View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="journal" d="M19 4v17h-12c-1 0-2-1-2-2v-15h14zm-12 14c0 1 1 1 1 1h8v-13h-9v12z"/>
<path id="text1" d="M14 9h-5v2h5z"/>
<path id="text2" d="M14 12h-5v2h5z"/>
<path id="journal" d="M19 4v17H7c-1 0-2-1-2-2V4h14zM7 18c0 1 1 1 1 1h8V6H7v12z"/>
<path id="text1" d="M14 9H9v2h5z"/>
<path id="text2" d="M14 12H9v2h5z"/>
</svg>

Before

Width:  |  Height:  |  Size: 299 B

After

Width:  |  Height:  |  Size: 297 B

View file

@ -1,9 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="paper" d="M21 21h-17c-1 0-2-1-2-2v-15h19v17zm-17-15v12.278c0 .397.325.722.722.722h14.28l-.002-13h-15z"/>
<path id="banner" d="M6 8h11v3h-11z"/>
<path id="paper" d="M21 21H4c-1 0-2-1-2-2V4h19v17zM4 6v12.278c0 .397.325.722.722.722h14.28L19 6H4z"/>
<path id="banner" d="M6 8h11v3H6z"/>
<path id="text1" d="M12 12h5v2h-5z"/>
<path id="text2" d="M6 12h5v2h-5z"/>
<path id="text2" d="M6 12h5v2H6z"/>
<path id="text3" d="M12 15h5v2h-5z"/>
<path id="text4" d="M6 15h5v2h-5z"/>
<path id="text4" d="M6 15h5v2H6z"/>
</svg>

Before

Width:  |  Height:  |  Size: 440 B

After

Width:  |  Height:  |  Size: 441 B

View file

@ -1,9 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="paper" d="M2 21h17c1 0 2-1 2-2v-15h-19v17zm17-15v12.278c0 .397-.325.722-.722.722h-14.28l.002-13h15z"/>
<path id="banner" d="M17 8h-11v3h11z"/>
<path id="text1" d="M11 12h-5v2h5z"/>
<path id="paper" d="M2 21h17c1 0 2-1 2-2V4H2v17zM19 6v12.278a.724.724 0 0 1-.722.722H3.998L4 6h15z"/>
<path id="banner" d="M17 8H6v3h11z"/>
<path id="text1" d="M11 12H6v2h5z"/>
<path id="text2" d="M17 12h-5v2h5z"/>
<path id="text3" d="M11 15h-5v2h5z"/>
<path id="text3" d="M11 15H6v2h5z"/>
<path id="text4" d="M17 15h-5v2h5z"/>
</svg>

Before

Width:  |  Height:  |  Size: 441 B

After

Width:  |  Height:  |  Size: 444 B

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="laptop" d="M22.78 18.46L21 16V4H3v12l-1.757 2.463c-.252.286-.314.695-.157 1.043.157.347.533.494.914.494h20c.382 0 .783-.148.94-.496.156-.348.093-.758-.16-1.044zM4 18l1-2V6h14v10l1 2H4z"/>
<path id="laptop" d="M22.78 18.46L21 16V4H3v12l-1.757 2.463a.974.974 0 0 0-.157 1.043c.157.347.533.494.914.494h20c.382 0 .783-.148.94-.496a.976.976 0 0 0-.16-1.044zM4 18l1-2V6h14v10l1 2H4z"/>
<path id="window" d="M7 16h10V8H7v8zm2-2v-3h6v3H9z"/>
</svg>

Before

Width:  |  Height:  |  Size: 384 B

After

Width:  |  Height:  |  Size: 384 B

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="fore-reference" d="M7 5v17h12c1 0 2-1 2-2v-15h-14zm12 14c0 1-1 1-1 1h-8v-13h2v6l2-2 2 2v-6h3v12z"/>
<path id="back-reference" d="M5 18h-.3c-1.5 0-2.7-1.2-2.7-2.7v-13.5h3v16.2zM2 1h16v2h-16z"/>
<path id="fore-reference" d="M7 5v17h12c1 0 2-1 2-2V5H7zm12 14c0 1-1 1-1 1h-8V7h2v6l2-2 2 2V7h3v12z"/>
<path id="back-reference" d="M5 18h-.3C3.2 18 2 16.8 2 15.3V1.8h3V18zM2 1h16v2H2z"/>
</svg>

Before

Width:  |  Height:  |  Size: 335 B

After

Width:  |  Height:  |  Size: 326 B

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="fore-reference" d="M17 5v17h-12c-1 0-2-1-2-2v-15h14zm-12 14c0 1 1 1 1 1h8v-13h-2v6l-2-2-2 2v-6h-3v12z"/>
<path id="back-reference" d="M19 18h.3c1.5 0 2.7-1.2 2.7-2.7v-13.5h-3v16.2zm3-17h-16v2h16z"/>
<path id="fore-reference" d="M17 5v17H5c-1 0-2-1-2-2V5h14zM5 19c0 1 1 1 1 1h8V7h-2v6l-2-2-2 2V7H5v12z"/>
<path id="back-reference" d="M19 18h.3c1.5 0 2.7-1.2 2.7-2.7V1.8h-3V18zm3-17H6v2h16z"/>
</svg>

Before

Width:  |  Height:  |  Size: 341 B

After

Width:  |  Height:  |  Size: 331 B

View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M5 4v17h12c1 0 2-1 2-2v-15h-14zm12 14c0 1-1 1-1 1h-8v-13h2v6l2-2 2 2v-6h3v12z"/>
<path d="M5 4v17h12c1 0 2-1 2-2V4H5zm12 14c0 1-1 1-1 1H8V6h2v6l2-2 2 2V6h3v12z"/>
</svg>

Before

Width:  |  Height:  |  Size: 221 B

After

Width:  |  Height:  |  Size: 216 B

View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 4v17h-12c-1 0-2-1-2-2v-15h14zm-12 14c0 1 1 1 1 1h8v-13h-2v6l-2-2-2 2v-6h-3v12z"/>
<path d="M19 4v17H7c-1 0-2-1-2-2V4h14zM7 18c0 1 1 1 1 1h8V6h-2v6l-2-2-2 2V6H7v12z"/>
</svg>

Before

Width:  |  Height:  |  Size: 226 B

After

Width:  |  Height:  |  Size: 219 B

View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M3 6v12h4v-12h-4zm3 10h-2v-1h2v1zm0-3h-2v-1h2v1zm2-7v12h4v-12h-4zm3 10h-2v-1h2v1zm0-3h-2v-1h2v1zm.934-5.353l6.066 10.353 3.449-2.021-6.065-10.354-3.45 2.022zm7.643 7.111l-1.726 1.012-.506-.862 1.725-1.012.507.862zm-1.517-2.588l-1.725 1.011-.506-.862 1.726-1.012.505.863z"/>
<path d="M3 6v12h4V6H3zm3 10H4v-1h2v1zm0-3H4v-1h2v1zm2-7v12h4V6H8zm3 10H9v-1h2v1zm0-3H9v-1h2v1zm.934-5.353L18 18l3.449-2.021-6.065-10.354-3.45 2.022zm7.643 7.111l-1.726 1.012-.506-.862 1.725-1.012.507.862zM18.06 12.17l-1.725 1.011-.506-.862 1.726-1.012.505.863z"/>
</svg>

Before

Width:  |  Height:  |  Size: 414 B

After

Width:  |  Height:  |  Size: 399 B

View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M21.449 6v12h-4v-12h4zm-3 10h2v-1h-2v1zm0-3h2v-1h-2v1zm-2-7v12h-4v-12h4zm-3 10h2v-1h-2v1zm0-3h2v-1h-2v1zm-.934-5.353l-6.066 10.353-3.449-2.021 6.065-10.354 3.45 2.022zm-7.643 7.111l1.726 1.012.506-.862-1.725-1.012-.507.862zm1.517-2.588l1.725 1.011.506-.862-1.726-1.012-.505.863z"/>
<path d="M21.449 6v12h-4V6h4zm-3 10h2v-1h-2v1zm0-3h2v-1h-2v1zm-2-7v12h-4V6h4zm-3 10h2v-1h-2v1zm0-3h2v-1h-2v1zm-.934-5.353L6.449 18 3 15.979 9.065 5.625l3.45 2.022zm-7.643 7.111l1.726 1.012.506-.862-1.725-1.012-.507.862zm1.517-2.588l1.725 1.011.506-.862-1.726-1.012-.505.863z"/>
</svg>

Before

Width:  |  Height:  |  Size: 422 B

After

Width:  |  Height:  |  Size: 412 B

View file

@ -13,6 +13,7 @@
"grunt-eslint": "20.1.0",
"grunt-jsonlint": "1.1.0",
"grunt-stylelint": "0.9.0",
"grunt-svgmin": "5.0.0",
"stylelint": "8.2.0",
"stylelint-config-wikimedia": "0.4.2"
}