Storing SVGs in the Sitecore Media Library is pretty simple, just add a new mediatype
in config. This has been well documented and there are several posts as well as Stackoverflow/forum answers for this. e.g. https://community.sitecore.net/developers/f/8/t/1670
And this works fine and everything renders great, but whilst trying to sort out some servers issues and trawling through the Sitecore logs I noticed it was littered with Errors like so:
5920 15:34:49 ERROR Could not run the 'getMediaStream' pipeline for '/sitecore/media library/github-logo-01'. Original media data will be used. Exception: System.ArgumentException Message: Parameter is not valid. Source: System.Drawing at System.Drawing.Bitmap..ctor(Stream stream) at Sitecore.Resources.Media.ImageEffectsResize.ResizeImageStream(Stream inputStream, TransformationOptions options, ImageFormat outputFormat) at Sitecore.Resources.Media.ImageThumbnailGenerator.GetStream(MediaData mediaData, TransformationOptions options) at Sitecore.Resources.Media.MediaData.GetThumbnailStream(TransformationOptions options) at Sitecore.Resources.Media.ThumbnailProcessor.Process(GetMediaStreamPipelineArgs args) at (Object , Object[] ) at Sitecore.Pipelines.CorePipeline.Run(PipelineArgs args) at Sitecore.Resources.Media.Media.GetStreamFromPipeline(MediaOptions options, Boolean& canBeCached)
The image that was being referred to was a valid image but I noticed that it was an SVG, and I knew we had done some modifications for this. Having looked through the MediaRequestHandler
then the getMediaStream
pipeline the error was definitely coming from there. After a little digging around it seems the error only occurred when browsing the media library through the Content Editor. When selected the media item displays a little icon and thumbnail so the error seemed related to that.
The ResizeProcessor
processor in getMediaStream
includes the following line of code:
if (!args.MediaData.MimeType.StartsWith("image/", StringComparison.Ordinal)) return; // do some image processing!
Yup, our mime type for SVG falls into this category so it’s obviously trying to be helpful and process the image for us. Unfortunately SVG is not a regular image.
Simple fix, let’s add another processor to check if the getMediaStream
pipeline is running for SVG images, and if so abort so none of the other processors run:
using System; using Sitecore.Diagnostics; using Sitecore.Resources.Media; namespace Sitecore.Custom.Pipelines.getMediaStream { public class SvgProcessor { public void Process(GetMediaStreamPipelineArgs args) { Assert.ArgumentNotNull((object)args, "args"); if (args.MediaData.MimeType.Equals("image/svg+xml", StringComparison.Ordinal)) args.AbortPipeline(); } } }
And let’s patch it in:
<pipelines> <getMediaStream> <processor type="Sitecore.Custom.Pipelines.GetMediaStream.SvgProcessor, Sitecore.Custom" patch:before="*[1]" /> </getMediaStream> </pipelines>
Simple, and cleaner log files… Hardly worth a post, but PSA. Anyhoo, now back to track down the bug I was originally looking for…
We’ve once wrote a custom processor that’ll actually do the resize for the SVG file.
This works a bit differently than other image resizing, but if you want to see the thumbnails for the SVG files, it works.
But that’s not always required for clients….so this solution is a lot simpler.
Nice one.
Thanks Sean. In Sitecore 8 at least, the Content Editor handles all the thumbnails fine and an “ tag is correctly output. I didn’t think SVG required resizing though, since it is a vector file it should scale for any size? Maybe the processor was to do with browser support?