SVG Chess Fonts are not Solid - svg

I convert PGN chess pieces into SVG files then load them up into Glyphr Studio that makes a .OTF file so that I use then in various chess programs.
Unfortunately after installing the font the white pieces are all transparent instead of being a solid white piece.
Could someone have a look at my code to see why I have this problem, this is the white rook.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="315.000000pt" height="271.000000pt" viewBox="0 0 315.000000 271.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,271.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M387 2423 c-4 -3 -7 -386 -7 -850 l0 -843 -57 -26 c-67 -29 -126 -82
-155 -138 -29 -57 -36 -173 -13 -233 24 -63 94 -135 158 -164 l52 -24 1205 0
c1161 0 1207 1 1254 19 200 77 252 338 95 481 -24 23 -70 51 -101 64 l-58 23
-2 847 -3 846 -305 0 -305 0 -3 -162 -2 -163 -130 0 -130 0 -2 163 -3 162
-305 0 -305 0 -3 -162 -2 -163 -130 0 -130 0 -2 163 -3 162 -301 3 c-165 1
-303 -1 -307 -5z m473 -298 l0 -165 270 0 270 0 0 165 0 165 170 0 170 0 0
-165 0 -165 270 0 270 0 0 165 0 165 170 0 170 0 0 -780 0 -780 -1050 0 -1050
0 0 780 0 780 170 0 170 0 0 -165z m1912 -1562 c118 -54 118 -202 0 -256 l-47
-22 -1150 0 -1150 0 -47 22 c-57 26 -88 71 -88 128 0 46 28 98 62 116 70 38
70 38 1238 36 l1135 -2 47 -22z"/>
</g>
</svg>

Related

Parse mutilple children attributes of element using cheerio in NodeJs

I have svg file that looks like this
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="300.000000pt" height="226.000000pt" viewBox="0 0 300.000000 226.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,226.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M891 2162 c-95 -33 -418 -606 -616 -1092 -75 -185 -106 -330 -70 -67 -2 3 7 36 19 75 13
27 67 2 -3 -7 -36 -19 -75z"/>
<path d="M1316 2019 c-33 -39 -8035 -57 -37 -58 -82 -59 -25 0 -55 -2 -66 -4 -11 -2 -58 -8 -104
-15 -158 -22 -330 -77 -315 -101 10 -17 85 -5 311 51 -12 -15 -27z"/>
<path d="M925 1349 c-4 -6 -5 -12 -2 -15 2 -3 7 2 10 11 7 17 1 20 -8 4z"/>
</g>
</svg>
I want to get d attribute of each path element and combine it in one svg path string (that consists of all three paths )
I've tried this buy only get first one every time
fs.readFile(path_to_svg,'utf8',(err,data)=>{
if(err) console.log(err);
$ = cheerio.load(data,{ xmlMode : true });
$('svg').children().each(function(i,path){
console.log($('path').attr('d'))
});
});

You can get those with:
$('svg path').get().map(path => $(path).attr('d'))

Material-ui : SvgIcon issues with some paths

