Support for SVG images

[CrossBound]

I've added SVG as an image type but the manager will not let me upload it. Is there a way around this?

            // add supported image type
            Piranha.App.MediaTypes.Images.Add(".svg", "image/svg+xml");

[tidyui]

I haven’t tried it myself but it looks like the external imagesharp component can’t handle svg images. I’ll take a look at if there’s any updates on their library or if maybe skiasharp handles svg.

[mikaellindemann]

I don't see why SVGs should be handled by the image cropper - most browsers are able to render them just fine in any resolution.

[tidyui]

I’ll have check the code why it’s failing. My guess is that the content is added as an image so it uses the current image component to verify that it is an image which fails. We would probably need to extend the registration of image types so you can specify if it should be cropped or not.

[tidyui]

So the problem is the following line in the code. When an image is uploaded it tries to create an Image object from it to get the dimensions of it:

_processor.GetSize(bytes, out width, out height);

As ImageSharp doesn't support opening svg files it throws an exception. So in order to support it we need to be able to bypass image processing for certain added image types.

[tidyui]

This will be release in 7.1 you can now add a media type that doesn't support processing with:

Piranha.App.MediaTypes.Images.Add(".svg", "image/svg+xml", false);

All calls for getting a resized version of the image will return the original URL.

[kttary]

svg

where do you put this line of code?

[tidyui]

In the Configure method in Startup.cs after App.Init() has been called. https://piranhacms.org/docs/master/content/media

Regards

[kttary]

it keep saying

Failed to upload media. Image cannot be loaded. Available decoders:

• JPEG : JpegDecoder
• BMP : BmpDecoder
• PNG : PngDecoder
• GIF : GifDecoder
• TGA : TgaDecoder

[tidyui]

Which version are you using of Piranha? I haven't tested this for a while, I'll have to double-check so that our external dependency ImageSharp hasn't removed support for .svg in some upgrade.

[kttary]

Piranha 8.4.1

[tidyui]

@kttary Can you verify that you have set the third optional parameter to false when adding svg images, like so:

Piranha.App.MediaTypes.Images.Add(".svg", "image/svg+xml", false);

If not the file will be opened with ImageSharp to determine width & height, and .svg images is not supported by ImageSharp.

[kttary]

Yes i follow your comment on oct 28 2019.

[tidyui]

I can't reproduce your issue. I have done the following.

1. Create a new web project with dotnet new piranha.razor
2. Add the content type directly below App.Init(api) in Configure() in Startup.cs
3. Restore, build and run the application
4. Seed some test data for the template
5. Login to the manager and navigate to the media library
6. Drop a test .svg image in the upload panel

The file uploads correctly and I can open it and look at the details and preview (see screenshot).

The file used for testing was downloaded here:

https://commons.wikimedia.org/wiki/File:Test.svg

[kttary]

Got it work now. Problem with my browser i think