Moving svg style properties inline

Question

In Mapbox Studio, svg images with color are imported as black and white. According to the troubleshooting website:

If you are able to add your SVG to Mapbox Studio, but appears black, it’s likely because you are using tags to assign style properties rather than using inline style attributes. Mapbox Studio does not support style properties added in tags.

I am new to editing svgs - how would one assign style properties inline?

My svg code is below:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.56 28.71">
    <defs>
        <style>
            .cls-1{fill:#f15824;}
        </style>
    </defs>
    <title>black_only_v3</title>
    <g id="svg_9" data-name="svg 9">
        <g id="svg_5" data-name="svg 5">
            <g id="svg_6" data-name="svg 6">
                <path id="svg_7" data-name="svg 7" d="M1.55,15.54C2.71,19,5.46,24,12,28.71,18.56,24,21.3,19,22.45,15.54a11.23,11.23,0,0,0,.83-4.14.59.59,0,0,0,0-.12h0a11.28,11.28,0,1,0-22.56,0s0,0,0,.12A11.19,11.19,0,0,0,1.55,15.54ZM12,2.79a8.7,8.7,0,1,1-8.7,8.7A8.69,8.69,0,0,1,12,2.79Z" transform="translate(-0.72 0)"/>
            </g>
        </g>
        <polygon id="svg_8" data-name="svg 8" class="cls-1" points="11.31 8.14 4.42 11.58 9.59 11.58 11.31 15.03 18.19 11.58 13.03 11.58 11.31 8.14"/>
    </g>
</svg>

Answer 1

Probably this will be OK:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.56 28.71"><path d="M.83 15.54C1.99 19 4.74 24 11.28 28.71 17.84 24 20.58 19 21.73 15.54a11.23 11.23 0 0 0 .83-4.14.59.59 0 0 0 0-.12 11.28 11.28 0 1 0-22.56 0v.12a11.19 11.19 0 0 0 .83 4.14zM11.28 2.79a8.7 8.7 0 1 1-8.7 8.7 8.69 8.69 0 0 1 8.7-8.7z"/><path fill="#f15824" d="M11.31 8.14l-6.89 3.44h5.17l1.72 3.45 6.88-3.45h-5.16l-1.72-3.44z"/></svg>