I would like to use SvgIcon like that :
const iconsSVG = {
// WORKING
"PS1": "M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.76.814.76 1.505v5.876c2.441 1.193 4.362-.002 4.362-3.153 0-3.237-1.126-4.675-4.438-5.827-1.307-.448-3.728-1.186-5.391-1.502h-.002zm4.656 16.242l6.296-2.275c.715-.258.826-.625.246-.818-.586-.192-1.637-.139-2.357.123l-4.205 1.499v-2.385l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.785.029 5.437.661 1.848.601 2.041 1.472 1.576 2.072s-1.622 1.036-1.622 1.036l-8.544 3.107v-2.297l.02-.023zM1.808 18.6c-1.9-.545-2.214-1.668-1.352-2.321.801-.585 2.159-1.051 2.159-1.051l5.616-2.013v2.313L4.206 17c-.705.271-.825.632-.239.826.586.195 1.637.15 2.343-.12L8.248 17v2.074c-.121.029-.256.044-.391.073-1.938.331-3.995.196-6.037-.479l-.012-.068z",
"PS2": "M7.46 13.779v.292h4.142v-3.85h3.796V9.93h-4.115v3.85zm16.248-3.558v1.62h-7.195v2.23H24v-.292h-7.168v-1.646H24V9.929h-7.487v.292zm-16.513 0v1.62H0v2.23h.292v-1.938H7.46V9.929H0v.292Z",
"PS3": "M15.363 9.438h-3.148c-.97 0-1.447.6-1.447 1.38v2.366c0 .483-.228.83-.71.83H7.304c-.02 0-.035.017-.035.035v.47c0 .02.01.032.03.032h3.11c.97 0 1.45-.597 1.45-1.377V10.81c0-.484.225-.832.71-.832h2.782c.02 0 .04-.014.04-.033V9.47c0-.02-.02-.035-.04-.035zm-9.267 0H.038c-.022 0-.038.017-.038.035v.477c0 .02.016.036.038.036h5.694c.48 0 .71.347.71.83s-.228.83-.71.83H1.228c-.7 0-1.227.587-1.227 1.366v1.513c0 .02.02.037.04.037h1.03c.02 0 .04-.016.04-.037v-1.513c0-.48.28-.82.68-.82H6.1c.97 0 1.444-.595 1.444-1.375 0-.778-.473-1.38-1.442-1.38zm17.454 2.498c-.015-.015-.015-.04 0-.056.3-.25.45-.627.45-1.062 0-.778-.474-1.38-1.446-1.38h-6.057c-.02 0-.036.018-.036.038v.475c0 .02.02.04.04.04h5.7c.48 0 .715.35.715.83s-.23.83-.712.83h-5.7c-.02 0-.036.02-.036.04v.48c0 .02.016.034.037.034h5.7c.63.007.71.62.71.93v.06c0 .485-.23.833-.71.833h-5.7c-.02 0-.036.015-.036.034v.477c0 .02.015.037.036.037h6.05c.973 0 1.446-.645 1.446-1.38v-.057c0-.47-.15-.916-.45-1.19z",
// NOT WORKING
"PSP": "M67.5,194 174.4,194 174.4,225.7 71.7,225.7 71.7,253.2 67.5,253.2 67.5,221.5 170.2,221.5 170.2,198.2 67.5,198.2 67.5,194 M307.9,225.7 307.9,253.2 303.7,253.2 303.7,221.5 406.3,221.5 406.3,198.2 303.7,198.2 303.7,194 410.6,194 410.6,225.7 307.9,225.7 M228.9,194 228.9,249 174.4,249 174.4,253.2 233.3,253.2 233.3,198.2 287.8,198.2 287.8,194 228.9,194",
"PC": "M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268 267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2 -462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449 0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 0 1035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273 273 -440 0 -440 0 -273 -273z"
}
// ... some piece of code latter
<SvgIcon>
<path d={iconsSVG["PS3"]} /> // any key of the iconsSVG could be used
</SvgIcon>
However, the "PSP" and "PC" icons aren't displayed and I cannot find out what could be the error when I convert them.
Here are the original files :
PSP icon :
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<path d="M 67.5,194 174.4,194 174.4,225.7 71.7,225.7 71.7,253.2 67.5,253.2 67.5,221.5 170.2,221.5 170.2,198.2 67.5,198.2 67.5,194"></path>
<path d="M 307.9,225.7 307.9,253.2 303.7,253.2 303.7,221.5 406.3,221.5 406.3,198.2 303.7,198.2 303.7,194 410.6,194 410.6,225.7 307.9,225.7"></path>
<path d="M 228.9,194 228.9,249 174.4,249 174.4,253.2 233.3,253.2 233.3,198.2 287.8,198.2 287.8,194 228.9,194"></path>
</svg>
PC icon :
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="640.000000pt" height="407.000000pt" viewBox="0 0 640.000000 407.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,407.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268
267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2
-462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z"/>
<path d="M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449
0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 0
1035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273
273 -440 0 -440 0 -273 -273z"/>
</g>
</svg>
Thanks for the help

