Should I next/image for rendering svgs, or should I use svg code itself?
Answered
Nile Crocodile posted this in #help-forum
Nile CrocodileOP
When rendering svgs in Next.js, what would be better to use:
<Image /> component from next/image OR should I just use code by itself? (or maybe use something like [react-svg](https://www.npmjs.com/package/react-svg) to make it less ugly)Answered by joulev
Image optimisation is only applicable to raster images. For vector images they cannot be optimised further, so Image is useless (it will basically be equivalent to a regular img tag).
Whether you use the svg directly as components (via react-svg or svgr for example), use an img tag, or use techniques like svg sprites, is a debated topic in webdev – but all those methods work and it’s your decision to make
Whether you use the svg directly as components (via react-svg or svgr for example), use an img tag, or use techniques like svg sprites, is a debated topic in webdev – but all those methods work and it’s your decision to make
10 Replies
What is the answer to this?
Nile CrocodileOP
ChatGPT (3.5) says
<Image /> is better@Nile Crocodile When rendering svgs in Next.js, what would be better to use:
`<Image />` component from next/image **OR** should I just use code by itself? (or maybe use something like [react-svg](https://www.npmjs.com/package/react-svg) to make it less ugly)
Image optimisation is only applicable to raster images. For vector images they cannot be optimised further, so Image is useless (it will basically be equivalent to a regular img tag).
Whether you use the svg directly as components (via react-svg or svgr for example), use an img tag, or use techniques like svg sprites, is a debated topic in webdev – but all those methods work and it’s your decision to make
Whether you use the svg directly as components (via react-svg or svgr for example), use an img tag, or use techniques like svg sprites, is a debated topic in webdev – but all those methods work and it’s your decision to make
Answer
American Crow
So ChatGPT guessed the wrong token. Unlucky was a 50/50 
Nile CrocodileOP
It's free version though. For me it makes mistakes pretty commonly
@joulev Image optimisation is only applicable to raster images. For vector images they cannot be optimised further, so Image is useless (it will basically be equivalent to a regular img tag).
Whether you use the svg directly as components (via react-svg or svgr for example), use an img tag, or use techniques like svg sprites, is a debated topic in webdev – but all those methods work and it’s your decision to make
I saw some reused attributes and things in the SVG file like
fill and stroke which could be moves to the css etc. Should these be manually done or are there tools?Am guessing any source code optimization will only be slightly better
And the rest is a design choice
@moonbrew I saw some reused attributes and things in the SVG file like `fill` and `stroke` which could be moves to the css etc. Should these be manually done or are there tools?
next/image optimisation consists of conversion to webp and resizing of the image to a smaller size. both of which are not applicable to vector graphic, so you gain nothing from next/image when you use it with svg. you are free to optimise your svg via other means, such as https://jakearchibald.github.io/svgomg/, if you want to.