In this notebook, we'll be transforming an SVG-file to the PNG format.
First of all, we import 'Sharp' into our notebook. Sharp is a small image library for Node.js, which depends on 'libvips' (which is already pre-installed on most systems out there...)
const sharp = require('sharp');
Then we need to define the text our SVG file should contain.
const TEXT = 'Enter your text here.';
Since SVGs don't support automatic line breaks, we need to split the text before it outgrows the SVG's width.
The function below splits the text into single words and rejoins them in word groups with a length lower than MAX_LENGTH. This way we can create lines of text that's supposed to fit in the SVG's width.
const MAX_LENGTH = 17;
const segments = TEXT
.split(' ') // split text at every blank space
.reduce((parts, current) => {
const [prev] = parts.slice(-1); // return last element of array
if (!prev) { // if no previous element is available, automatically return current word
return [current];
}
// otherwise check, whether current word incl. previous word have a length greater than MAX_LENGTH
// if so, append current word to the parts array,
// else attach current word to previous word and return updated parts array
return prev.length + current.length + 1 > MAX_LENGTH
? [...parts, current]
: [...parts.slice(0, -1), `${prev} ${current}`];
}, []);
Afterwards, we define our SVG template - this will be basically our PNG at the end.
Note the .map() function on line 33; this will render our previously split lines as single <text> elements using the 'printLine()' function on line 21.
let y = 16; // set height, where text should be placed
const printLine = (segment) => `<text x="8px" y="${y += 16}px" font-family="'Oxygen', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'" font-weight="bold" fill="#5603B0">${segment}</text>`;
const SVG = `
<svg width="1200" height="675" viewBox="0 0 160 90">
<rect width="160px" height="90px" fill="#FFFFFF" stroke="#E8E8EE" stroke-width="8px" />
<rect x="4px" y="4px" width="152px" fill="#FFFFFF" height="82px" stroke="#5603B0" stroke-width="1px" />
<rect x="4px" y="4px" width="152px" height="8px" fill="#5603B0" />
<path d="M 8,12 L 10,6 41.12,6 43.12,12 8,12" fill="#FFFFFF" />
<circle fill="#E8E8EE" cx="142px" cy="8px" r="2px" />
<circle fill="#E8E8EE" cx="147px" cy="8px" r="2px" />
<circle fill="#E8E8EE" cx="152px" cy="8px" r="2px" />
<text x="8px" y="82px" fill="#303036" font-family="'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace" font-size="5px">January 22, 2021</text>
${segments.map(printLine)}
</svg>
`;
const buffer = Buffer.from(SVG, 'utf-8'); // create a Buffer for sharp
sharp(buffer)
.toFormat('png')
.toBuffer()
.then(console.log);
You can now expand the resulting Uint8Array-preview to view the PNG outcome after Sharp's transformation.
no comments
sign in to comment