PSP and PC icons have 3 and 2 path and viewBox="0 0 500 500" viewBox="0 0 640.000000 407.000000"
This SvgIcon has 1 path and "0 0 24 24" default viewBox
You can specify viewBox prop and path array for your icons but in PC item there is also g tag so it won't be displayed that way
const iconsSVG = {
// WORKING
PS1: {
path: [
"M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.76.814.76 1.505v5.876c2.441 1.193 4.362-.002 4.362-3.153 0-3.237-1.126-4.675-4.438-5.827-1.307-.448-3.728-1.186-5.391-1.502h-.002zm4.656 16.242l6.296-2.275c.715-.258.826-.625.246-.818-.586-.192-1.637-.139-2.357.123l-4.205 1.499v-2.385l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.785.029 5.437.661 1.848.601 2.041 1.472 1.576 2.072s-1.622 1.036-1.622 1.036l-8.544 3.107v-2.297l.02-.023zM1.808 18.6c-1.9-.545-2.214-1.668-1.352-2.321.801-.585 2.159-1.051 2.159-1.051l5.616-2.013v2.313L4.206 17c-.705.271-.825.632-.239.826.586.195 1.637.15 2.343-.12L8.248 17v2.074c-.121.029-.256.044-.391.073-1.938.331-3.995.196-6.037-.479l-.012-.068z",
],
viewBox: "0 0 24 24",
},
PS2: {
path: [
"M7.46 13.779v.292h4.142v-3.85h3.796V9.93h-4.115v3.85zm16.248-3.558v1.62h-7.195v2.23H24v-.292h-7.168v-1.646H24V9.929h-7.487v.292zm-16.513 0v1.62H0v2.23h.292v-1.938H7.46V9.929H0v.292Z",
],
viewBox: "0 0 24 24",
},
PS3: {
path: [
"M15.363 9.438h-3.148c-.97 0-1.447.6-1.447 1.38v2.366c0 .483-.228.83-.71.83H7.304c-.02 0-.035.017-.035.035v.47c0 .02.01.032.03.032h3.11c.97 0 1.45-.597 1.45-1.377V10.81c0-.484.225-.832.71-.832h2.782c.02 0 .04-.014.04-.033V9.47c0-.02-.02-.035-.04-.035zm-9.267 0H.038c-.022 0-.038.017-.038.035v.477c0 .02.016.036.038.036h5.694c.48 0 .71.347.71.83s-.228.83-.71.83H1.228c-.7 0-1.227.587-1.227 1.366v1.513c0 .02.02.037.04.037h1.03c.02 0 .04-.016.04-.037v-1.513c0-.48.28-.82.68-.82H6.1c.97 0 1.444-.595 1.444-1.375 0-.778-.473-1.38-1.442-1.38zm17.454 2.498c-.015-.015-.015-.04 0-.056.3-.25.45-.627.45-1.062 0-.778-.474-1.38-1.446-1.38h-6.057c-.02 0-.036.018-.036.038v.475c0 .02.02.04.04.04h5.7c.48 0 .715.35.715.83s-.23.83-.712.83h-5.7c-.02 0-.036.02-.036.04v.48c0 .02.016.034.037.034h5.7c.63.007.71.62.71.93v.06c0 .485-.23.833-.71.833h-5.7c-.02 0-.036.015-.036.034v.477c0 .02.015.037.036.037h6.05c.973 0 1.446-.645 1.446-1.38v-.057c0-.47-.15-.916-.45-1.19z",
],
viewBox: "0 0 24 24",
},
// NOT WORKING
PSP: {
path: [
"M 67.5,194 174.4,194 174.4,225.7 71.7,225.7 71.7,253.2 67.5,253.2 67.5,221.5 170.2,221.5 170.2,198.2 67.5,198.2 67.5,194",
"M 307.9,225.7 307.9,253.2 303.7,253.2 303.7,221.5 406.3,221.5 406.3,198.2 303.7,198.2 303.7,194 410.6,194 410.6,225.7 307.9,225.7",
"M 228.9,194 228.9,249 174.4,249 174.4,253.2 233.3,253.2 233.3,198.2 287.8,198.2 287.8,194 228.9,194",
],
viewBox: "0 0 500 500",
},
PC: {
path: [
"M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268 267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2 -462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z",
"M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449 0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 01035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273 273 -440 0 -440 0 -273 -273z",
],
viewBox: "0 0 640.000000 407.000000",
},
};
// ... some piece of code latter
function App() {
const type = "PC";
const { viewBox, path } = iconsSVG[type];
return (
<SvgIcon viewBox={viewBox}>
{path.map((d) => (
<path d={d} key={d} />
))}
</SvgIcon>
);
}
You should better save your SVG as simple react components without material SVG then import them and put to an array
your PC file svg code
import React from "react";
export const PCSvg = () => (
<svg
width='24'
height='24'
viewBox="0 0 640.000000 407.000000"
preserveAspectRatio="xMidYMid meet"
>
<g
transform="translate(0.000000,407.000000) scale(0.100000,-0.100000)"
fill="#000000"
stroke="none"
>
<path
d="M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268
267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2
-462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z"
/>
<path
d="M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449
0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 0
1035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273
273 -440 0 -440 0 -273 -273z"
/>
</g>
</svg>
);
Your import code
import { PCSvg } from './PC';
function App() {
return (
<PCSvg />
);
}
export default App;

