Getting some filled partial overlay inside svg icon when expected to be transparent

Question

I am getting a partially filled section when exporting svg icon from figma to react-native app.

In figma

In the app

As you can see the pictures icon displays as expected. But the camera icon has this weird partial overlay.

Camer svg:

<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
  d="M12.253 9.82016H12.2545V6.31753C12.2545 5.55651 11.5902 4.93106 10.7655 4.93106H9.93C9.57943 4.93106 9.28349 4.6956 9.22966 4.3664L9.22963 4.36621L9.15765 3.91507L12.253 9.82016ZM12.253 9.82016V9.87016M12.253 9.82016V9.87016M12.253 9.87016C12.253 10.6312 11.5887 11.2566 10.764 11.2566H4.269C3.44433 11.2566 2.78 10.6312 2.78 9.87016V6.31753C2.78 5.55651 3.44433 4.93106 4.269 4.93106H5.1045C5.45508 4.93106 5.75102 4.6956 5.80485 4.3664L5.80488 4.36621M12.253 9.87016L5.80488 4.36621M5.80488 4.36621L5.87685 3.91511M5.80488 4.36621L5.87685 3.91511M5.87685 3.91511C5.87686 3.91508 5.87686 3.91506 5.87687 3.91503M5.87685 3.91511L5.87687 3.91503M5.87687 3.91503C5.91759 3.6654 6.14373 3.47918 6.4215 3.47918H8.613C8.89087 3.47918 9.11688 3.66407 9.15763 3.91494L5.87687 3.91503ZM9.84888 3.8137L9.84888 3.81369C9.7561 3.23339 9.23348 2.8172 8.613 2.8172H6.42C5.79953 2.8172 5.27691 3.23339 5.18413 3.81369L5.18413 3.8137L5.1122 4.26451C5.1122 4.26453 5.1122 4.26455 5.11219 4.26457C5.11197 4.26562 5.11016 4.26909 5.1045 4.26909H4.269C3.06569 4.26909 2.08 5.1838 2.08 6.31613V9.87016C2.08 11.0025 3.06569 11.9172 4.269 11.9172H10.764C11.9673 11.9172 12.953 11.0025 12.953 9.87016V6.31753C12.953 5.18382 11.9673 4.26909 10.764 4.26909H9.9285C9.92284 4.26909 9.92104 4.26561 9.92082 4.26457C9.92081 4.26455 9.92081 4.26453 9.9208 4.26451L9.84888 3.8137Z" 
  fill="black" 
  stroke="black" 
  stroke-width="0.1"
/>
<path 
  d="M7.51651 5.63828C6.15988 5.63828 5.05751 6.74113 5.05751 8.09828C5.05751 9.45543 6.15988 10.5583 7.51651 10.5583C8.87317 10.5583 9.97551 9.4539 9.97551 8.09828C9.97551 6.74263 8.87165 5.63828 7.51651 5.63828ZM7.51651 9.85803C6.54665 9.85803 5.75751 9.0686 5.75751 8.09828C5.75751 7.12796 6.54665 6.33853 7.51651 6.33853C8.48638 6.33853 9.27551 7.12796 9.27551 8.09828C9.27551 9.0686 8.48638 9.85803 7.51651 9.85803Z" 
  fill="black" 
  stroke="black" 
  stroke-width="0.1"
/>
</svg>

Portrait svg:

<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path 
  d="M7.5 3C5.0187 3 3 5.01873 3 7.50003C3 9.98133 5.0187 12 7.5 12C9.9813 12 12 9.98133 12 7.50003C12 5.01873 9.9813 3 7.5 3ZM7.5 11.1818C5.46982 11.1818 3.81818 9.53018 3.81818 7.50003C3.81818 5.46987 5.46982 3.81818 7.5 3.81818C9.53018 3.81818 11.1818 5.46987 11.1818 7.50003C11.1818 9.53018 9.53016 11.1818 7.5 11.1818Z" 
  fill="black"
/>
<circle 
  cx="7.48"
  cy="6.25" 
  r="1.25" 
  fill="black"
/>
<ellipse 
  cx="7.5" 
  cy="10" 
  rx="2.5" 
  ry="2" 
  fill="black"
/>
</svg>

Code for the portrait icon:

export const PortraitIcon = (props: SvgProps) => (
  <Svg width="15" height="15" viewBox="0 0 15 15" fill="none" {...props}>
    <Path
      d="M7.5 3C5.0187 3 3 5.01873 3 7.50003C3 9.98133 5.0187 12 7.5 12C9.9813 12 12 9.98133 12 7.50003C12 5.01873 9.9813 3 7.5 3ZM7.5 11.1818C5.46982 11.1818 3.81818 9.53018 3.81818 7.50003C3.81818 5.46987 5.46982 3.81818 7.5 3.81818C9.53018 3.81818 11.1818 5.46987 11.1818 7.50003C11.1818 9.53018 9.53016 11.1818 7.5 11.1818Z"
      fill={props.fill}
    />
    <Circle cx="7.48" cy="6.25" r="1.25" fill={props.fill} />
    <Ellipse cx="7.5" cy="10" rx="2.5" ry="2" fill={props.fill} />
  </Svg>
);

