Problem with duplicate ids in DOM

[codiflow]

Hey there,

great library, thanks for that. Unfortunately your plugin uses the Kirby helper function svg which includes the svg files as inline svgs. This leads to duplicate ids in the browsers DOM as every badge svg comes with id="a" and id="b" included.

I think there are two ways to circumvent this:

1. Add a custom identifier before every id - maybe automatically generated from the badge content
2. Generate the badges as "files" and just link them like Github does:

<img src="https://camo.githubusercontent.com/0ae58c5e484df624d53cd5989d42c089bb4b5a48/68747470733a2f2f706f7365722e707567782e6f72672f6261646765732f706f7365722f76657273696f6e2e737667" alt="Latest Stable Version" data-canonical-src="https://poser.pugx.org/badges/poser/version.svg" style="max-width:100%;">

What would you say on that?

Regards
codiflow

[codiflow]

Small and dirty fix for the problem:

Edit file /site/plugins/kirby3-badges-master/src/badges.php and add the following code before the line return $divPrefix . $image . '</div>';:

$identifier = uniqid();
$image = str_replace("url(#a)", "url(#" . $identifier . "-a)", $image);
$image = str_replace("url(#b)", "url(#" . $identifier . "-b)", $image);
$image = str_replace("id=\"a\"", "id=\"" . $identifier . "-a\"", $image);
$image = str_replace("id=\"b\"", "id=\"" . $identifier . "-b\"", $image);