Combine several SVG <path>

I need to know how to combine multiple from a SVG file.
Right now I have three icons and somehow I can not find any logic behind that.
I read that I need to remove the last part and combine it with the following.
Example:
From
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"/><path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
TO
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437 m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
But the output is empty.
And if I only take one path of both I will see only this path.
Is there any easy explanation how to do that?

If you then take your path:
M54.4 2a54.4 54.4 0 106.2 108.4c9.1 2.2 18.9 3.5 28.3 5.2a40 40 0 0132.4 32.4l35.4 99.7a49.9 49.9 0 0049.2 41.3h210c22 0 41.5-14.4 47.9-35.5l47-155.8c.8-3 .3-6.3-1.5-8.9-2-2.5-4.9-4-8-4H148.2l-7.2-40.3c-7-24.4-13.6-38.3-49.2-48.7A54.2 54.2 0 0054.4 2zm0 20a34.4 34.4 0 110 68.8 34.4 34.4 0 010-68.8zm97.4 182.7h336l-43.1 142.9a29.8 29.8 0 01-28.7 1.3H206c-14.6 0-27-10.4-29.5-24.8z
and multiply it by 10 using: https://yqnn.github.io/svg-path-editor/
You get rid of all decimal notation and make the file even smaller:
M 544 20 a 544 544 90 1 0 62 1084 c 91 22 189 35 283 52 a 400 400 90 0 1 324 324 l 354 1997 a 499 499 90 0 0 492 413 h 2100 c 220 0 415 -144 479 -355 l 470 -1558 c 8 -30 3 -63 -15 -89 c -20 -25 -49 -40 -80 -40 H 1482 l -72 -403 c -70 -244 -136 -383 -492 -487 A 542 542 90 0 0 544 20 z m 0 200 a 344 344 90 1 1 0 688 a 344 344 90 0 1 0 -688 z m 974 1827 h 3360 l -431 1429 a 298 298 90 0 1 -287 213 H 2060 c -146 0 -270 -104 -295 -248 z
The viewBox ofcourse needs to be multiplied as well. As the (default) stroke-width="1"
<svg width="400" viewBox="0 0 5150 3900">
<path d="M544 20a544 544 90 1 0 62 1084c91 22 189 35 283 52a400 400 90 0 1 324 324l354 1997
a499 499 90 0 0 492 413h2100c220 0 415-144 479-355l470-1558c8-30 3-63-15-89
c-20-25-49-40-80-40h-3531l-72-403c-70-244-136-383-492-487a542 542 90 0 0-374-938z
m0 200a344 344 90 1 1 0 688a344 344 90 0 1 0-688z
m974 1827h3360l-431 1429a298 298 90 0 1-287 213h-2100c-146 0-270-104-295-248z"
stroke="red" stroke-width="10" fill="gray"/>
</svg>
You can save 30 bytes more in the path if you now divide everything by 6
M90 3a90 90 90 1 0 10 180c15 4 31 6 47 9a66 66 90 0 1 54 54l59 332a83 83 90 0 0 82 69h349c37 0 69-24 80-59l78-259c1-5 0-10-2-15c-3-4-8-7-13-7h-588l-12-67c-12-41-23-64-82-81a90 90 90 0 0-62-156zm0 33a57 57 90 1 1 0 114a57 57 90 0 1 0-114zm162 303h558l-72 237a49 49 90 0 1-48 35h-348c-24 0-45-17-49-41z

