How can I serve an SVG image from Google Cloud Storage? - php

Question

Right now I'm working on allowing user image uploads to my site using the Google Cloud Storage. Uploading regular image files such as jpg, png, gif, and webp works fine. However, SVG images do not work. They get uploaded ok but when I have the PHP code echo the URL as an image source, all browsers just display the missing image icon. However, it does appear as if the image is downloading in the network tab of the code inspector. Not only that, pasting the link into it's own tab causes the file to download. This makes me think that the server is telling the browser to download the file rather than serve it as an image. Here is the code that I am using:
include 'GDS/GDS.php';
//create datastore
$obj_store = new GDS\Store('HomeImages');
$bucket = CloudStorageTools::getDefaultGoogleStorageBucketName();
$root_path = 'gs://' . $bucket . '/' . $_SERVER["REQUEST_ID_HASH"] . '/';
$public_urls = [];
//loop through all files that are images
foreach($_FILES['images']['name'] as $idx => $name) {
if ($_FILES['images']['type'][$idx] === 'image/jpeg' || $_FILES['images']['type'][$idx] === 'image/png' || $_FILES['images']['type'][$idx] === 'image/gif' || $_FILES['images']['type'][$idx] === 'image/webp' || $_FILES['images']['type'][$idx] === 'image/svg+xml') {
//path where the file should be moved to
$original = $root_path . 'original/' . $name;
//move the file
move_uploaded_file($_FILES['images']['tmp_name'][$idx], $original);
//don't use the getImageServingUrl function on SVG files because they aren't really images
if($_FILES['images']['type'][$idx] === 'image/svg+xml')
$public_urls[] = [
'name' => $name,
'original' => CloudStorageTools::getPublicUrl($original, true),
'thumb' => CloudStorageTools::getPublicUrl($original, true),
'location' => $original
];
else
$public_urls[] = [
'name' => $name,
'original' => CloudStorageTools::getImageServingUrl($original, ['size' => 1263, 'secure_url' => true]),
'thumb' => CloudStorageTools::getImageServingUrl($original, ['size' => 150, 'secure_url' => true]),
'location' => $original
];
}
}
//store image location and name in the datastore
foreach($public_urls as $urls){
$image = new GDS\Entity();
$image->URL = $urls['original'];
$image->thumbURL = $urls['thumb'];
$image->name = $urls['name'];
$image->location = $urls['location'];
$obj_store->upsert($image);
}
//redirect back to the admin page
header('Location: /admin/homeimages');

Answer 1

Having run into this issue just now, I found a solution. It turns out that every file in a bucket has metadata attached and stored as key-value pairs. The key we're after is 'Content-Type', and the value isn't always correct for SVG. the value needs to be 'image/svg+xml'. I don't know how to set that programmatically, but if you only have a few objects, then it's easy to do in the file's ellipses menu in the online interface for the bucket.