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

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

@@ -29,6 +29,7 @@ async function processFile(file, {prefix, fullName} = {}) {
     plugins: extendDefaultPlugins([
       'removeXMLNS',
       'removeDimensions',
+      {name: 'prefixIds', params: {prefix: () => name}},
       {
         name: 'addClassesToSVGElement',
         params: {classNames: ['svg', name]},