You can visualize your paths if you put them in a suitable <svg> element. It needs to have a "sensible" viewBox attribute in it. For your example the following works: <svg viewBox="0 0 620 840">. I also added two rectangles (<rect>) to show the extent of your overlaying symbols.
Note: To actually combine two paths into one is a slightly more complex task. This can be done with a suitable graphical SVG-editor, like Inkscape (or many others ...).
<svg viewBox="0 0 620 840">
<rect x="0" y="0" width="480" height="440" style="stroke:black;fill:none"/>
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"/><path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
<rect x="80" y="300" width="540" height="440" style="stroke:black;fill:none"/>
<g style="fill:none;stroke:red">
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437 m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
</g>
</svg>
I combined the two paths of your second part using Inkscape, put it through the online SVG optimizer SVGOMG! (thanks for the hint, Danny '365CSI' Engelman) and ended up with this:
<svg xmlns="http://www.w3.org/2000/svg"
width="400" viewBox="-1 0 515 390">
<path d="M54.4 2a54.4 54.4 0 106.2 108.4
c9.1 2.2 18.9 3.5 28.3 5.2
a40 40 0 0132.4 32.4l35.4 199.7a49.9 49.9 0 0049.2 41.3
h210c22 0 41.5-14.4 47.9-35.5l47-155.8
c.8-3 .3-6.3-1.5-8.9-2-2.5-4.9-4-8-4H148.2l-7.2-40.3
c-7-24.4-13.6-38.3-49.2-48.7A54.2 54.2 0 0054.4 2zm0 20
a34.4 34.4 0 110 68.8 34.4 34.4 0 010-68.8z
m97.4 182.7h336l-43.1 142.9a29.8 29.8 0 01-28.7 21.3H206
c-14.6 0-27-10.4-29.5-24.8z"
stroke="red" fill="gray"/>
</svg>

SVG issue: make the transparent path to white color

