Merge pull request #503 from return42/fix-svg

[fix] ] Optimize SVG for WEB usage / CSP 'style-src self'

searx/static/themes/simple/.eslintrc.json

@@ -1,7 +1,8 @@
 {
     "env": {
         "browser": true,
-        "es2021": true
+        "es2021": true,
+        "node": true
     },
     "extends": "eslint:recommended",
     "parserOptions": {

searx/static/themes/simple/gruntfile.js

@@ -9,7 +9,7 @@ module.exports = function(grunt) {
     watch: {
       scripts: {
         files: ['gruntfile.js', 'src/**'],
-        tasks: ['eslint', 'copy', 'concat', 'svg2jinja', 'uglify', 'htmlmin', 'less:development', 'less:production']
+        tasks: ['eslint', 'copy', 'concat', 'svg2jinja', 'uglify', 'image', 'less:development', 'less:production']
       }
     },
     eslint: {
@@ -18,6 +18,7 @@ module.exports = function(grunt) {
         failOnError: false
       },
       target: [
+        'svg4web.svgo.js',
         'src/js/main/*.js',
         'src/js/head/*.js',
         '../__common__/js/*.js'
@@ -95,11 +96,10 @@ module.exports = function(grunt) {
         }
       }
     },
-    htmlmin: {
+    image: {
-      dist: {
+      svg4web: {
         options: {
-          removeComments: true,
+          svgo: ['--config', 'svg4web.svgo.js']
-          collapseWhitespace: true
         },
         files: {
           '../../../templates/__common__/searxng-wordmark.min.svg': 'src/svg/searxng-wordmark.svg'
@@ -221,7 +221,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-contrib-htmlmin');
+  grunt.loadNpmTasks('grunt-image');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-less');
@@ -238,7 +238,7 @@ module.exports = function(grunt) {
     'concat',
     'svg2jinja',
     'uglify',
-    'htmlmin',
+    'image',
     'less:development',
     'less:production'
   ]);

searx/static/themes/simple/package.json

@@ -9,10 +9,10 @@
     "grunt-contrib-less": "~3.0.0",
     "grunt-contrib-uglify": "~5.0.1",
     "grunt-xmlmin": "~0.1.8",
-    "grunt-contrib-htmlmin": "~3.1.0",
     "grunt-contrib-watch": "~1.1.0",
     "grunt-eslint": "^23.0.0",
     "grunt-stylelint": "^0.16.0",
+    "grunt-image": "^6.4.0",
     "ionicons": "^5.5.4",
     "less": "^4.1.1",
     "less-plugin-clean-css": "^1.5.1",

searx/static/themes/simple/svg4web.svgo.js

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * svgo config: Optimize SVG for WEB usage
+ */
+
+module.exports = {
+  plugins: [
+    {
+      name: 'preset-default',
+    },
+    // make diff friendly
+    'sortAttrs',
+    // Optimize SVG for WEB usage
+    'convertStyleToAttrs',
+    'removeXMLNS'
+ ],
+};

searx/templates/__common__/searxng-wordmark.min.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg8" version="1.1" viewBox="0 0 92 92" height="92mm" width="92mm"><defs id="defs2"/><metadata id="metadata5"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title></dc:title></cc:Work></rdf:RDF></metadata><g transform="translate(-40.921303,-17.416526)" id="layer1"><circle r="0" style="fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cy="92" cx="75" id="path3713"/><circle r="30" cy="53.902557" cx="75.921303" id="path834" style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><path d="m 67.514849,37.91524 a 18,18 0 0 1 21.051475,3.312407 18,18 0 0 1 3.137312,21.078282" id="path852" style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><rect transform="rotate(-46.234709)" ry="1.8669105e-13" y="122.08995" x="3.7063529" height="39.963303" width="18.846331" id="rect912" style="opacity:1;fill:#3050ff;fill-opacity:1;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/></g></svg>
+<svg width="92mm" height="92mm" viewBox="0 0 92 92"><g transform="translate(-40.921 -17.417)"><circle cx="75.921" cy="53.903" r="30" fill="none" fill-opacity="1" stroke="#3050ff" stroke-width="10" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/><path d="M67.515 37.915a18 18 0 0 1 21.051 3.313 18 18 0 0 1 3.138 21.078" fill="none" fill-opacity="1" stroke="#3050ff" stroke-width="5" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/><rect width="18.846" height="39.963" x="3.706" y="122.09" ry="0" transform="rotate(-46.235)" opacity="1" fill="#3050ff" fill-opacity="1" stroke="none" stroke-width="8" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/></g></svg>