Adding stroke increases the stroke-width-CodePudding

I have been given this svg file to add to a project, being new to SVG's I am sure I have missed something. It seems to be fine until I add the stroke to change the colour, as soon as this is applied the stroke-width seems to increase.

I am not sure if this is related to the decimal places which I know can cause blurry lines but I don't think that is the issue here.

I have tried adding stroke to the g tag and also tried it on the path tag.

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="dual-antenna"
   version="1.1"
   viewBox="0 0 8.4666664 8.4666664"
   height="32"
   width="32">
  <g transform="translate(0,-288.53333)">
    <path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" />
  </g>
</svg>

CodePudding user response：

Yes it increases because the path is a shape, to change the color you have to use the "fill" attribute. Stroke adds a stroke around the shape and therefore enlarges the shape. Look at the example :

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="dual-antenna"
   version="1.1"
   viewBox="0 0 8.4666664 8.4666664"
   height="32"
   width="32">
  <g transform="translate(0,-288.53333)" stroke="#f0f" stroke-width="3%">
    <path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" />
  </g>
</svg>

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="dual-antenna"
   version="1.1"
   viewBox="0 0 8.4666664 8.4666664"
   height="32"
   width="32">
  <g transform="translate(0,-288.53333)" fill="#f0f">
    <path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" />
  </g>
</svg>