In my project, I need a SVG icon, but I am not good at SVG stuff. So far, I get the SVG image as following:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="768.000000pt" height="766.000000pt" viewBox="0 0 768.000000 766.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g fill="#b7e68f" transform="translate(0.000000,766.000000) scale(0.100000,-0.100000)"
stroke="none">
<path d="M3580 7650 c-14 -4 -48 -8 -76 -9 -53 -1 -200 -20 -344 -45 -324 -57
-682 -173 -977 -318 -473 -231 -843 -512 -1200 -906 -279 -309 -514 -682 -676
-1072 -152 -366 -252 -776 -278 -1138 -5 -81 -14 -166 -19 -190 -12 -52 -13
-289 -2 -296 5 -3 12 -61 15 -128 18 -341 111 -754 249 -1108 122 -311 312
-658 489 -890 187 -245 384 -456 604 -646 53 -46 228 -179 310 -236 271 -189
657 -380 970 -481 410 -132 755 -186 1186 -187 534 0 941 75 1422 264 481 188
888 453 1266 821 204 200 290 301 500 590 57 79 185 301 262 455 44 87 79 161
79 165 0 3 9 25 19 48 57 125 142 377 181 538 47 197 52 220 85 449 30 204 39
650 17 850 -36 331 -86 571 -177 845 -376 1142 -1274 2047 -2412 2432 -270 91
-567 153 -878 185 -128 13 -582 19 -615 8z m422 -1601 c35 -12 81 -34 103 -50
22 -15 367 -355 766 -756 791 -793 765 -763 790 -904 10 -57 10 -77 -5 -134
-23 -93 -49 -139 -112 -202 -72 -72 -145 -105 -250 -111 -94 -5 -169 13 -242
58 -26 16 -208 191 -405 390 -198 198 -361 360 -363 360 -2 0 -5 -606 -6
-1347 l-3 -1348 -32 -67 c-85 -180 -286 -276 -466 -223 -121 35 -239 146 -279
263 -10 29 -14 329 -18 1379 l-5 1342 -366 -363 c-201 -199 -381 -373 -400
-387 -148 -111 -375 -92 -508 42 -90 91 -134 226 -112 345 24 133 5 111 799
907 406 406 757 751 782 767 93 60 225 75 332 39z"/>
</g>
</svg>
Currently, the arrow is transparent, in my case, I want to make it red color, how to modify this svg image to support it?

