Next.js Image Component Not Rendering SVGs with Custom ViewBox and CSS Transformations
I'm learning this framework and I'm building a feature where Could someone explain I'm working on a project and hit a roadblock... I tried several approaches but none seem to work... I'm using the Next.js Image component to render SVG images, but I'm running into issues with my SVG not displaying correctly when I apply custom transformations using CSS. I've defined the SVG with a specific `viewBox` attribute, yet when I apply a scale transform, the image distorts unexpectedly. My setup is using Next.js version 13.2.0. Here's a snippet of my code: ```javascript import Image from 'next/image'; import mySvg from '../public/myImage.svg'; const MyComponent = () => { return ( <div style={{ transform: 'scale(1.5)', width: '200px', height: '200px' }}> <Image src={mySvg} alt="My SVG Image" layout="responsive" width={100} height={100} quality={100} /> </div> ); }; export default MyComponent; ``` When I load this component, I see the SVG is being rendered, but it appears pixelated and doesn't respect the scaling as I expect. Additionally, I’ve tried adjusting the `width` and `height` parameters directly in the `Image` component, but that didn’t help either. I also checked the console for warnings but found none. Is there a specific way to handle SVG images with transformations in Next.js? Any thoughts on this would be greatly appreciated! I'm working on a CLI tool that needs to handle this. What am I doing wrong? I'm working on a web app that needs to handle this. What am I doing wrong? For context: I'm using Javascript on macOS. I recently upgraded to Javascript LTS. I appreciate any insights! My team is using Javascript for this microservice. My development environment is macOS. Is there a simpler solution I'm overlooking? For context: I'm using Javascript on Ubuntu 20.04. Hoping someone can shed some light on this.