Code for the camera icon:

export const CameraIcon = (props: SvgProps) => (
  <Svg width="15" height="15" viewBox="0 0 15 15" fill="none" {...props}>
    <G>
      <Path
        d="M12.253 9.82016H12.2545V6.31753C12.2545 5.55651 11.5902 4.93106 10.7655 4.93106H9.93C9.57943 4.93106 9.28349 4.6956 9.22966 4.3664L9.22963 4.36621L9.15765 3.91507L12.253 9.82016ZM12.253 9.82016V9.87016M12.253 9.82016V9.87016M12.253 9.87016C12.253 10.6312 11.5887 11.2566 10.764 11.2566H4.269C3.44433 11.2566 2.78 10.6312 2.78 9.87016V6.31753C2.78 5.55651 3.44433 4.93106 4.269 4.93106H5.1045C5.45508 4.93106 5.75102 4.6956 5.80485 4.3664L5.80488 4.36621M12.253 9.87016L5.80488 4.36621M5.80488 4.36621L5.87685 3.91511M5.80488 4.36621L5.87685 3.91511M5.87685 3.91511C5.87686 3.91508 5.87686 3.91506 5.87687 3.91503M5.87685 3.91511L5.87687 3.91503M5.87687 3.91503C5.91759 3.6654 6.14373 3.47918 6.4215 3.47918H8.613C8.89087 3.47918 9.11688 3.66407 9.15763 3.91494L5.87687 3.91503ZM9.84888 3.8137L9.84888 3.81369C9.7561 3.23339 9.23348 2.8172 8.613 2.8172H6.42C5.79953 2.8172 5.27691 3.23339 5.18413 3.81369L5.18413 3.8137L5.1122 4.26451C5.1122 4.26453 5.1122 4.26455 5.11219 4.26457C5.11197 4.26562 5.11016 4.26909 5.1045 4.26909H4.269C3.06569 4.26909 2.08 5.1838 2.08 6.31613V9.87016C2.08 11.0025 3.06569 11.9172 4.269 11.9172H10.764C11.9673 11.9172 12.953 11.0025 12.953 9.87016V6.31753C12.953 5.18382 11.9673 4.26909 10.764 4.26909H9.9285C9.92284 4.26909 9.92104 4.26561 9.92082 4.26457C9.92081 4.26455 9.92081 4.26453 9.9208 4.26451L9.84888 3.8137Z"
        fill={props.fill}
        stroke={props.fill}
        strokeWidth="0.1"
      />
      <Path
        d="M7.51651 5.63828C6.15988 5.63828 5.05751 6.74113 5.05751 8.09828C5.05751 9.45543 6.15988 10.5583 7.51651 10.5583C8.87317 10.5583 9.97551 9.4539 9.97551 8.09828C9.97551 6.74263 8.87165 5.63828 7.51651 5.63828ZM7.51651 9.85803C6.54665 9.85803 5.75751 9.0686 5.75751 8.09828C5.75751 7.12796 6.54665 6.33853 7.51651 6.33853C8.48638 6.33853 9.27551 7.12796 9.27551 8.09828C9.27551 9.0686 8.48638 9.85803 7.51651 9.85803Z"
        fill={props.fill}
        stroke={props.fill}
        strokeWidth="0.1"
      />
    </G>
  </Svg>
);

The props value in both cases is {"fill": "#EBEBEB", "height": "100%", "width": "100%"}.

I apologize for not using the right terms, I am new to design, figma and svg creation.

Answer 1

At the first glance the camera SVG looks like it has 2 paths: the body outline and the lens. The body outline seems to be a combined path which contains numerous open and closed paths. If I drew the camera body outline in a vector drawing program it wouldn't be such mess, it would be a single closed path with a black stroke and no fill. Or alternatively there would be 2 paths combined to one which together present the camera body outline as a filled area with no stroke. Someone or some buggy piece of software has created something much more complex.

Opening the SVG in Inkscape and breaking the combined paths to separate strokes with different colors gives this:

It's easier to draw a new camera than to try to parse and rebuild this mess. Redrawing it takes only few minutes in Inkscape if one has already climbed up the learning curve of Bezier curve and node editing tools. The single path version of the camera body, drawn with the Bezier tool:

Only a half of it is drawn. The other half is a flipped copy which is joined to the first one.

Fixing the original needs opening the unnecessary closed loops and removing the totally useless straight lines (red, blue, orange in my recolored version). It can be done in Inkscape, but it's not easy, because there's many nodes in the same places.

One who reads well the text version of the SVG file may see the unwanted extras easily.