In your example, the SVG circle and arrow are drawn in one patch.
It is necessary to divide one patch into two separate patches for a circle and an arrow.
Then it will be possible to paint them in different colors.
#circle {
fill:#b7e68f;
}
#arrow {
fill:red;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1" width="768" height="766" viewBox="0 0 768 766" preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,766.000000) scale(0.100000,-0.100000)" stroke="none">
<path id="arrow" d="m3580 7650c-14-4-48-8-76-9-53-1-200-20-344-45-324-57-682-173-977-318C1710 7047 1340 6766 983 6372 704 6063 469 5690 307 5300 155 4934 55 4524 29 4162 24 4081 15 3996 10 3972-2 3920-3 3683 8 3676c5-3 12-61 15-128 18-341 111-754 249-1108 122-311 312-658 489-890 187-245 384-456 604-646 53-46 228-179 310-236C1946 479 2332 288 2645 187 3055 55 3400 1 3831 0c534 0 941 75 1422 264 481 188 888 453 1266 821 204 200 290 301 500 590 57 79 185 301 262 455 44 87 79 161 79 165 0 3 9 25 19 48 57 125 142 377 181 538 47 197 52 220 85 449 30 204 39 650 17 850-36 331-86 571-177 845-376 1142-1274 2047-2412 2432-270 91-567 153-878 185-128 13-582 19-615 8z"/>
</g>
<path id="circle" d="m358 1c-1.4 0.4-4.8 0.8-7.6 0.9-5.3 0.1-20 2-34.4 4.5-32.4 5.7-68.2 17.3-97.7 31.8C171 61.3 134 89.4 98.3 128.8 70.4 159.7 46.9 197 30.7 236c-15.2 36.6-25.2 77.6-27.8 113.8-0.5 8.1-1.4 16.6-1.9 19-1.2 5.2-1.3 28.9-0.2 29.6 0.5 0.3 1.2 6.1 1.5 12.8 1.8 34.1 11.1 75.4 24.9 110.8 12.2 31.1 31.2 65.8 48.9 89 18.7 24.5 38.4 45.6 60.4 64.6 5.3 4.6 22.8 17.9 31 23.6 27.1 18.9 65.7 38 97 48.1 41 13.2 75.5 18.6 118.6 18.7 53.4 0 94.1-7.5 142.2-26.4 48.1-18.8 88.8-45.3 126.6-82.1 20.4-20 29-30.1 50-59 5.7-7.9 18.5-30.1 26.2-45.5 4.4-8.7 7.9-16.1 7.9-16.5 0-0.3 0.9-2.5 1.9-4.8 5.7-12.5 14.2-37.7 18.1-53.8 4.7-19.7 5.2-22 8.5-44.9 3-20.4 3.9-65 1.7-85-3.6-33.1-8.6-57.1-17.7-84.5C710.9 149.3 621.1 58.8 507.3 20.3 480.3 11.2 450.6 5 419.5 1.8 406.7 0.5 361.3-0.1 358 1Zm42.2 160.1c3.5 1.2 8.1 3.4 10.3 5 2.2 1.5 36.7 35.5 76.6 75.6 79.1 79.3 76.5 76.3 79 90.4 1 5.7 1 7.7-0.5 13.4-2.3 9.3-4.9 13.9-11.2 20.2-7.2 7.2-14.5 10.5-25 11.1-9.4 0.5-16.9-1.3-24.2-5.8-2.6-1.6-20.8-19.1-40.5-39-19.8-19.8-36.1-36-36.3-36-0.2 0-0.5 60.6-0.6 134.7l-0.3 134.8-3.2 6.7c-8.5 18-28.6 27.6-46.6 22.3C365.6 591 353.8 579.9 349.8 568.2c-1-2.9-1.4-32.9-1.8-137.9l-0.5-134.2-36.6 36.3c-20.1 19.9-38.1 37.3-40 38.7-14.8 11.1-37.5 9.2-50.8-4.2-9-9.1-13.4-22.6-11.2-34.5 2.4-13.3 0.5-11.1 79.9-90.7 40.6-40.6 75.7-75.1 78.2-76.7 9.3-6 22.5-7.5 33.2-3.9z" stroke-width="0.1"/>
</svg>
To adjust the size of the image and make it adaptive:
Remove width="768" and height="766" from the svg header
Wrap the svg in the container <div class =" container ">
.container {
width:15%;
height:15%;
}
#circle {
fill:#b7e68f;
}
#arrow {
fill:red;
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 768 766" preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,766.000000) scale(0.100000,-0.100000)" stroke="none">
<path id="arrow" d="m3580 7650c-14-4-48-8-76-9-53-1-200-20-344-45-324-57-682-173-977-318C1710 7047 1340 6766 983 6372 704 6063 469 5690 307 5300 155 4934 55 4524 29 4162 24 4081 15 3996 10 3972-2 3920-3 3683 8 3676c5-3 12-61 15-128 18-341 111-754 249-1108 122-311 312-658 489-890 187-245 384-456 604-646 53-46 228-179 310-236C1946 479 2332 288 2645 187 3055 55 3400 1 3831 0c534 0 941 75 1422 264 481 188 888 453 1266 821 204 200 290 301 500 590 57 79 185 301 262 455 44 87 79 161 79 165 0 3 9 25 19 48 57 125 142 377 181 538 47 197 52 220 85 449 30 204 39 650 17 850-36 331-86 571-177 845-376 1142-1274 2047-2412 2432-270 91-567 153-878 185-128 13-582 19-615 8z"/>
</g>
<path id="circle" d="m358 1c-1.4 0.4-4.8 0.8-7.6 0.9-5.3 0.1-20 2-34.4 4.5-32.4 5.7-68.2 17.3-97.7 31.8C171 61.3 134 89.4 98.3 128.8 70.4 159.7 46.9 197 30.7 236c-15.2 36.6-25.2 77.6-27.8 113.8-0.5 8.1-1.4 16.6-1.9 19-1.2 5.2-1.3 28.9-0.2 29.6 0.5 0.3 1.2 6.1 1.5 12.8 1.8 34.1 11.1 75.4 24.9 110.8 12.2 31.1 31.2 65.8 48.9 89 18.7 24.5 38.4 45.6 60.4 64.6 5.3 4.6 22.8 17.9 31 23.6 27.1 18.9 65.7 38 97 48.1 41 13.2 75.5 18.6 118.6 18.7 53.4 0 94.1-7.5 142.2-26.4 48.1-18.8 88.8-45.3 126.6-82.1 20.4-20 29-30.1 50-59 5.7-7.9 18.5-30.1 26.2-45.5 4.4-8.7 7.9-16.1 7.9-16.5 0-0.3 0.9-2.5 1.9-4.8 5.7-12.5 14.2-37.7 18.1-53.8 4.7-19.7 5.2-22 8.5-44.9 3-20.4 3.9-65 1.7-85-3.6-33.1-8.6-57.1-17.7-84.5C710.9 149.3 621.1 58.8 507.3 20.3 480.3 11.2 450.6 5 419.5 1.8 406.7 0.5 361.3-0.1 358 1Zm42.2 160.1c3.5 1.2 8.1 3.4 10.3 5 2.2 1.5 36.7 35.5 76.6 75.6 79.1 79.3 76.5 76.3 79 90.4 1 5.7 1 7.7-0.5 13.4-2.3 9.3-4.9 13.9-11.2 20.2-7.2 7.2-14.5 10.5-25 11.1-9.4 0.5-16.9-1.3-24.2-5.8-2.6-1.6-20.8-19.1-40.5-39-19.8-19.8-36.1-36-36.3-36-0.2 0-0.5 60.6-0.6 134.7l-0.3 134.8-3.2 6.7c-8.5 18-28.6 27.6-46.6 22.3C365.6 591 353.8 579.9 349.8 568.2c-1-2.9-1.4-32.9-1.8-137.9l-0.5-134.2-36.6 36.3c-20.1 19.9-38.1 37.3-40 38.7-14.8 11.1-37.5 9.2-50.8-4.2-9-9.1-13.4-22.6-11.2-34.5 2.4-13.3 0.5-11.1 79.9-90.7 40.6-40.6 75.7-75.1 78.2-76.7 9.3-6 22.5-7.5 33.2-3.9z" />
</svg>
</div>

