0

I'm trying to render 2 SVG files on my react app.

Here:

SVG File correct

But when importing it as a component to React:

import { ReactComponent as ClosedEnvelope } from "../../close.svg";
import { ReactComponent as OpenEnvelope } from "../../open.svg";

const Envelope = ({closed) => {
  return (
    <div>
      {closed ? <ClosedEnvelope /> : <OpenEnvelope />}      
    </div>
  );
};

It renders the SVG incorrectly:

corrupt svg render

As you can see the "arrow" on the bottom left side is overflowing.

Seems like an issue with the method I used, because loading the SVG as an image, does work.

What may the problem be? Thanks in advance

Here are the links to the SVG files: Close envelope Github Open envelope Github

Mendi Sterenfeld
  • 378
  • 5
  • 26
  • 1
    Hi, can you grab the code that is displayed in the browser DOM that includes the SVG image? Alternatively you may not actually have to import the svg, just insert it directly into the DOM with tags. You can add events more easily if you do it that way too. https://developer.mozilla.org/en-US/docs/Web/API/SVGElement – Chris Aug 30 '21 at 11:47
  • @Chris Which code are you referring to? Do you want the SVG code? – Mendi Sterenfeld Aug 30 '21 at 12:00
  • I suppose the little arrow appears where the path begins or ends or next to a m/M command. It would be nice to see your SVG code – enxaneta Aug 30 '21 at 12:17
  • @enxaneta added the link to the Github page. – Mendi Sterenfeld Aug 30 '21 at 13:43
  • 2
    I've seen the code in Github. I suppose it was made in Illustrator or some other vector drawing software. I must tell you that the person who drawn this is not a profesional. The svg you have is full of useless shapes. What's more some paths have tight kinks that may produce that "arrow" you have. Please try this: comment out some paths that may be the cause of your problem: the second path, the one begining with `M967.4,481.6L960,487` If the arrow desapears please let me know. If it doesn't try commenting out the path begining with `M1381.5,843.1c-5.2,0.4-10.4,0.5-14.7,0.5` – enxaneta Aug 30 '21 at 15:06
  • 1
    Please let me know if the arrow is disapearing. If so I'll give you the path d attribute to be used instead. – enxaneta Aug 30 '21 at 15:08
  • 1
    I agree with enxaneta, the svg code is really confusing. Try changing some relative commands in the 'd' string to absolute ones or visa versa it might work. To do that just change the letters from lowercase to uppercase etc. Also could you post the code to the open envelope too? – Chris Aug 31 '21 at 07:36
  • @Chris & enxaneta I'll try your solutions now, Added the open envelope to Github. I hired a guy from Fiverr, I guess I won't be doing it anymore ;-) – Mendi Sterenfeld Aug 31 '21 at 10:56
  • Posted the answer, this helped. thanks tho – Mendi Sterenfeld Aug 31 '21 at 11:46

1 Answers1

1

Well, Apparently the 2 SVG files, had the same classes and IDs, which caused them to change a little.

If you have the same issue,

  1. Change all the classes in one SVG file.
  2. Change all IDs, also in the CSS like clip-path: URL(#SOME_ID)

This worked for me.

Mendi Sterenfeld
  • 378
  • 5
  • 26