Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG images blocked by gmail proxy

It seems like the new gmail proxy for images doesn't work with SVG (gives a 404 error if you open the proxy url in a new tab.)

I haven't been able to find any documentation about supported/blocked file-types. Is SVG in gmail working for anyone else?

The only workaround I can think of is to generate a png of the svg on the server using PhantomJS - any other options?

Background:

This is for a webapp that sends daily summary emails, showing a graph covering the last 24 hours (so the svg is different each day, having it in the email saves the user the hassle of clicking through to the app.)

I know that the SVG images won't work in some email-clients, but it'll work for 95%, the rest can still click through to the webapp.

It was working fine in gmail up until the proxy change earlier this month (which has only just rolled out to Google Apps accounts at the end of the month.)

like image 898
Redzarf Avatar asked Dec 28 '13 14:12

Redzarf


People also ask

Does Gmail block SVG images?

Google Gmail does not support SVG at this time. Google Gmail Support said that they will not support it last time i contacted them. Maybe some time in the distant future when SVG becomes more popular and widely used.

Does Gmail proxy SVG?

I've heard back from Google support, and they've confirmed there are currently no plans to support SVG images in the proxy.

Are SVGs supported in email?

SVG is not supported in many email clients.

Does Gmail use proxy images?

When your users open email messages, Gmail uses Google's secure proxy servers to serve images that might be included in these messages. This protects your users and domain against image-based security vulnerabilities.


1 Answers

I've heard back from Google support, and they've confirmed there are currently no plans to support SVG images in the proxy. They said they account for only 1 in 100,000 email images.

Apart from PhantomJs, an option for simpler svg is the php plugin ImageMagick.

Here's some sample code to get you started:

header("Content-Type: image/png"); header("Content-Disposition: inline;"); if (empty($svg)) {     readfile("invisibleImage.png", true); } else {      //TODO: You'll probably want to set headers to cache the returned image      $filepath = "/path/to/where/images/are/cached/";      if (!file_exists("$filepath$svgName.png")) {         if (!is_dir($filepath)) {             mkdir($filepath, 0700, 1);         }         file_put_contents("$filepath$svgName.svg", $svg);         $cmd = "rsvg-convert $filepath$msk.svg > $filepath$svgName.png";         exec($cmd);         unlink("$filepath$svgName.svg");     }     readfile("$filepath$svgName.png"); } 

You'll want to install at least some of the following:

apt-get install librsvg2-bin libpng3 imagemagick libpng12-dev \ 
like image 159
Redzarf Avatar answered Sep 28 '22 21:09

Redzarf