Text cutout of paths body

I'm currently trying to create the SVG of an old image, however I have trouble creating the correct rotated and positioned text cutout.
When I try to add a <text> element it ends up stretched, under the form or is not visible at all.
Here is what I came up with so far:
<svg
height="360px"
width="100%"
preserveAspectRatio="none"
viewBox="0 0 100 360"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path
id="banner"
d="M0,186 L 100,0 100,186 0,360 Z"
fill="#2180b3"
vector-effect="non-scaling-stroke" />
</defs>
<use xlink:href="#banner" />
</svg>
And here is what I'm trying to archive:
The cutout should be white
Thanks!

You can just use an image to svg converter like this one
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1280.000000pt" height="376.000000pt" viewBox="0 0 1280.000000 376.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.13, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,376.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M12700 3702 c-52 -7 -95 -14 -96 -15 -14 -22 -434 -961 -432 -966 2
-5 143 -157 313 -339 l310 -330 3 413 c1 227 1 602 0 832 l-3 418 -95 -13z"/>
<path d="M11785 3569 c-176 -26 -331 -49 -343 -51 -21 -3 0 -33 199 -283 184
-231 223 -276 230 -260 10 28 240 617 246 633 3 6 1 11 -3 11 -5 -1 -153 -23
-329 -50z"/>
<path d="M5440 2648 c-2989 -435 -5436 -792 -5438 -793 -1 -1 -1 -391 0 -866
l3 -864 5592 760 c3076 418 5596 765 5601 770 10 10 441 948 449 976 3 10
-122 155 -352 410 -319 353 -360 394 -388 396 -18 1 -2478 -354 -5467 -789z"/>
<path d="M11818 2058 c-75 -189 -135 -344 -134 -344 1 -2 669 88 732 98 18 2
-14 46 -208 283 -126 154 -234 286 -242 293 -10 10 -38 -52 -148 -330z"/>
</g>
</svg>

Resources