add watermark to phenogrid svg export

[harryhoch]

.. make it difficulty for folks to not include Monarch's name and logo...

[yuanzhou]

Any suggestions on where to add the logo watermark? Here is a screenshot of the saved SVG.

[harryhoch]

Can we just add the logo and a line saying “www.monarchinitiative.org” at the bottom, underneath the legend?

On 17 Sep 2015, at 3:52 PM, yuanzhou notifications@github.com wrote:

Any suggestions on where to add the logo watermark? Here is a screenshot of the saved SVG.

— Reply to this email directly or view it on GitHub.

---

Harry Hochheiser University of Pittsburgh Department of Biomedical Informatics harryh@pitt.edu 412 648 9300

[kltm]

Yeah, that could certainly work, if there is space. (The slightly transparent and tastefully done overlay at export time option, while nice, does not get the info in there if somebody does a screen capture.) And that would certainly prevent the irritating injection overlay information.

Out of curiosity, what about copyright info instead of/in addition to any export (assuming an overlay--copyright in the app is supplied by the footer...wait it's not, it's disappearing again and only appearing on mouseover if you magically know it's there grargh)?

One quick, slightly tangential question: is the "www" necessary these days? Actual question as I see it pretty often; is the main server www under the hood?

[yuanzhou]

@harryhoch @kltm this is what it looks like now. I couldn't add the monarch logo until we have the SVG version of the logo, unless I play with the data URL for the logo so we don't have to use external image. No need to use "www".

[yuanzhou]

FYI, just received the SVG logo from Nicole. Will play with it.

[yuanzhou]

It turned out that I still couldn't add the svg logo (neither the png logo) in the exported SVG file. Because the SVG logo needs to be used like this inside the SVG gile:

<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="image/logo.svg" x="80" y="25" id="pg_logo" class="pg_cursor_pointer" width="40" height="26"></image>

I couldn't find a way to link to the external svg logo file (unless monarchinitiative.org uses the svg logo too and I can use a absolute URL and link it to the logo.svg on monarch server).

[kltm]

I believe to make this work as intended, it wouldn't be a file reference, but rather an injection of the contents of that file (in a container to shrink it and make it transparent) into the exported SVG.

[yuanzhou]

@kltm What do you mean by "in a container to shrink it and make it transparent"?

I was thinking about the similar approach, putting the content of that svg logo into a js file, then

var logo = require('./logo.js');

Or use data uri to include a base64 encoded string of the svg logo.

[kltm]

Okay, taking a step back, you have an exported SVG of phenogrid. This document's DOM can be manipulated either through an API or text injection before getting to the user. The logo is a similar document. You can take the contents of the logo SVG, create a container (e.g. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g), apply a transform (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform) to it to position and size it correctly, make it somewhat transparent using styling. The final SVG is then passed to the user.

[yuanzhou]

Merged via PR #187