unjs / unjs/ipx

SVG files with <symbols>/<use> gives IPX_INVALID_IMAGE error

Open
#287 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
2.5k
Forks
93
PR merge metrics
No merged PRs in 30d

Description

Environment

Node: v22.21.1

"devDependencies": {
	"@nuxt/content": "^3.9.0",
	"@nuxt/image": "^2.0.0",
	"nuxi": "^3.20.2",
	"nuxt": "^3.20.2",
	"nuxt-seo-utils": "^7.0.16",
	"nuxt-svgo": "^4.2.6",
	"sass": "^1.89.0",
	"sass-loader": "^16.0.6",
	"vite-svg-loader": "^5.1.0"
},
"dependencies": {
	"@nuxtjs/seo": "^3.2.2",
},
"overrides": {
	"vue": "latest"
},
Reproduction
glasses.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.58 77.24" fill="none">
	<path fill="#222328" d="M103.25 42.35a1.6 1.6 0 0 0-.13-.36l-5.8-11.69c-1.27-2.49-4.5-6.39-8.57-5.22-4.35 1.25-4.55 5.62-4.06 7.76a1.688 1.688 0 1 0 3.29-.77c-.07-.31-.64-3.07 1.7-3.75 2.35-.68 4.61 3.47 4.62 3.49l4.04 8.14c-.16-.05-.32-.11-.48-.15-8.12-2.39-16.58.89-21.14 7.51a8.53 8.53 0 0 0-5.11-4.19 8.52 8.52 0 0 0-6.57.75c-.25-8.03-5.59-15.37-13.71-17.76-8.88-2.61-18.18 1.55-22.32 9.46L12.81 5.43C11.54 2.94 8.31-.95 4.25.21-.1 1.46-.31 5.83.19 7.97a1.688 1.688 0 1 0 3.29-.77c-.07-.31-.64-3.07 1.7-3.75 2.35-.67 4.61 3.47 4.64 3.54l17.6 32.74c-2.52 9.9 3.24 20.13 13.13 23.04 10.11 2.97 20.75-2.83 23.73-12.94.8-2.72 3.66-4.28 6.38-3.48s4.28 3.66 3.48 6.38c-2.97 10.11 2.83 20.75 12.94 23.73 10.11 2.97 20.75-2.83 23.73-12.94 2.39-8.14-.9-16.62-7.55-21.17ZM41.5 59.54C33.18 57.09 28.4 48.33 30.84 40c2.45-8.32 11.21-13.1 19.54-10.66 8.32 2.45 13.1 11.21 10.66 19.54-2.45 8.32-11.21 13.1-19.54 10.66m46.53 13.69c-8.32-2.45-13.1-11.21-10.66-19.54 2.45-8.32 11.21-13.1 19.54-10.66 8.32 2.45 13.1 11.21 10.66 19.54-2.45 8.32-11.21 13.1-19.54 10.66"/>
	<path fill="#222328" d="M50.64 32.54c-.43.18-.63.68-.45 1.11l5.82 13.8a.855.855 0 0 0 1.11.45c.43-.18.63-.68.45-1.11l-5.82-13.8a.85.85 0 0 0-1.11-.45m1.63 10.8a.84.84 0 0 0-1.12-.42.85.85 0 0 0-.42 1.12l2.16 4.8c.11.23.3.4.53.46.19.05.39.05.58-.04a.85.85 0 0 0 .42-1.12l-2.16-4.8Zm32.17 10.81a.85.85 0 0 0-1.11-.45c-.43.18-.63.68-.45 1.11l5.82 13.8a.855.855 0 0 0 1.11.45c.43-.18.63-.68.45-1.11zM82.8 59.7a.834.834 0 0 0-1.12-.42.85.85 0 0 0-.42 1.12l2.16 4.8c.11.23.3.4.53.46.19.05.39.05.58-.04a.85.85 0 0 0 .42-1.12l-2.16-4.8Z"/>
</svg>

✅ Works normally with IPX


