Have you ever tried to generate a dynamic chart or map in Google Apps Script as an SVG, only to realize you can\u2019t easily share it as an image?<\/p>\n\n\n\n
Because GAS runs on Google’s servers, it doesn’t have a “screen” to render graphics. If you want to convert an SVG string into a PNG or JPG, you\u2019ll find that standard libraries are missing. But there is a workaround: The Browser Bridge.<\/p>\n\n\n\n
By using HtmlService, we can temporarily pass the SVG to the user’s browser, use the HTML5 Canvas API to rasterize it, and send the image data back to Google Drive.<\/p>\n\n\n\n
This way, you can create or edit an existing SVG file using parameters in your Spreadsheet and export it as a raster image (PNG).<\/p>\n\n\n\n
It also allows you to automate importing pf SVG files into Google Slides without using external APIs such as CloudConvert (which you could use, but it’s not free for extensive use, and you also need to share your data to a third party).<\/p>\n\n\n\n\n\n\n\n
The Architecture<\/strong><\/p>\n\n\n\n 1. GAS (Server): Prepares the SVG string.<\/p>\n\n\n\n 2. HTML (Client): Opens a hidden dialog, draws the SVG on a <canvas>.<\/p>\n\n\n\n 3. Canvas (Client): Converts the drawing to a Base64 PNG string.<\/p>\n\n\n\n 4. GAS (Server): Receives the Base64 data and saves it as a file.<\/p>\n\n\n\n Implementation<\/strong><\/p>\n\n\n\n 1. Code.gs (Server-side)<\/strong><\/p>\n\n\n\n This script coordinates the data flow and handles the final file saving.<\/p>\n\n\n\n 2. converter.html (Client-side)<\/strong><\/p>\n\n\n\n Create this file in the same project. It acts as the “Rendering Engine.”<\/p>\n\n\n\n\/**
* Main function to trigger the conversion
*\/
function startConversion() {
const svgString = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"200\" height=\"200\"><circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"red\" \/><\/svg>';
const fileName = \"converted_image.png\";
const template = HtmlService.createTemplateFromFile('converter');
template.svgData = svgString;
template.fileName = fileName;
const html = template.evaluate().setWidth(400).setHeight(300);
SpreadsheetApp.getUi().showModalDialog(html, 'Converting SVG to PNG...');
}
\/**
* Saves the Base64 data received from the client
*\/
function saveImage(base64Data, fileName) {
const decoded = Utilities.base64Decode(base64Data.split(',')[1]);
const blob = Utilities.newBlob(decoded, 'image\/png', fileName);
DriveApp.createFile(blob);
return \"Success\";
}<\/pre>\n\n\n\n<!DOCTYPE html>
<html>
<body>
<canvas id=\"canvas\" style=\"display:none;\"><\/canvas>
<script>
window.onload = function() {
\/\/ Data passed from GAS
const svgString = `<?!= svgData ?>`;
const fileName = `<?!= fileName ?>`;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
\/\/ Important: Ensure the SVG has the correct namespace
let blob = new Blob([svgString], {type: 'image\/svg+xml;charset=utf-8'});
let url = URL.createObjectURL(blob);
img.onload = function() {
canvas.width = img.width || 1200; \/\/ Set high res
canvas.height = img.height || 1200;
ctx.fillStyle = \"white\"; \/\/ Optional: background color
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
const pngData = canvas.toDataURL('image\/png');
google.script.run
.withSuccessHandler(() => google.script.host.close())
.saveImage(pngData, fileName);
};
img.src = url;
};
<\/script>
<\/body>
<\/html><\/pre>\n\n\n\n