We Keep Coding

How to use stroke-offset to animating path in this SVG

How can I use stroke-offset to animating path in this SVG? I very appreciate it if anyone can help me.
<svg xmlns="http://www.w3.org/2000/svg" id="logo" width="200" viewBox="0 0 132.64 140.91">
<path id="path1" d="M123.26 15.4C115.58 5 103.78 0 87.17 0H0v6.73h87.17c15.08 0 25.63 4.35 32.26 13.3 7.25 9.78 7.93 18.38 7.93 38.71v23.32c0 20.4-.68 29-7.93 38.83-8.65 11.67-20.62 13.29-32.26 13.29H5.27V33.26H0v107.65h87.17c12.21 0 26-1.83 36.08-15.39 8.95-12.08 9.39-23.79 9.39-43.46V58.74c0-19.6-.44-31.28-9.38-43.34z" fill="#f96464"/>
<path id="path2" d="M109.31 25.48c7.84 9.08 7.76 19.83 7.76 32v25.89c0 12.13 0 22.91-7.83 32-6.79 7.85-15 8.16-25.69 8.16H15.8V33.26h-7v96.42h78.37c11.74 0 22.23-1.79 29.7-11.88 6.11-8.24 7-15 7-35.74V58.74c0-20.72-.87-27.39-7-35.63-6.87-9.22-17.76-11.89-29.7-11.89H0v6.19h83.55c10.67 0 18.97.23 25.76 8.07z" fill="#00aad8"/>
<path id="path3" d="M103.41 33.8c4.67 5.41 4.88 11.38 4.87 23.29v26.32c0 12.09-.2 18.14-4.94 23.62-4.09 4.73-9.42 5.25-19.79 5.25h-59v-79h-5.24V119h64.24c10.75 0 17.69-.46 23.33-7 6.68-7.72 6.68-16.94 6.67-28.62V57.09c0-11.52 0-20.62-6.6-28.28-5.7-6.58-12.61-6.91-23.4-6.91H0v6.73h83.55c10.69 0 15.8.49 19.86 5.17z" fill="'#b7c406"/>
</svg>
This path is drawn with fill. So, I can not use 'stroke-dashoffset'.

Another option to open SVG menu links in new browser tabs?

I'm wrangling some JavaScript code for a navbar menu on my website:
menuOptions : {
'Home' : '/',
'About' : '/about',
'Projects' : '/projects',
'Contact' : '/contact',
'<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>' : 'https://Link01.com',
'<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path></svg>' : 'https://Link02.com',
'<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path stroke-width="0" fill-rule="evenodd" d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" clip-rule="evenodd"></path></svg>' : 'https://Link03.com',
},
I’ve tried the <a href> call below…
menuOptions : {
'Home' : '/',
'About' : '/about',
'Projects' : '/projects',
'Contact' : '/contact',
'<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>' : '#',
'<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path></svg>' : '#',
'<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path stroke-width="0" fill-rule="evenodd" d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" clip-rule="evenodd"></path></svg>' : '#',
},
The above works for me... however, this method gets in the way of some backend hover stylings.
Please pardon my coding lingo which I'm sure is rough around the edges. Is there another way to perhaps call a backend function to open the SVG links in new browser tabs, without sacrificing my fade hover stylings?
Thanks in advance!

Why does path not fit inside SVG viewbox?

Expected Behavior:
Icon to fit only the area of the 24 x 24 viewbox.
Actual Behavior:
The svg tag takes up the correct area of 24 x 24 but the path element is not contained inside of the 24 x 24 area.
How would I be able to have the path be constrained to the 24 x 24 area and not go over? Currently this is what my svg tag looks like.
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M15.99 2a13.99 13.99 0 0 0-5.1 27.03c-.13-1.11-.23-2.81.05-4.02l1.64-6.96s-.41-.84-.41-2.07c0-1.95 1.13-3.4 2.53-3.4 1.2 0 1.77.9 1.77 1.97 0 1.2-.76 2.99-1.16 4.66-.33 1.39.7 2.53 2.07 2.53 2.49 0 4.4-2.63 4.4-6.4 0-3.35-2.41-5.69-5.85-5.69a6.05 6.05 0 0 0-6.32 6.07c0 1.2.46 2.49 1.04 3.19.12.14.13.26.09.4l-.39 1.59c-.06.25-.21.31-.47.18-1.73-.83-2.81-3.39-2.81-5.44 0-4.41 3.2-8.47 9.25-8.47 4.85 0 8.63 3.46 8.63 8.09 0 4.83-3.04 8.71-7.26 8.71-1.42 0-2.75-.74-3.2-1.61l-.88 3.33a15 15 0 0 1-1.74 3.67A13.97 13.97 0 0 0 30 16.01 14.02 14.02 0 0 0 15.99 2z">
</path>
</svg>
</a>