glasses.svg but with <symbol> and a default <use> tag
<svg xmlns="http://www.w3.org/2000/svg">
	<symbol id="icon-glasses" viewBox="0 0 111.58 77.24" fill="none">
		<path fill="#222328" d="M103.25 42.35a1.6 1.6 0 0 0-.13-.36l-5.8-11.69c-1.27-2.49-4.5-6.39-8.57-5.22-4.35 1.25-4.55 5.62-4.06 7.76a1.688 1.688 0 1 0 3.29-.77c-.07-.31-.64-3.07 1.7-3.75 2.35-.68 4.61 3.47 4.62 3.49l4.04 8.14c-.16-.05-.32-.11-.48-.15-8.12-2.39-16.58.89-21.14 7.51a8.53 8.53 0 0 0-5.11-4.19 8.52 8.52 0 0 0-6.57.75c-.25-8.03-5.59-15.37-13.71-17.76-8.88-2.61-18.18 1.55-22.32 9.46L12.81 5.43C11.54 2.94 8.31-.95 4.25.21-.1 1.46-.31 5.83.19 7.97a1.688 1.688 0 1 0 3.29-.77c-.07-.31-.64-3.07 1.7-3.75 2.35-.67 4.61 3.47 4.64 3.54l17.6 32.74c-2.52 9.9 3.24 20.13 13.13 23.04 10.11 2.97 20.75-2.83 23.73-12.94.8-2.72 3.66-4.28 6.38-3.48s4.28 3.66 3.48 6.38c-2.97 10.11 2.83 20.75 12.94 23.73 10.11 2.97 20.75-2.83 23.73-12.94 2.39-8.14-.9-16.62-7.55-21.17ZM41.5 59.54C33.18 57.09 28.4 48.33 30.84 40c2.45-8.32 11.21-13.1 19.54-10.66 8.32 2.45 13.1 11.21 10.66 19.54-2.45 8.32-11.21 13.1-19.54 10.66m46.53 13.69c-8.32-2.45-13.1-11.21-10.66-19.54 2.45-8.32 11.21-13.1 19.54-10.66 8.32 2.45 13.1 11.21 10.66 19.54-2.45 8.32-11.21 13.1-19.54 10.66"/>
		<path fill="#222328" d="M50.64 32.54c-.43.18-.63.68-.45 1.11l5.82 13.8a.855.855 0 0 0 1.11.45c.43-.18.63-.68.45-1.11l-5.82-13.8a.85.85 0 0 0-1.11-.45m1.63 10.8a.84.84 0 0 0-1.12-.42.85.85 0 0 0-.42 1.12l2.16 4.8c.11.23.3.4.53.46.19.05.39.05.58-.04a.85.85 0 0 0 .42-1.12l-2.16-4.8Zm32.17 10.81a.85.85 0 0 0-1.11-.45c-.43.18-.63.68-.45 1.11l5.82 13.8a.855.855 0 0 0 1.11.45c.43-.18.63-.68.45-1.11zM82.8 59.7a.834.834 0 0 0-1.12-.42.85.85 0 0 0-.42 1.12l2.16 4.8c.11.23.3.4.53.46.19.05.39.05.58-.04a.85.85 0 0 0 .42-1.12l-2.16-4.8Z"/>
	</symbol>
	<use href="#icon-glasses"/>
</svg>

❌ IPX error:

{
  "error": {
    "message": "[400] [IPX_INVALID_IMAGE] Cannot parse image metadata: /images/icons/glasses.svg"
  }
}
Describe the bug

I'm working on a nuxt site with uses nuxt content and in those content files I'm referencing images in a normal markdown way:

[ ![Glasses Icon](/images/icons/glasses.svg) ]

nuxt content then uses nuxt image(and by extension IPX) to transform the that into the final html:

<img data-nuxt-img="" srcset="/_ipx/_/images/icons/glasses.svg 1x, /_ipx/_/images/icons/glasses.svg 2x" onerror="this.setAttribute('data-error', 1)" alt="Glasses Icon" src="/_ipx/_/images/icons/glasses.svg" data-error="1">
  1. If I'm loading the normal glasses.svg file, everything works like normal and the svg image renders on the page.
  2. If I then go update the glasses.svg file to have <symbol>/<use> tags and then reload the page.
    • The svg image does not render, instead displaying just the alt text Glasses Icon in it's place.
    • If I go directly to the image(/_ipx/_/images/icons/glasses.svg) it returns this error json:
{
  "error": {
    "message": "[400] [IPX_INVALID_IMAGE] Cannot parse image metadata: /images/icons/glasses.svg"
  }
}
Additional context

