Stop classes from being deleted

[Spomsoree]

I've got a problem with an SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
     viewBox="3.000001907348633 3 14 14">
    <g fill="none" fill-rule="evenodd">
        <g class="color" fill="#00ff00">
            <path
                d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"
                transform="translate(-1115.000000, -334.000000) translate(430.000000, 314.000000) translate(19.496462, 15.000000) translate(655.503538, 0.000000) translate(10.000000, 5.000000) translate(3.000000, 3.000000)">
            </path>
        </g>
    </g>
</svg>

I set a class="color" to be able to change the color via css later on.

After optimizing the class is missing:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="3 3 14 14"><path d="M17 4.41L15.59 3 10 8.59 4.41 3 3 4.41 8.59 10 3 15.59 4.41 17 10 11.41 15.59 17 17 15.59 11.41 10z" fill="#0f0" fill-rule="evenodd"/></svg>

Other attributes have moved to the path, but not the class.
I'm not able to find an option/plugin to avoid that.

It does work as expected if the original SVG looks like this (class in path):

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
     viewBox="3.000001907348633 3 14 14">
    <g fill="none" fill-rule="evenodd">
        <g fill="#00ff00">
            <path class="color"
                  d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"
                  transform="translate(-1115.000000, -334.000000) translate(430.000000, 314.000000) translate(19.496462, 15.000000) translate(655.503538, 0.000000) translate(10.000000, 5.000000) translate(3.000000, 3.000000)">
            </path>
        </g>
    </g>
</svg>

will result in:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="3 3 14 14"><path class="color" d="M17 4.41L15.59 3 10 8.59 4.41 3 3 4.41 8.59 10 3 15.59 4.41 17 10 11.41 15.59 17 17 15.59 11.41 10z" fill="#0f0" fill-rule="evenodd"/></svg>

Is there a way to keep the class attribute independent on its position?

[SethFalco]

@Spomsoree

Could you please share the configuration you used to produce this output? I'm unable to reproduce that behavior using the default preset with SVGO v3.0.2 or v3.0.3

Generally speaking, you'd probably want to use fill="currentcolor" for this use-case though rather than add a class attribute.

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
     viewBox="3.000001907348633 3 14 14">
    <g fill="none" fill-rule="evenodd">
        <g fill="currentcolor">
            <path
                d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"
                transform="translate(-1115.000000, -334.000000) translate(430.000000, 314.000000) translate(19.496462, 15.000000) translate(655.503538, 0.000000) translate(10.000000, 5.000000) translate(3.000000, 3.000000)">
            </path>
        </g>
    </g>
</svg>

By doing this, it defaults to black, and inherits the foreground color of its parent. In HTML, this would be the color style of the parent node. This is a much better way to handle colors in SVGs, and is what icon fonts like Font Awesome do.

Demo

Original

Optimized