0

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

In figma enter image description here

In the app enter image description here

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.

8
  • The path is malformed. I checked it in Inkscape. see example. As to how this happened, no idea really. How did you construct it? Can you share just the SVG output from Figma?
    – Billy Kerr
    Nov 11, 2023 at 16:04
  • @BillyKerr I updated the description. I just exported it from figma as svg, then copied the d values and pasted into the react-native Svg component. Nov 11, 2023 at 16:11
  • Yeah, the path in the Figma SVG is messed up too. So, something is up with either how you constructed this inside Figma, or there's been some glitch or bug when outputting to SVG.
    – Billy Kerr
    Nov 11, 2023 at 16:17
  • @BillyKerr I imported it from here Nov 11, 2023 at 16:19
  • 1
    Just find a better constructed SVG for the camera: svgrepo.com/vectors/camera
    – Scott
    Nov 12, 2023 at 11:02

1 Answer 1

0

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:

enter image description here

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:

enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.