Use filename as id/class prefix. (#16997)

Currently the svg minifier (`make svg`) rewrites all `id` and `class` attributes in svg files. Every file gets the ids `a, b, ...`. If multiple svgs with ids are used on a page these ids are conflicting and the results are broken images.

| minified ids | unique ids |
| - | - |
| ![grafik](https://user-images.githubusercontent.com/1666336/132579375-59d3996f-c4e5-43b8-8c8d-82280c90d9e3.png) | ![grafik](https://user-images.githubusercontent.com/1666336/132579413-05bf9285-4e3b-4d0d-8f95-90b212405b05.png) |

This PR adds a prefix (the filename) to every id/class.

Follow up problem: Because we embed svg images there are duplicated ids if one svg image is used multiple times on a page. As those ids refer to the same content it may be no real problem because browser handle that fine.

Author: KN4CK3R

build/generate-svg.js

@@ -30,6 +30,7 @@ async function processFile(file, {prefix, fullName} = {}) {
       {name: 'preset-default'},
       {name: 'removeXMLNS'},
       {name: 'removeDimensions'},
+      {name: 'prefixIds', params: {prefix: () => name}},
       {name: 'addClassesToSVGElement', params: {classNames: ['svg', name]}},
       {name: 'addAttributesToSVGElement', params: {attributes: [{'width': '16'}, {'height': '16'}, {'aria-hidden': 'true'}]}},
     ],