SVG - Just return the original file

[rosrosros]

Case

Using ImageSharp.Web

We can server jpg images like this:

http://example.com/img/pic1.jpg?width=10

SVG

I would like to request SVG images on the same path like this:

http://example.com/img/logo.svg

This will result in a 404 response 😔

How do I configure ImageSharp just to bypass all logic and retur the original SVG file?

[JimBobSquarePants]

That shouldn’t happen. Did you register the middleware after the static file middleware or something?

[rosrosros]

Please note that the base path "http://example.com/img/" is the same for both jpg and svg files.

Otherwise it's a quite basic setup:

WebApplicationBuilder builder = WebApplication.CreateBuilder(args);

builder.Host
    .ConfigureAppConfiguration((context, configuration) =>
    {
        configuration
            .AddEnvironmentVariables()
            .Build();
    });

builder.Services.AddImageSharp()

    // Add source blob container
    .RemoveProvider<PhysicalFileSystemProvider>()
    .Configure<AzureBlobStorageImageProviderOptions>(options =>
    {
        options.BlobContainers.Add(new AzureBlobContainerClientOptions
        {
            ConnectionString =...,
            ContainerName = ...
        });
    })
    .AddProvider<AzureBlobStorageImageProvider>()

    // Add caching blob container
    .Configure<AzureBlobStorageCacheOptions>(options =>
    {
        options.ConnectionString = ...;
        options.ContainerName = ...;
        AzureBlobStorageCache.CreateIfNotExists(options, PublicAccessType.None);
    })
    .SetCache<AzureBlobStorageCache>();

WebApplication app = builder.Build();
app.UseImageSharp();
app.Run();

[JimBobSquarePants]

I don’t see app.UseStaticFiles() anywhere in that setup.

[rosrosros]

Thanks for the swift reply :-)

Both cases below produces 404 for http://example.com/img/logo.svg

WebApplication app = builder.Build();
app.UseDefaultFiles();
app.UseImageSharp();
app.UseStaticFiles();
app.Run();

WebApplication app = builder.Build();
app.UseStaticFiles();
app.UseImageSharp();
app.Run();

How is this ment to work?
Should I configure ImageSharp to also handle SVG files?

[tocsoft]

@JimBobSquarePants I would have to guess that the svg file is stored in blob storage and @rosrosros is hoping ImageSharp.Web will transparent serve files it can't process.

@rosrosros The way ImageSharp.Web is currently architected is that it will attempt to intercept/serve up files it can process only, if it can't process the file it lets the request continue onto other middleware processors to handle. As we don't support processing svg files then the ImageShjarp.Web middleware end up just ignoring the request entirely and assumes you have other handlers setup to cope with the request. So to handle this you will have to add a custom middleware/endpoint that can serve the files from blob storage yourself if ImageSharp fails to handle the request.

[rosrosros]

Thanks for pitching in @tocsoft
You are right - the svg files are in the same blob storage.
Your explanation on how ImageSharp i architected make perfect sence.

I'm wondering whether it would be preferable for me to write a custom "component" for ImageSharp that will read the SVG file and just serve the original file in the same way a jpg file is handled when no query string parameters are present.

Got any recommendations or pointers to share?

[JimBobSquarePants]

Theoretically yeah.... You could inherit AzureBlobStorageImageProvider and override IsValidRequest(HttpContext context).

I would always recommend rolling your own middleware to handle non-supported file formats though.

[rosrosros]

Thanks you both - hacking ImageSharp to our needs seems a bad way to go.
We will handle SVG files in another way

[McGern]

Hi,

Came here for a similar reason. We are upgrading to Umbraco v13 which uses ImageSharp, previously had ImageProcessor. Images are coming from the CMS and going through a helper, so there will be instances where the image is svg or raster. So the src might turn up as

/media/gd2dtyto/logoimage.svg?quality=90&width=600&format=jpg&mode=max

In our example though we are getting a 500 rather than 404.

without the format=jpg it works (assuming it's skipping imagesharp in those instances?)

Is there a pattern for upgrade in these types of scenarios or a link to some docs please about what is suggested above regarding the handler?

Thanks,
J

[JimBobSquarePants]

Why are you attempting to resize svg files?

[McGern]

We aren't trying to resize svg files. The images are coming from a media picker in Umbraco where it might be raster or svg, and the src will just point to the media url. We are just generically including a size and format to fit the html component IF the file can be processed, rather than having specific logic to test whether the file extension may or may not be an svg.

This used to be the case for Image Processor (where it wouldn't try and format svg files) so I was wondering how to achieve the same thing with Image Sharp - assumed we had just missed a configuration step somewhere during the Umbraco upgrade.

[JimBobSquarePants]

Forgot to reply here. The latest release fixes this for you.