From 56ab5ec9eabbe1ddbbab195bd40360db0d5a4cb0 Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Thu, 9 Sep 2021 11:47:28 +0200 Subject: [PATCH] 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. --- build/generate-svg.js | 1 + public/img/svg/gitea-github.svg | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/build/generate-svg.js b/build/generate-svg.js index 72c3be3cbdb7..cde3f3110603 100755 --- a/build/generate-svg.js +++ b/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]}, diff --git a/public/img/svg/gitea-github.svg b/public/img/svg/gitea-github.svg index b9c0621749b9..1634cbb119c4 100644 --- a/public/img/svg/gitea-github.svg +++ b/public/img/svg/gitea-github.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file