From cd78c30fd30231f9fe058231cfce6d7207071e89 Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Thu, 9 Sep 2021 09:06:54 +0200 Subject: [PATCH] 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. --- 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 f1704712f3f..29b7d476938 100755 --- a/build/generate-svg.js +++ b/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'}]}}, ], diff --git a/public/img/svg/gitea-github.svg b/public/img/svg/gitea-github.svg index b9c0621749b..1634cbb119c 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