Remember, the viewBox doesn't have to match your dimensions, so adjust your viewBox - that's what it's there for! The viewBox settings below seems to work. (I scaled up the SVG size and added a 1px border red to show the effect).
svg {
border: 1px solid red;
}
<svg xmlns="http://www.w3.org/2000/svg" width="240px" height="240px" viewBox="1.6 2 28.73 27.99">
<path d="M15.99 2a13.99 13.99 0 0 0-5.1 27.03c-.13-1.11-.23-2.81.05-4.02l1.64-6.96s-.41-.84-.41-2.07c0-1.95 1.13-3.4 2.53-3.4 1.2 0 1.77.9 1.77 1.97 0 1.2-.76 2.99-1.16 4.66-.33 1.39.7 2.53 2.07 2.53 2.49 0 4.4-2.63 4.4-6.4 0-3.35-2.41-5.69-5.85-5.69a6.05 6.05 0 0 0-6.32 6.07c0 1.2.46 2.49 1.04 3.19.12.14.13.26.09.4l-.39 1.59c-.06.25-.21.31-.47.18-1.73-.83-2.81-3.39-2.81-5.44 0-4.41 3.2-8.47 9.25-8.47 4.85 0 8.63 3.46 8.63 8.09 0 4.83-3.04 8.71-7.26 8.71-1.42 0-2.75-.74-3.2-1.61l-.88 3.33a15 15 0 0 1-1.74 3.67A13.97 13.97 0 0 0 30 16.01 14.02 14.02 0 0 0 15.99 2z">
</path>
</svg>

The problem is with your SVG path. It is bleeding outside the view box. This is what it looks like in Illustrator:
This is after editing the path in illustrator to contain it to the view box:
a {
display: inline-block;
}
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 0C5.4 0 0 5.3 0 11.9c0 5 3 9.4 7.6 11.2-.1-1-.2-2.4 0-3.4l1.4-6s-.4-.7-.4-1.8c0-1.7 1-2.9 2.2-2.9 1 0 1.5.8 1.5 1.7 0 1-.7 2.6-1 4-.3 1.2.6 2.2 1.8 2.2 2.1 0 3.8-2.3 3.8-5.5 0-2.9-2.1-4.9-5-4.9-2.9-.1-5.3 2.1-5.4 4.9v.3c0 1 .4 2.1.9 2.7.1.1.1.2.1.3l-.3 1.4c-.1.2-.2.3-.4.2-1.5-.7-2.4-2.9-2.4-4.7 0-3.8 2.7-7.3 7.9-7.3 4.2 0 7.4 3 7.4 6.9 0 4.1-2.6 7.5-6.2 7.5-1.2 0-2.4-.6-2.7-1.4l-.8 3c-.4 1.1-.9 2.2-1.5 3.1 6.3 2 13-1.6 15-7.9.4-1.2.5-2.4.5-3.6C24 5.4 18.6 0 12 0z"/>
</path>
</svg>
</a>
Also, adding display: inline-block to your anchor tag allows the SVG to take up it's space.

Move masked svg with CSS and JS with mobile chrome based browsers

