Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ramazansancar/1e16ab480207eb2680bd8d9b968bd77b to your computer and use it in GitHub Desktop.
Save ramazansancar/1e16ab480207eb2680bd8d9b968bd77b to your computer and use it in GitHub Desktop.
It converts the SVG file into base64 encoded form to include images fed from external sources and link files such as css and fonts. (I created this so that when a download request is sent with "Export the board" in miro.com and "Save as PDF", the svg file in the "Request Payload" section transmitted from the Developer Console > Network is given …
const axios = require('axios');
const fs = require('fs');
// SVG file to convert
const filePath = './svg_external.svg';
// Output file path
const outputFilePath = './svg_external_export_base64.svg';
/**
* SVG External URL Fetcher
* It allows you to find the external URL in the SVG content.
* @param {*} svg SVG content
* @returns {Array} external URLs
*/
const urlFinder = async (svg) => {
const urlRegex = /url\("(.*?)"\)/g;
const matches = svg.match(urlRegex);
return matches;
};
/**
* SVG External Image Fetcher
* It allows you to find the image tag in the SVG content.
* @param {*} svg SVG content
* @returns {Array} image tags
*/
const imageFinder = async (svg) => {
const imageRegex = /<image.*?xlink:href="(.*?)".*?>/g;
const matches = svg.match(imageRegex);
return matches;
};
/**
* External Source Fetcher
* It allows you to send requests to external source connections and get output as base64.
* @param {*} url any external URL
* @returns base64
*/
const externalSourceFetcher = async (url) => {
console.info(`Fetching data from ${url}`);
const response = await axios.get(url, {
timeout: 10000,
redirect: 'follow',
responseType: 'arraybuffer'
}).catch((error) => {
console.error('externalSourceFetcher Error:',error?.response?.status, error?.response?.statusText);
});
let headers = response.headers;
let contentType = headers['content-type'];
if (!contentType) {
console.error('No content type found', url);
return;
}
// Base64 encoding
let base64 = Buffer.from(response.data, 'binary').toString('base64');
base64 = `data:${contentType};base64,${base64}`;
return base64;
};
// Runner
(async () => {
// Read SVG file
fs.readFile(filePath, 'utf8', async (err, data) => {
if (err) {
console.error(err);
return;
}
let svg = data;
// External Images
const images = await imageFinder(svg);
for (let i = 0; i < images.length; i++) {
const image = images[i];
const imageUrl = image.match(/xlink:href="(.*?)"/)[1];
if (!imageUrl) {
continue;
}
if (!imageUrl.includes('http')) {
continue;
}
if (imageUrl.includes('data:image/svg+xml')) {
continue;
}
const imageSvg = await externalSourceFetcher(imageUrl);
svg = svg.replace(imageUrl, imageSvg);
}
// External URLs
const urls = await urlFinder(svg);
for (let i = 0; i < urls.length; i++) {
const url = urls[i];
const extUrl = url.match(/url\("(.*?)"\)/)[1];
if (!extUrl) {
continue;
}
if (!extUrl.includes('http')) {
continue;
}
const imageSvg = await externalSourceFetcher(extUrl);
svg = svg.replace(extUrl, imageSvg);
}
// Write SVG file
fs.writeFile(outputFilePath, svg, (err) => {
if (err) {
console.error('SVG File Write Error:',err);
return;
}
console.log('SVG file created');
});
});
})();
@ramazansancar
Copy link
Author

ramazansancar commented Aug 3, 2024

Info:

It converts the SVG file into base64 encoded form to include images fed from external sources and link files such as css and fonts.

I created this so that when a download request is sent with Export the board in miro.com and Save as PDF, the svg file in the Request Payload section transmitted from the Developer Console > Network is given to the software and the external resources of the svg are converted to base64.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment