Carl• 815
@CarlHumm
Posted
Hi there
The reason your SVG isn't appearing is because you're using a duplicate ID. In SVG the ID's really need to be unique.
If you look at this screenshot you can see that you have used #a to reference both your linear-gradient and main rectangle. To test this quickly you can open up dev tools and delete the main rectangle with #a and you will see your circle and gradient appear on the success page.
illustrationDesktop.jsx
<rect id="a" width={400} height={593} x={0} y={0} rx={16} />
iconSuccess.jsx
<linearGradient id="a" x1="100%" x2="0%" y1="0%" y2="100%">
Hope this helps. Good luck on your next challenge.
1
Chris-Mwiti• 100
@Chris-Mwiti
Posted
@CarlHumm Thanks for the help. Turns out changing the id of the svg solved the problem
1
