If you use classes or IDs, either to define styles or to link to other parts of the SVG within the SVG, problems can occur if an SVG control is used several times in the project.

The problem arises because the SVG content is also loaded several times in the browser/viewer when using several control elements, resulting in multiple definitions of one and the same class or ID.

To prevent this, you can add the prefix “_elementid_” to classes and ID names.

This prefix is automatically replaced at runtime by the unique ID of each control element.

This results in unique classes and ID names for each individual control element.

Here is an excerpt of a syntax as an example:

<g>
        <defs>
    <radialGradient id="_elementid_c1" cx="0.5" cy="0.5" r="0.5">
        <stop offset="0" stop-color="#F7F7F7"></stop>
        <stop offset=".5" stop-color="#C0C0C0"></stop>
        <stop offset="1" stop-color="#898989"></stop>
    </radialGradient>
     <linearGradient id="_elementid_c2" x1="0" y1="0.5" x2="1.2" y2="0.6">
        <stop offset="0" stop-color="#F7F7F7"></stop>
        <stop offset=".5" stop-color="#C0C0C0"></stop>
        <stop offset="1" stop-color="#898989"></stop>
    </linearGradient>
    <linearGradient id="_elementid_c3" x1="0" y1="0.5" x2="1.2" y2="0.6">
        <stop offset="0" stop-color="#FF0000"></stop>
        <stop offset=".3" stop-color="#F2F2F2"></stop>
        <stop offset=".4" stop-color="#FFFFFF"></stop>
    </linearGradient>
</defs>