U4-8580 - Render preview of SVG files

Created by Bjarne Fyrstenborg 09 Jun 2016, 21:33:45 Updated by Bjarne Fyrstenborg 09 Nov 2016, 12:31:00

Tags: PR

Relates to: U4-8825

Can we add previews of uploaded SVG files in media section. At the moment it just display the default font icon for "File" media type and a link to the file location.

In case the file extension is .svg, we can render the svg in e.g. an img or svg element. Maybe add a special directive to render til svg e.g. something like this http://codepen.io/clintonhalpin/pen/xBDqs

and the example in the screenshot (with yinyang.svg) would be preferred - however not sure how it should work with animated svg files? Maybe similar to how ImageProcessor handle animated gif's?

Furthermore also showing preview in media grid like in the last two example screenshots.

9 Attachments

Download SVG Animated.zip

Download SVG Samples.zip

Download brand-icons.svg

Download brand-icons.zip


Bjarne Fyrstenborg 26 Jul 2016, 13:11:20

PR: https://github.com/umbraco/Umbraco-CMS/pull/1402

Mads Rasmussen 08 Aug 2016, 09:34:14

Super tak - Merged in.

Lee Kelleher 08 Nov 2016, 19:03:10

Is there a way to disable the SVG thumbnail preview?

We have some media items uploaded as SVG Sprites ([using SVG's <symbol> tag|https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol]). These need the <svg><use> tags to render in the browser, but they'd also need the symbol's ID, (which will get too complex to display in the back-office).

With v7.5.x, our SVG Sprites display a blank/empty thumbnail preview. It looks odd. If it could revert to the old File preview that would be suffice.

I've attached an example of a SVG Sprite file that we are using, if that helps?

Bjarne Fyrstenborg 09 Nov 2016, 08:09:19

@leekelleher is the SVG blank or does it contains white paths? I think you should attach it as a .zip, otherwise I think the issue tracker converts it to an image.

Lee Kelleher 09 Nov 2016, 10:52:42

@Bjarne.Fyrstenborg I've attached as a zip. This SVG Sprite doesn't contain any colours/fills, only the paths - they are typically styled with CSS.

This could be considered an edge-case, I'm not sure. I can't see how we'd preview it in the back-office, so maybe disabling the preview could be an option?

Bjarne Fyrstenborg 09 Nov 2016, 11:27:36

@leekelleher how about adding the checkered background, like if you are uploading a white png logo?

Lee Kelleher 09 Nov 2016, 11:35:16

@Bjarne.Fyrstenborg It already has a checkered background, that's not the issue. The problem is that this type of SVG format requires different markup to render (e.g. the <svg><use> tags), which is tricky given the current feature implementation.

Lee Kelleher 09 Nov 2016, 11:45:51

Just to clarify, with this type of SVG used for sprite sheets, if rendered directly in the browser, it will output nothing. It's only by passing in an ID does the actual SVG sprite part render.

Like I say, I'm not sure how that could possibly be implemented in the media-node preview?

Bjarne Fyrstenborg 09 Nov 2016, 12:31:00

ahh, I see :) maybe an option could be to use Snap.svg http://snapsvg.io to check content of SVG and whether it contains the element. E.g. when using this SVG sprite with animals https://rawgit.com/adriengibrat/svgSprite/gh-pages/sprite.svg Here it check for any elements: https://codepen.io/bjarnefyrstenborg/pen/pNjwzJ

Priority: Normal

Type: Feature (request)

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.4.3

Due in version: 7.5.0

Sprint: Sprint 39

Story Points: