SVG/PNG in Refinery

[DeniseColbert]

Issues coming out of #141

[DeniseColbert]

From #141

How we move the styling into our SCSS depends on #151 — updating the colours and layout of the button. If we are going to use an SVG background image (the simplest in the long run), then the styling, including focus/hover, will be a part of that issue and will be solved when that is done. If we are going to stick with PNG, the styling will need to be added to our SCSS in a different manner.

So, to answer the question of whether the separate story has been made, it all depends … (!)

---

We need to find out if we can use SVG in refinery - @Vino to test.

---

@PatReynolds If we are going to update the animated version, then creating a class using the static SVG would be a stop-gap measure. However, it could be simpler to animate the CSS transition based on the updated static SVG (rather than update the original animated version itself).

From memory, the original animated version was quite complex in its setup — perhaps most of the complexity was down to being available in 3 colour schemes. We are going to use teal for all the projects, so perhaps it will be simpler than it was.

@Vino-S Was not thinking of using SVG inline, unless you consider that to be a better approach than a class?

---

[AlOneill]

Have just tried to get Refinery to save a page with some raw (inline) SVG as per the animated Donate icon. It did not work — Refinery deleted all the SVG markup.

The question is, can we (someone!) produce a version of the animated icon using classes (to create a background image), which is how our project icons are set up. I have no idea, except that it looks like a complex job and I do not know where to begin — but perhaps the penny will drop. I will continue to think about it.

In some ways a class would be easier to update — update in one place to update all instances. On the other hand, if Refinery could be persuaded to save the SVG, things would be simpler in the short term at least.

[PatReynolds]

@Vino-S to check if working.

[DeniseColbert]

Vino needs to do initial test and will ask @AlOneill if any further info is needed

[DeniseColbert]

@AlOneill to test raw SVG in Refinery

[AlOneill]

Perhaps I'm testing in the wrong place, but all the SVG elements get deleted on saving in BMD t3. @Vino-S should I be testing this somewhere else?

[AlOneill]

Also tried some very simple SVG — it was rendered correctly in the Preview pane but was deleted on saving the file.

(The SVG that I tried initially was the animated donate button — it was not rendered correctly in the Preview pane before being deleted completely.)

[DeniseColbert]

@Vino-S to look into anything else to be tried as whitelisting tags isn't working.

[DeniseColbert]

@Vino-S to look into this as above

[DeniseColbert]

Other places using refinery are able to implement SVG logos etc. Puzzling, but Vino suggests that perhaps we have a setting in Refinery that needs to be changed.

[AlOneill]

@DeniseColbert There are two ways to use SVG images:

1. as foreground, just like text or a PNG image
2. as background

Nearly everywhere on our sites, SVG is used as a background image. No problem there. I believe we are trying to use SVG as a foreground image for the donate button, yes? So, as mentioned above, the question is do we know how to implement the donate button, together with its focus and hover states, as a background image? I do not. The donate button is complex and has a number of layers. I cannot see a way to do a straight conversion from foreground to background. The button would have to be re-configured because Refinery does not like SVG foreground images.

You are probably correct, Denise and Vino, that there is a (back end) setting that needs to be changed. I have no idea where to look for such a setting.

[DeniseColbert]

Vino to look at Refinery FAQs/report a bug