Created
August 3, 2024 20:47
-
-
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 …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | |
}); | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 andSave as PDF
, the svg file in theRequest Payload
section transmitted from theDeveloper Console > Network
is given to the software and the external resources of the svg are converted to base64.