SVG loader fails with missing viewBox

[adamalfredsson]

Astro Info

Astro                    v5.3.0
Node                     v20.12.2
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/svelte
                         @astrojs/react
                         astro-icon

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I want to use an SVG pattern which doesn't have a viewBox, such as this one:

<svg width="200" height="100%">
  <defs>
    <pattern id="stripes" patternUnits="userSpaceOnUse" width="10" height="10">
      <rect width="5" height="10" fill="#000" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#stripes)" />
</svg>

But, using the experimental svg loader, I get error:

NoImageMetadata
Could not process image metadata.

With astro-icon v0 this was no problem
With astro-icon v1 I could override the viewBox property, by setting it to undefined on the Icon component

What's the expected result?

SVG should load

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-gjg3z579

Participation

• I am willing to submit a pull request for this issue.

[ematipico]

cc @stramel and @natemoo-re

Is this a bug?

[stramel]

I can take a look today

[ascorbic]

The issue is that your example has a percentage for height, and no viewbox, which means that Astro can't probe the image dimensions. This is what's throwing the error. If you're not including a viewbox you need to set a pixel value for dimensions. When I add the height, the image is displayed fine: https://stackblitz.com/edit/github-gjg3z579-tzheybbm?file=src%2Ficon.svg

[dschuessler]

My use case is to demonstrate the effects of a missing viewbox on my page. This is an unexpected hurdle in migrating from Hugo to Astro.

It seems that I have to move this SVG to the public folder and lose colocation of the page and its resources.

I am unsure about what a good solution would look like though.

EDIT: Corrected some false assumptions.

[ascorbic]

@dschuessler if you're using it to specifically demonstrate certain SVG behaviour, surely you're better using it untransformed anyway?

[dschuessler]

@ascorbic I was hoping to be able to do so while still keeping the SVG next to my page files in the src folder. But since this is apparently impossible, I ended up moving it to the public folder.

[adamalfredsson]

The issue is that your example has a percentage for height, and no viewbox, which means that Astro can't probe the image dimensions. This is what's throwing the error. If you're not including a viewbox you need to set a pixel value for dimensions. When I add the height, the image is displayed fine: https://stackblitz.com/edit/github-gjg3z579-tzheybbm?file=src%2Ficon.svg

My objective is to display an SVG pattern across the full height of a fluid container, making it difficult to set a pixel value. I believe it would be beneficial if the SVG loader could support this, although I understand it's an edge case. Since astro-icon supports it, not having this feature would be an unfortunate regression.

[ascorbic]

I'd recommend using CSS in that case.

[stramel]

Apologies for having not taken a look. I am going to try to get to it this week.

That being said, just a quick scan of the conversation, I would say this is an edge case. While we can definitely look to support it. There are a few options:

• Using CSS
• Inlining the SVG into an .astro component which can be colocated with your page files
• Using the ?raw option that Vite supports which would allow access to the SVG file as a string
• Using the Image Metadata that was previously available prior to the experimental SVG support.

[stramel]

Took a look into it, it does seem to be more of an edge-case. I'm not sure we should explicitly support it as I think there are better ways to handle it for this use-case.

That being said, I believe you should be able to override the viewBox based on the changes that I pushed recently to the hopefully soon to be released feature.

[ascorbic]

I'm closing this as it's behaving as expected, and there are a number of workarounds if you want to handle this edge case.