Create arcs with thickness

[JohanWinther]

Climate action

I am working at CarbonCloud, a SaaS company working on climate action. Our product is a tool for calculating the climate footprint of food products. In the end our customers (food producers) get a "climate label" which they will print on their packaging and show in their online reports. Here is what one such label could look like:

The issue

The thin ring and the thick ring are both drawn in segments using the arc2d function and then the stroke attribute is applied with a rounded line-cap. The thick ring is actually made up of two identical arcs with different stroke widths applied. All this content is then used as a mask for a colored rectangle in order to get a transparent background.

The issue is that masks are rasterized when converting to EPS (for printing) so we want to avoid masks. But to do that I need to be able to create the stroked path as a closed fill path instead.

Is it possible to combine 4 arcs in order to create an arc segment with a width?

Stripped SVG output with the relevant arc segment parts

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
    <defs id="defs4">
        <mask id="content" style="font-family:Poppins, sans-serif">
            <g color="#ffffff" fill="#ffffff" id="g88">
                <path id="rect6" style="fill:#000000" d="M 0,0 H 1000 V 1000 H 0 Z" />
                <g id="g22">
                    <path d="M 223.23871,320.26912 A 330,330 0 0 1 482.72913,170.45225" stroke="#ffffff"
                        stroke-width="18.15" fill="none" stroke-linecap="round" id="path10" />
                    <path d="m 205.96785,649.81686 a 330,330 0 0 1 0,-299.63372" stroke="#ffffff" stroke-width="18.15"
                        fill="none" stroke-linecap="round" id="path12" />
                    <path d="M 482.72913,829.54775 A 330,330 0 0 1 223.23871,679.73088" stroke="#ffffff"
                        stroke-width="18.15" fill="none" stroke-linecap="round" id="path14" />
                    <path d="M 776.76129,679.73088 A 330,330 0 0 1 517.27087,829.54775" stroke="#ffffff"
                        stroke-width="18.15" fill="none" stroke-linecap="round" id="path16" />
                    <path d="m 794.03215,350.18314 a 330,330 0 0 1 0,299.63372" stroke="#ffffff" stroke-width="18.15"
                        fill="none" stroke-linecap="round" id="path18" />
                    <path d="M 517.27087,170.45225 A 330,330 0 0 1 776.76129,320.26912" stroke="#ffffff"
                        stroke-width="18.15" fill="none" stroke-linecap="round" id="path20" />
                </g>
                <g id="g54">
                    <g id="g28">
                        <path d="M 214.21162,665 A 330,330 0 0 1 178.71896,424.64421" stroke="#000000"
                            stroke-width="86.625" fill="none" stroke-linecap="round" id="path24" />
                        <path d="M 214.21162,665 A 330,330 0 0 1 178.71896,424.64421" stroke="#ffffff"
                            stroke-width="61.875" fill="none" stroke-linecap="round" id="path26" />
                    </g>
                    <g id="g34">
                        <path d="M 500,830 A 330,330 0 0 1 214.21162,665" stroke="#000000" stroke-width="86.625"
                            fill="none" stroke-linecap="round" id="path30" />
                        <path d="M 500,830 A 330,330 0 0 1 214.21162,665" stroke="#ffffff" stroke-width="61.875"
                            fill="none" stroke-linecap="round" id="path32" />
                    </g>
                    <g id="g40">
                        <path d="M 785.78838,665 A 330,330 0 0 1 500,830" stroke="#000000" stroke-width="86.625"
                            fill="none" stroke-linecap="round" id="path36" />
                        <path d="M 785.78838,665 A 330,330 0 0 1 500,830" stroke="#ffffff" stroke-width="61.875"
                            fill="none" stroke-linecap="round" id="path38" />
                    </g>
                    <g id="g46">
                        <path d="m 785.78838,335 a 330,330 0 0 1 0,330" stroke="#000000" stroke-width="86.625"
                            fill="none" stroke-linecap="round" id="path42" />
                        <path d="m 785.78838,335 a 330,330 0 0 1 0,330" stroke="#ffffff" stroke-width="61.875"
                            fill="none" stroke-linecap="round" id="path44" />
                    </g>
                    <g id="g52">
                        <path d="M 500,170 A 330,330 0 0 1 785.78838,335" stroke="#000000" stroke-width="86.625"
                            fill="none" stroke-linecap="round" id="path48" />
                        <path d="M 500,170 A 330,330 0 0 1 785.78838,335" stroke="#ffffff" stroke-width="61.875"
                            fill="none" stroke-linecap="round" id="path50" />
                    </g>
                </g>
            </g>
        </mask>
    </defs>
    <rect mask="url(#content)" x="0" y="0" width="1000" height="1000" fill="#c40000"></rect>
</svg>