SVG file rendered incorrectly
Answered
Tiphiid wasp posted this in #help-forum
Tiphiid waspOP
Hi,
Have have two identical project, one with react and one with NextJS as I'm converting the react app to NextJS.
A basic NextJS project with tailwindcss.
I have copied all the tailwind css and all looks good except the SVG files.
This is how I import the svg file
<img
className="max-w-[100%] mt-[171px] hidden sm:block"
src="assets/img/image.svg"
alt=""
/>
But for some reason the stroke is a lot thinner on NextJS project compare to the React project, and I cannot understand why. check images below
I'v tried to change the strokeWidth in the SVG file but no difference.
Have have two identical project, one with react and one with NextJS as I'm converting the react app to NextJS.
A basic NextJS project with tailwindcss.
I have copied all the tailwind css and all looks good except the SVG files.
This is how I import the svg file
<img
className="max-w-[100%] mt-[171px] hidden sm:block"
src="assets/img/image.svg"
alt=""
/>
But for some reason the stroke is a lot thinner on NextJS project compare to the React project, and I cannot understand why. check images below
I'v tried to change the strokeWidth in the SVG file but no difference.
Answered by Tiphiid wasp
found the issue
so instead of strokeWidth and strokeLinecap in the svg file it should be stroke-width & stroke-linecap
so instead of strokeWidth and strokeLinecap in the svg file it should be stroke-width & stroke-linecap
1 Reply
Tiphiid waspOP
found the issue
so instead of strokeWidth and strokeLinecap in the svg file it should be stroke-width & stroke-linecap
so instead of strokeWidth and strokeLinecap in the svg file it should be stroke-width & stroke-linecap
Answer