For some reason if I have this extra commented out line at the top of the glasses.svg file with <symbol>/<use> tags the IPX error goes away:

<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.58 77.24" fill="none"> -->
<svg xmlns="http://www.w3.org/2000/svg">
	<symbol id="icon-glasses" viewBox="0 0 111.58 77.24" fill="none">
		<path fill="#222328" d="M103.25 42.35a1.6 1.6 0 0 0-.13-.36l-5.8-11.69c-1.27-2.49-4.5-6.39-8.57-5.22-4.35 1.25-4.55 5.62-4.06 7.76a1.688 1.688 0 1 0 3.29-.77c-.07-.31-.64-3.07 1.7-3.75 2.35-.68 4.61 3.47 4.62 3.49l4.04 8.14c-.16-.05-.32-.11-.48-.15-8.12-2.39-16.58.89-21.14 7.51a8.53 8.53 0 0 0-5.11-4.19 8.52 8.52 0 0 0-6.57.75c-.25-8.03-5.59-15.37-13.71-17.76-8.88-2.61-18.18 1.55-22.32 9.46L12.81 5.43C11.54 2.94 8.31-.95 4.25.21-.1 1.46-.31 5.83.19 7.97a1.688 1.688 0 1 0 3.29-.77c-.07-.31-.64-3.07 1.7-3.75 2.35-.67 4.61 3.47 4.64 3.54l17.6 32.74c-2.52 9.9 3.24 20.13 13.13 23.04 10.11 2.97 20.75-2.83 23.73-12.94.8-2.72 3.66-4.28 6.38-3.48s4.28 3.66 3.48 6.38c-2.97 10.11 2.83 20.75 12.94 23.73 10.11 2.97 20.75-2.83 23.73-12.94 2.39-8.14-.9-16.62-7.55-21.17ZM41.5 59.54C33.18 57.09 28.4 48.33 30.84 40c2.45-8.32 11.21-13.1 19.54-10.66 8.32 2.45 13.1 11.21 10.66 19.54-2.45 8.32-11.21 13.1-19.54 10.66m46.53 13.69c-8.32-2.45-13.1-11.21-10.66-19.54 2.45-8.32 11.21-13.1 19.54-10.66 8.32 2.45 13.1 11.21 10.66 19.54-2.45 8.32-11.21 13.1-19.54 10.66"/>
		<path fill="#222328" d="M50.64 32.54c-.43.18-.63.68-.45 1.11l5.82 13.8a.855.855 0 0 0 1.11.45c.43-.18.63-.68.45-1.11l-5.82-13.8a.85.85 0 0 0-1.11-.45m1.63 10.8a.84.84 0 0 0-1.12-.42.85.85 0 0 0-.42 1.12l2.16 4.8c.11.23.3.4.53.46.19.05.39.05.58-.04a.85.85 0 0 0 .42-1.12l-2.16-4.8Zm32.17 10.81a.85.85 0 0 0-1.11-.45c-.43.18-.63.68-.45 1.11l5.82 13.8a.855.855 0 0 0 1.11.45c.43-.18.63-.68.45-1.11zM82.8 59.7a.834.834 0 0 0-1.12-.42.85.85 0 0 0-.42 1.12l2.16 4.8c.11.23.3.4.53.46.19.05.39.05.58-.04a.85.85 0 0 0 .42-1.12l-2.16-4.8Z"/>
	</symbol>
	<use href="#icon-glasses"/>
</svg>

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue through the IPX endpoint using the two SVG variants in the report: the plain SVG and the version containing and . Trace the SVG metadata parsing path used by IPX and compare its behavior for both inputs. Done means the symbol/use SVG is accepted without IPX_INVALID_IMAGE while the existing SVG behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
nodejs, nuxtjs, typescript
Domain
backend, performance
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.