{"record":{"id":"8ebb7c01722e6180","repo":"withastro/astro","slug":"unsupportedimageformat-8ebb7c","errorCode":"UnsupportedImageFormat","errorMessage":"SVG image processing is disabled, but the source for \"${transform.src}\" is an SVG. Pass it through unchanged by setting `format=\"svg\"` on the component, or set `image.dangerouslyProcessSVG: true` to rasterize SVG sources.","messagePattern":"SVG image processing is disabled, but the source for \"(.+?)\" is an SVG\\. Pass it through unchanged by setting `format=\"svg\"` on the component, or set `image\\.dangerouslyProcessSVG: true` to rasterize SVG sources\\.","errorType":"exception","errorClass":"AstroError","httpStatus":null,"severity":"error","filePath":"packages/astro/src/assets/services/sharp.ts","lineNumber":178,"sourceCode":"\t\t\tif (bufferFormat && bufferFormat !== 'svg') {\n\t\t\t\tlogger.warn(\n\t\t\t\t\t`Astro expected an SVG for \"${transform.src}\" but the source is ${bufferFormat}. Passing it through as ${bufferFormat} instead.`,\n\t\t\t\t);\n\t\t\t\treturn { data: inputBuffer, format: bufferFormat as ImageOutputFormat };\n\t\t\t}\n\t\t\treturn { data: inputBuffer, format: 'svg' };\n\t\t}\n\n\t\t// If we couldn't figure out the format, it's probably something weird we shouldn't try to process.\n\t\tif (!bufferFormat) {\n\t\t\tthrow new AstroError({\n\t\t\t\t...AstroErrorData.NoImageMetadata,\n\t\t\t\tmessage: AstroErrorData.NoImageMetadata.message(transform.src),\n\t\t\t});\n\t\t}\n\n\t\tif (bufferFormat === 'svg' && !config.dangerouslyProcessSVG) {\n\t\t\tthrow new AstroError({\n\t\t\t\t...AstroErrorData.UnsupportedImageFormat,\n\t\t\t\tmessage: `SVG image processing is disabled, but the source for \"${transform.src}\" is an SVG. Pass it through unchanged by setting \\`format=\"svg\"\\` on the component, or set \\`image.dangerouslyProcessSVG: true\\` to rasterize SVG sources.`,\n\t\t\t});\n\t\t}\n\n\t\tconst result = sharp(inputBuffer, {\n\t\t\tfailOn: 'none',\n\t\t\tpages: -1,\n\t\t\tlimitInputPixels: config.service.config.limitInputPixels,\n\t\t});\n\n\t\t// always call rotate to adjust for EXIF data orientation\n\t\tresult.rotate();\n\n\t\tif (transform.width && transform.height) {\n\t\t\tconst fit: keyof FitEnum | undefined = transform.fit\n\t\t\t\t? (fitMap[transform.fit] ?? 'inside')\n\t\t\t\t: undefined;","sourceCodeStart":160,"sourceCodeEnd":196,"githubUrl":"https://github.com/withastro/astro/blob/e294953aa8aadd98d5be92e60a03037b05dbdfd4/packages/astro/src/assets/services/sharp.ts#L160-L196","documentation":"For safety, Astro refuses to feed SVG sources through the rasterizing Sharp pipeline unless you explicitly opt in. When the probed input format is 'svg', the requested output is raster, and `image.dangerouslyProcessSVG` is falsy, the sharp service throws UnsupportedImageFormat with instructions: pass SVGs through unchanged, or set the flag to rasterize them.","triggerScenarios":"`<Image src={logoSvg} />` (default webp output) without `dangerouslyProcessSVG`; `getImage({ src: svgImport, format: 'png' })`; a remote .svg URL used with the Image component requesting raster output.","commonSituations":"Using a logo.svg like any other image; upgrading Astro to a version that made SVG processing opt-in; processing user-supplied SVGs (XSS risk if rasterization re-embeds scripts); CI builds that differ from local because config drifted.","solutions":["Keep the SVG vectorial: set `format=\"svg\"` on the component so it passes through unchanged","Enable rasterization explicitly in astro.config.mjs: `image: { dangerouslyProcessSVG: true }` when you accept the security trade-off","Pre-convert the SVG to PNG/WebP offline (e.g. with sharp CLI or an export tool) and ship the raster asset instead"],"exampleFix":"// before\n<Image src={logo} alt=\"Logo\" />\n\n// after (pass-through)\n<Image src={logo} format=\"svg\" alt=\"Logo\" />","handlingStrategy":"validation","validationCode":"// before rendering, decide pass-through vs rasterize explicitly\nconst wantsRaster = targetFormat !== 'svg';\nconst sourceIsSvg = (typeof src !== 'string' && src.format === 'svg') || String(src).endsWith('.svg');\nif (sourceIsSvg && wantsRaster && !astroConfig.image.dangerouslyProcessSVG) {\n  // choose one: pass through, or enable the flag\n  targetFormat = 'svg';\n}","typeGuard":"function needsSvgPassthrough(srcFormat: string, requested: string | undefined, flagOn: boolean): boolean {\n  return srcFormat === 'svg' && requested !== 'svg' && !flagOn;\n}","tryCatchPattern":"try {\n  const img = await getImage({ src, format });\n} catch (err) {\n  if (err instanceof AstroError && err.code === 'UnsupportedImageFormat') {\n    return getImage({ src, format: 'svg' }); // pass through unchanged\n  }\n  throw err;\n}","preventionTips":["Default your Image wrapper to format=\"svg\" when src.format === 'svg'","Only enable dangerouslyProcessSVG when sources are trusted (no user-supplied SVGs)"],"tags":["astro","images","svg","sharp","security-opt-in"],"backgroundTag":"unsupported-image-format","analyzedSha":"e294953aa8aadd98d5be92e60a03037b05dbdfd4","analyzedAt":"2026-08-18T18:48:03.901Z","contentChangedAt":"2026-08-18T18:48:03.901Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}