CODEWITHSUNDEEP
node.jssvgsharp
No stupid questions
No stupid questions

Reputation: 485

[Node.js, sharp]: Make text take up 100% of SVG width

I am using the sharp image library to add text labels to an image. The only way to add text to an image using sharp is by creating an svg and using the composite function to apply it onto the source image.

let width = 100;
let height = 25;
let label = "Loooooooooong Text"; // "Medium Text" "Short"

const label = Buffer.from(`
    <svg width="${width}" height="${height}">
        <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
        <text x="50%" y="50%" text-anchor="middle" dy="0.25em" fill="#000">${label}</text>
    </svg>
`);

let image = await sharp({
    create: {
        width: width,
        height: height,
        channels: 4,
        background: { r: 255, g: 255, b: 255, alpha: 1 },
    }
}).composite([{
    input: label,
    top: 0,
    left: 0,
}]).png().toBuffer();

However, I am having trouble getting the text use the space available in the container properly. Text should be centered vertically and horizontally within the svg. Text should be as tall as it is possible without overflowing the container horizontally.

This is what my code produces with different values for label:

enter image description here

This is ideally what I would like it to produce:

enter image description here

Additionally, because of an issue in sharp I cannot use dominant-baseline="middle" to center my text vertically and instead must use dy="0.25em". I'm not sure if this would change the answer but I thought it noteworthy to include.

Upvotes: 4

Views: 7048

Answers (2)

Jin Thakur
Jin Thakur

Reputation: 2773

I think You have to change height accordingly.

let width = 100;
let height = 25;
let label = "Loooooooooong  Text ";
let lengthoftext =20;

So lets assume this is perfect fitted text scenario. Now let's think text is just 10 char. so you keep width=100 but change height = 50;
and so on you take ratio heightnew = (20/lengthoftext) *25. I think all text should be same size you can just make sure what is max length and then you wrap it in next line.

Upvotes: 0

Chandan
Chandan

Reputation: 11807

You can use viewBox

const sharp = require('sharp');

const width = 100;
const height = 25;
const label = "Loooooooooong Text"; // "Medium Text" "Short"

const svg = `
<svg width="${width}" height="${height}" viewBox="0 0 ${height} ${height + 2}">
  <!--this rect should have rounded corners-->
  <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
  <text x="50%" y="50%" text-anchor="middle" dy="0.25em" fill="#000">${label}</text>
</svg>
`;

const svg_buffer = Buffer.from(svg);
const image = sharp({
    create: {
        width: width,
        height: height,
        channels: 4,
        background: { r: 255, g: 255, b: 255, alpha: 1 },
    }
})
  .composite([{
    input: svg_buffer,
    top: 0,
    left: 0,
}])
  .png()
  .toFile('sample.png');

Upvotes: 3

Related Questions