I have a SVG object.
<svg version="1.1" viewBox="0 0 200 172.29" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(2.2495 0 0 2.2495 -12.814 -35.835)" stroke="#333" stroke-miterlimit="10">
<path d="m78.259 50.602c13.319 2.133 14.25-10.228 14.241-13.55" fill="none" stroke-linecap="round" stroke-width="4.208"/>
<path d="m18.922 56.574h-8.679a2.743 2.743 0 0 1-2.743-2.743v-7.138a2.743 2.743 0 0 1 2.743-2.743h8.679z" fill="#f47e60" stroke-width="3.607"/>
</g>
<g id="pig" transform="matrix(2.2495 0 0 2.2495 -12.814 -35.835)">
<g stroke="#333" stroke-miterlimit="10">
<path d="m28.203 82.098-4.803-1.462a3.1 3.1 0 0 1-2.063-3.868l4.713-15.483 10.734 3.268-4.713 15.483a3.1 3.1 0 0 1-3.868 2.062z" fill="#f47e60" stroke-width="4.097"/>
<path d="m66.242 82.072 5.22-1.589a3.19 3.19 0 0 0 2.123-3.982l-4.687-15.396-11.325 3.447 4.687 15.396a3.191 3.191 0 0 0 3.982 2.124z" fill="#f47e60" stroke-width="4.208"/>
<path d="m47.707 22.636c-4.499 0-8.788 0.727-12.712 2.035a11.28 11.28 0 0 0-0.945-1.545c-1.313-1.822-3.247-3.34-5.477-4.281-2.24-0.929-4.738-1.33-7.275-0.916 1.534 1.694 3.452 6.355 3.452 6.355s1.017 2.311 2 4.334c-7.785 5.062-12.784 12.872-12.784 21.644 0 15.257 15.106 27.626 33.74 27.626s33.74-12.369 33.74-27.626c1e-3 -15.258-15.105-27.626-33.739-27.626z" fill="#f8b26a" stroke-linejoin="round" stroke-width="3.673"/>
</g>
</g>
<g transform="matrix(2.2495 0 0 2.2495 -12.814 -35.835)">
<path d="m57.851 31.201a35.536 35.536 0 0 0-10.145-1.457c-2.78 0-5.468 0.315-8.019 0.902" fill="#f8b26a" stroke="#333" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3.673"/>
<circle cx="27.608" cy="42.441" r="3.574" fill="#333"/>
</g>
<path id="pigFill" d="m77.485 10.578a2.6994 3.5305 0 0 0-2.2803 1.5975l-2.1748 4.3372a2.6994 3.5305 0 0 0 0.08348 4.0307h-4.4682l-0.03515-0.61297a2.7039 3.5362 0 0 0-2.9041-3.2552l-3.9542 0.39936a2.7039 3.5362 0 0 0-2.4956 3.4689h-29.179v116.56h129.39v-116.56h-12.342l0.65024-1.8947c0.49715-1.4534-3.1e-4 -3.1577-1.1116-3.808l-4.5341-2.6515a2.2045 2.8831 0 0 0-2.9129 1.4535l-2.3593 6.9005h-1.8673a2.6994 3.5305 0 0 0 0.0396-1.8621l-0.94903-5.0384a2.7017 3.5333 0 0 0-3.2688-2.5866l-14.912 4.7923-1.4323-3.0928a2.7039 3.5362 0 0 0-3.7126-1.1888l-3.3918 2.6841a2.7039 3.5362 0 0 0-0.99296 4.6622l-1.2522 0.404a2.7017 3.5333 0 0 0-1.4631 1.2259h-0.61511l-3.4928-5.8884a2.7039 3.5362 0 0 0-3.7916-0.6269l-3.1327 3.1762a2.7039 3.5362 0 0 0-1.0105 3.3389h-1.7355l-10.936-9.3851a2.6994 3.5305 0 0 0-1.4631-0.58047z" fill="#66503a" stroke-width="1.4711"/>
</svg>
with a masked part declared using CSS
#pigFill {
clip-path: ellipse(64px 54px at 64px -36px);
transform: translate(0px,100px);
}
I wrote a piece of JS to move the mask and it's content
$("#pigFill").css("clip-path", "ellipse(64px 54px at 64px "+clippathVal+"px)");
$("#pigFill").css("transform", "translate(0px,"+translateVal+"px)");
Here's the codepen POC https://codepen.io/Chagam/pen/wvozYPr
It's working ok, except with chrome based browsers on android such as Brave or Chrome. the animated part has wrong position and size. The transform: translate(0px,100px); seems to break everything. But it works as expected on firefox and safari.
Is there an other way to get the same result working on all browsers ?

