SVG Best Practices?
Answered
Laysan Albatross posted this in #help-forum
Laysan AlbatrossOP
heyoo, what are your preffered ways of using SVGs in next.js projects? Till now, I was using next/image, but i feel like thats not made for SVGs, since you need to define a px value for width and height, which doesn't make sense for SVGs.
I found SVGR (https://react-svgr.com/), and I guess that should make the job, but I'm not sure how good it performs.
Is there a "Next.js best practice" for using SVGs?
I found SVGR (https://react-svgr.com/), and I guess that should make the job, but I'm not sure how good it performs.
Is there a "Next.js best practice" for using SVGs?
Answered by Asian paper wasp
What SVGR does is basically import SVG files as SVG components as if it is inlined.
The webpack version also enables SVGO by default which minifies SVGs. Generally, it works very well. Though there are edge cases where you will prefer using img to load it, e.g. the SVG itself is too big
The webpack version also enables SVGO by default which minifies SVGs. Generally, it works very well. Though there are edge cases where you will prefer using img to load it, e.g. the SVG itself is too big
8 Replies
Laysan AlbatrossOP
SVGR is awesome lul. I always had the struggle that I cant access the svg props, like fill etc. with next/image but SVGR solves that, because I can use all props from ReactSVG.
If you think that performance sucks, please let me know, but I really like it so far.
Asian paper wasp
What SVGR does is basically import SVG files as SVG components as if it is inlined.
The webpack version also enables SVGO by default which minifies SVGs. Generally, it works very well. Though there are edge cases where you will prefer using img to load it, e.g. the SVG itself is too big
The webpack version also enables SVGO by default which minifies SVGs. Generally, it works very well. Though there are edge cases where you will prefer using img to load it, e.g. the SVG itself is too big
Answer
Laysan AlbatrossOP
but how can a SVG be "too big" its vector based.
and you can change the size with the viewpoint or a tailwind class
but I'm an "svg noob" so correct me if I talk bs ^^
Asian paper wasp
By "big", I mean the file size. A complex SVG can have a big file size, and it is a bad idea to inline those in the HTML as it can drastically increase the HTML size
Laysan AlbatrossOP
Isn't that the purpose of SVGO & SVGR to reduce that?