Found a way to have it work on every browsers !!
Heres is the full fix : https://codepen.io/Chagam/pen/jOVyRYO
Basically changed 'translate' to 'translateY' as I only translate vertically.
#pigFill {
clip-path: ellipse(50% 43% at 50% -43%);
transform: translateY(70%);
}
$("#pigFill").css("clip-path", "ellipse(50% 43% at 50% "+clippathVal+"%)");
$("#pigFill").css("transform", "translateY("+translateVal+"%)");
I also changed translate and clip path values from px to %

How to I modify color in an SVG in React?

I'm looking to modify the color of an SVG. I'm currently attempting to modify the file directly however with no luck. I'm using react and here is the code for the SVG I'm trying to edit.
import * as React from "react";
const ReduceCosts: React.FC = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg
width="55px"
height="65px"
viewBox="0 0 53 45"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<title>{"Reduce Costs Icon#1x"}</title>
<defs>
<filter id="prefix__a">
<feColorMatrix
in="SourceGraphic"
values="0 0 0 0 0.870588 0 0 0 0 0.172549 0 0 0 0 0.058824 0 0 0 1.000000 0"
/>
</filter>
</defs>
<g
transform="translate(1 -4)"
filter="url(#prefix__a)"
fill="none"
fillRule="evenodd"
>
<g stroke="#000" fill="#000">
<path d="M43.822 28.67c-.3-.193-.58-.413-.84-.656-.93-.893-1.36-1.932-1.092-2.657.204-.562.525-.866.887-.903h.079c.473.035.9.3 1.139.709.62 1.06.457 2.152-.173 3.522v-.015zm4.625 1.05a.93.93 0 00-1.218-.494h0a3.001 3.001 0 01-1.68.157c.73-1.616 1.097-3.375.047-5.15a3.23 3.23 0 00-2.992-1.612 2.957 2.957 0 00-2.463 2.1c-.525 1.44.069 3.22 1.575 4.641a7.47 7.47 0 001.229.946 2.723 2.723 0 01-1.512 1.05c-.714.152-1.528-.1-2.415-.751a14.01 14.01 0 00-4.898-7.518.929.929 0 10-1.176 1.433c2.913 2.43 4.536 5.623 4.536 9.015 0 3.759-2.032 7.312-5.57 9.759a.92.92 0 00-.384.945l1.14 5.712h-5.077a.4.4 0 01-.336-.23l-.64-3.061a.924.924 0 00-1.093-.714c-2.814.51-5.696.51-8.51 0a.924.924 0 00-1.092.714l-.64 3.013a.397.397 0 01-.337.23H9.87l1.134-5.276a.934.934 0 00-.635-1.086 7.26 7.26 0 01-4.515-4.347.925.925 0 00-.856-.578h-2.51a3.465 3.465 0 01-.63-.036v-5.864c0-.756.394-.756.588-.756h1.959a.93.93 0 00.908-.725 11.547 11.547 0 012.662-5.124.941.941 0 00.23-.688c-.178-2.247-1.018-3.633-1.91-5.103l-.231-.383c2.966-.126 5.376.525 7.014 1.88a.93.93 0 00.934.152 18.388 18.388 0 013.638-.96.93.93 0 10-.304-1.833 21.01 21.01 0 00-3.491.892c-1.717-1.233-4.641-2.41-9.45-1.848a.934.934 0 00-.714 1.36c.336.64.672 1.187.997 1.722.777 1.286 1.407 2.32 1.607 3.911A13.284 13.284 0 003.67 30.12H2.446C.982 30.119 0 31.169 0 32.718v5.827c0 1.974 1.869 1.974 2.488 1.974h1.917a9.087 9.087 0 004.61 4.568L8.01 49.748c-.108.5.016 1.02.336 1.418.36.428.891.67 1.45.661l5.144-.03a2.205 2.205 0 002.142-1.697l.447-2.157c2.464.35 4.965.35 7.428 0l.452 2.142a2.221 2.221 0 002.147 1.695l5.14.032a1.842 1.842 0 001.438-.651 1.7 1.7 0 00.347-1.413l-1.05-5.28c3.77-2.783 5.901-6.731 5.901-10.931v-.599a4.163 4.163 0 002.488.257 4.663 4.663 0 002.846-2.1 4.89 4.89 0 003.292-.147.935.935 0 00.489-1.228h-.001z" />
<path d="M27.752 6.384a6.872 6.872 0 11-6.873 6.872v-.005a6.878 6.878 0 016.873-6.873v.006zm0 15.603a8.73 8.73 0 10-8.731-8.736 8.741 8.741 0 008.73 8.736h0z" />
</g>
</g>
</svg>
);
};
export default React.memo(ReduceCosts);
I understand that I should be changing the fill and/or stroke value. However I can't manage to adjust the color of this thing which is showing orange, although the stroke and fill values are currently #000. Thanks.

The SVG you're using uses feColorMatrix which changes the hue of the color.
I removed that for you below and added the orange into the stroke and fill color.
<svg
width="55px"
height="65px"
viewBox="0 0 53 45"
xmlns="http://www.w3.org/2000/svg"
>
<title>Something</title>
<g
transform="translate(1 -4)"
fill="none"
fillRule="evenodd"
>
<g stroke="#F07345" fill="#F07345">
<path d="M43.822 28.67c-.3-.193-.58-.413-.84-.656-.93-.893-1.36-1.932-1.092-2.657.204-.562.525-.866.887-.903h.079c.473.035.9.3 1.139.709.62 1.06.457 2.152-.173 3.522v-.015zm4.625 1.05a.93.93 0 00-1.218-.494h0a3.001 3.001 0 01-1.68.157c.73-1.616 1.097-3.375.047-5.15a3.23 3.23 0 00-2.992-1.612 2.957 2.957 0 00-2.463 2.1c-.525 1.44.069 3.22 1.575 4.641a7.47 7.47 0 001.229.946 2.723 2.723 0 01-1.512 1.05c-.714.152-1.528-.1-2.415-.751a14.01 14.01 0 00-4.898-7.518.929.929 0 10-1.176 1.433c2.913 2.43 4.536 5.623 4.536 9.015 0 3.759-2.032 7.312-5.57 9.759a.92.92 0 00-.384.945l1.14 5.712h-5.077a.4.4 0 01-.336-.23l-.64-3.061a.924.924 0 00-1.093-.714c-2.814.51-5.696.51-8.51 0a.924.924 0 00-1.092.714l-.64 3.013a.397.397 0 01-.337.23H9.87l1.134-5.276a.934.934 0 00-.635-1.086 7.26 7.26 0 01-4.515-4.347.925.925 0 00-.856-.578h-2.51a3.465 3.465 0 01-.63-.036v-5.864c0-.756.394-.756.588-.756h1.959a.93.93 0 00.908-.725 11.547 11.547 0 012.662-5.124.941.941 0 00.23-.688c-.178-2.247-1.018-3.633-1.91-5.103l-.231-.383c2.966-.126 5.376.525 7.014 1.88a.93.93 0 00.934.152 18.388 18.388 0 013.638-.96.93.93 0 10-.304-1.833 21.01 21.01 0 00-3.491.892c-1.717-1.233-4.641-2.41-9.45-1.848a.934.934 0 00-.714 1.36c.336.64.672 1.187.997 1.722.777 1.286 1.407 2.32 1.607 3.911A13.284 13.284 0 003.67 30.12H2.446C.982 30.119 0 31.169 0 32.718v5.827c0 1.974 1.869 1.974 2.488 1.974h1.917a9.087 9.087 0 004.61 4.568L8.01 49.748c-.108.5.016 1.02.336 1.418.36.428.891.67 1.45.661l5.144-.03a2.205 2.205 0 002.142-1.697l.447-2.157c2.464.35 4.965.35 7.428 0l.452 2.142a2.221 2.221 0 002.147 1.695l5.14.032a1.842 1.842 0 001.438-.651 1.7 1.7 0 00.347-1.413l-1.05-5.28c3.77-2.783 5.901-6.731 5.901-10.931v-.599a4.163 4.163 0 002.488.257 4.663 4.663 0 002.846-2.1 4.89 4.89 0 003.292-.147.935.935 0 00.489-1.228h-.001z" />
<path d="M27.752 6.384a6.872 6.872 0 11-6.873 6.872v-.005a6.878 6.878 0 016.873-6.873v.006zm0 15.603a8.73 8.73 0 10-8.731-8.736 8.741 8.741 0 008.73 8.736h0z" />
</g>
</g>
</svg>
Now you can use that to change the color more direclty
<svg
width="55px"
height="65px"
viewBox="0 0 53 45"
xmlns="http://www.w3.org/2000/svg"
>
<title>Something</title>
<g
transform="translate(1 -4)"
fill="none"
fillRule="evenodd"
>
<g stroke="blue" fill="blue">
<path d="M43.822 28.67c-.3-.193-.58-.413-.84-.656-.93-.893-1.36-1.932-1.092-2.657.204-.562.525-.866.887-.903h.079c.473.035.9.3 1.139.709.62 1.06.457 2.152-.173 3.522v-.015zm4.625 1.05a.93.93 0 00-1.218-.494h0a3.001 3.001 0 01-1.68.157c.73-1.616 1.097-3.375.047-5.15a3.23 3.23 0 00-2.992-1.612 2.957 2.957 0 00-2.463 2.1c-.525 1.44.069 3.22 1.575 4.641a7.47 7.47 0 001.229.946 2.723 2.723 0 01-1.512 1.05c-.714.152-1.528-.1-2.415-.751a14.01 14.01 0 00-4.898-7.518.929.929 0 10-1.176 1.433c2.913 2.43 4.536 5.623 4.536 9.015 0 3.759-2.032 7.312-5.57 9.759a.92.92 0 00-.384.945l1.14 5.712h-5.077a.4.4 0 01-.336-.23l-.64-3.061a.924.924 0 00-1.093-.714c-2.814.51-5.696.51-8.51 0a.924.924 0 00-1.092.714l-.64 3.013a.397.397 0 01-.337.23H9.87l1.134-5.276a.934.934 0 00-.635-1.086 7.26 7.26 0 01-4.515-4.347.925.925 0 00-.856-.578h-2.51a3.465 3.465 0 01-.63-.036v-5.864c0-.756.394-.756.588-.756h1.959a.93.93 0 00.908-.725 11.547 11.547 0 012.662-5.124.941.941 0 00.23-.688c-.178-2.247-1.018-3.633-1.91-5.103l-.231-.383c2.966-.126 5.376.525 7.014 1.88a.93.93 0 00.934.152 18.388 18.388 0 013.638-.96.93.93 0 10-.304-1.833 21.01 21.01 0 00-3.491.892c-1.717-1.233-4.641-2.41-9.45-1.848a.934.934 0 00-.714 1.36c.336.64.672 1.187.997 1.722.777 1.286 1.407 2.32 1.607 3.911A13.284 13.284 0 003.67 30.12H2.446C.982 30.119 0 31.169 0 32.718v5.827c0 1.974 1.869 1.974 2.488 1.974h1.917a9.087 9.087 0 004.61 4.568L8.01 49.748c-.108.5.016 1.02.336 1.418.36.428.891.67 1.45.661l5.144-.03a2.205 2.205 0 002.142-1.697l.447-2.157c2.464.35 4.965.35 7.428 0l.452 2.142a2.221 2.221 0 002.147 1.695l5.14.032a1.842 1.842 0 001.438-.651 1.7 1.7 0 00.347-1.413l-1.05-5.28c3.77-2.783 5.901-6.731 5.901-10.931v-.599a4.163 4.163 0 002.488.257 4.663 4.663 0 002.846-2.1 4.89 4.89 0 003.292-.147.935.935 0 00.489-1.228h-.001z" />
<path d="M27.752 6.384a6.872 6.872 0 11-6.873 6.872v-.005a6.878 6.878 0 016.873-6.873v.006zm0 15.603a8.73 8.73 0 10-8.731-8.736 8.741 8.741 0 008.73 8.736h0z" />
</g>
</g>
</svg>
So your react component would look like this:
import * as React from "react";
const ReduceCosts: React.FC = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg
width="55px"
height="65px"
viewBox="0 0 53 45"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<title>{"Reduce Costs Icon#1x"}</title>
<g
transform="translate(1 -4)"
fill="none"
fillRule="evenodd"
>
<g stroke="#000" fill="#000">
<path d="M43.822 28.67c-.3-.193-.58-.413-.84-.656-.93-.893-1.36-1.932-1.092-2.657.204-.562.525-.866.887-.903h.079c.473.035.9.3 1.139.709.62 1.06.457 2.152-.173 3.522v-.015zm4.625 1.05a.93.93 0 00-1.218-.494h0a3.001 3.001 0 01-1.68.157c.73-1.616 1.097-3.375.047-5.15a3.23 3.23 0 00-2.992-1.612 2.957 2.957 0 00-2.463 2.1c-.525 1.44.069 3.22 1.575 4.641a7.47 7.47 0 001.229.946 2.723 2.723 0 01-1.512 1.05c-.714.152-1.528-.1-2.415-.751a14.01 14.01 0 00-4.898-7.518.929.929 0 10-1.176 1.433c2.913 2.43 4.536 5.623 4.536 9.015 0 3.759-2.032 7.312-5.57 9.759a.92.92 0 00-.384.945l1.14 5.712h-5.077a.4.4 0 01-.336-.23l-.64-3.061a.924.924 0 00-1.093-.714c-2.814.51-5.696.51-8.51 0a.924.924 0 00-1.092.714l-.64 3.013a.397.397 0 01-.337.23H9.87l1.134-5.276a.934.934 0 00-.635-1.086 7.26 7.26 0 01-4.515-4.347.925.925 0 00-.856-.578h-2.51a3.465 3.465 0 01-.63-.036v-5.864c0-.756.394-.756.588-.756h1.959a.93.93 0 00.908-.725 11.547 11.547 0 012.662-5.124.941.941 0 00.23-.688c-.178-2.247-1.018-3.633-1.91-5.103l-.231-.383c2.966-.126 5.376.525 7.014 1.88a.93.93 0 00.934.152 18.388 18.388 0 013.638-.96.93.93 0 10-.304-1.833 21.01 21.01 0 00-3.491.892c-1.717-1.233-4.641-2.41-9.45-1.848a.934.934 0 00-.714 1.36c.336.64.672 1.187.997 1.722.777 1.286 1.407 2.32 1.607 3.911A13.284 13.284 0 003.67 30.12H2.446C.982 30.119 0 31.169 0 32.718v5.827c0 1.974 1.869 1.974 2.488 1.974h1.917a9.087 9.087 0 004.61 4.568L8.01 49.748c-.108.5.016 1.02.336 1.418.36.428.891.67 1.45.661l5.144-.03a2.205 2.205 0 002.142-1.697l.447-2.157c2.464.35 4.965.35 7.428 0l.452 2.142a2.221 2.221 0 002.147 1.695l5.14.032a1.842 1.842 0 001.438-.651 1.7 1.7 0 00.347-1.413l-1.05-5.28c3.77-2.783 5.901-6.731 5.901-10.931v-.599a4.163 4.163 0 002.488.257 4.663 4.663 0 002.846-2.1 4.89 4.89 0 003.292-.147.935.935 0 00.489-1.228h-.001z" />
<path d="M27.752 6.384a6.872 6.872 0 11-6.873 6.872v-.005a6.878 6.878 0 016.873-6.873v.006zm0 15.603a8.73 8.73 0 10-8.731-8.736 8.741 8.741 0 008.73 8.736h0z" />
</g>
</g>
</svg>
);
};
export default React.memo(ReduceCosts);