Text isn't properly aligned when converting from svg to png

[ksbalajee]

Question about an existing feature

What are you trying to achieve?

I'm trying to convert an SVG to PNG using the sharp. The conversion happens without any issues but the text present in the SVG is not properly aligned in PNG. I assume the y attribute of the text is not properly picked up during the conversion.

When you searched for similar issues, what did you find that might be related?

Can't find anything related to this issue.

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this question

This is the SVG that I'm trying to convert to PNG.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 105" width="1140" height="105">
    <g>
        <path d="M0,-6.204032394013997L5.372849659117709,3.1020161970069986L-5.372849659117709,3.1020161970069986Z" transform="translate(101.13766872486377, 32.863971957822116) rotate(-75.57922687248902)" fill="rgb(110, 64, 170)" stroke="white" stroke-width="1.5" />
        <path d="M0,-6.204032394013997L5.372849659117709,3.1020161970069986L-5.372849659117709,3.1020161970069986Z" transform="translate(101.5, 30) rotate(-90)" fill="rgb(110, 64, 170)" stroke="white" stroke-width="1.5" />
        <path d="M0,-6.204032394013997L5.372849659117709,3.1020161970069986L-5.372849659117709,3.1020161970069986Z" transform="translate(871.5, 30) rotate(-90)" fill="rgb(210, 62, 167)" stroke="white" stroke-width="1.5" />
        <path d="M0,-6.204032394013997L5.372849659117709,3.1020161970069986L-5.372849659117709,3.1020161970069986Z" transform="translate(276.5, 75) rotate(-90)" fill="rgb(239, 167, 47)" stroke="white" stroke-width="1.5" />
        <path d="M0,-6.204032394013997L5.372849659117709,3.1020161970069986L-5.372849659117709,3.1020161970069986Z" transform="translate(471.5, 75) rotate(-90)" fill="rgb(175, 240, 91)" stroke="white" stroke-width="1.5" />
        <path d="M0,-6.204032394013997L5.372849659117709,3.1020161970069986L-5.372849659117709,3.1020161970069986Z" transform="translate(686.5, 75) rotate(-90)" fill="rgb(64, 243, 115)" stroke="white" stroke-width="1.5" />
        <path d="M0,-6.204032394013997L5.372849659117709,3.1020161970069986L-5.372849659117709,3.1020161970069986Z" transform="translate(806.5, 75) rotate(-90)" fill="rgb(26, 199, 194)" stroke="white" stroke-width="1.5" />
        <path d="M0,-6.204032394013997L5.372849659117709,3.1020161970069986L-5.372849659117709,3.1020161970069986Z" transform="translate(832.0603170554216, 65.92244950017225) rotate(217.8749836510982)" fill="rgb(65, 125, 224)" stroke="white" stroke-width="1.5" />
    </g>
    <defs>
        <linearGradient id="SpeechToTextVendor--GetAllInputFields" gradientUnits="userSpaceOnUse" x1="90" x2="265" y1="30" y2="75">
            <stop offset="0%" stop-color="rgb(110, 64, 170)" />
            <stop offset="100%" stop-color="rgb(239, 167, 47)" />
        </linearGradient>
        <linearGradient id="SpeechToTextVendor--HTML" gradientUnits="userSpaceOnUse" x1="90" x2="860" y1="30" y2="30">
            <stop offset="0%" stop-color="rgb(110, 64, 170)" />
            <stop offset="100%" stop-color="rgb(210, 62, 167)" />
        </linearGradient>
        <linearGradient id="HTML--::HTML" gradientUnits="userSpaceOnUse" x1="860" x2="1025" y1="30" y2="60">
            <stop offset="0%" stop-color="rgb(210, 62, 167)" />
            <stop offset="100%" stop-color="rgb(255, 94, 99)" />
        </linearGradient>
        <linearGradient id="HTML--::HTML" gradientUnits="userSpaceOnUse" x1="860" x2="1025" y1="30" y2="60">
            <stop offset="0%" stop-color="rgb(210, 62, 167)" />
            <stop offset="100%" stop-color="rgb(255, 94, 99)" />
        </linearGradient>
        <linearGradient id="GetAllInputFields--_GetAllUserPreferences" gradientUnits="userSpaceOnUse" x1="265" x2="460" y1="75" y2="75">
            <stop offset="0%" stop-color="rgb(239, 167, 47)" />
            <stop offset="100%" stop-color="rgb(175, 240, 91)" />
        </linearGradient>
        <linearGradient id="_GetAllUserPreferences--GetAllUserPreferences" gradientUnits="userSpaceOnUse" x1="460" x2="675" y1="75" y2="75">
            <stop offset="0%" stop-color="rgb(175, 240, 91)" />
            <stop offset="100%" stop-color="rgb(64, 243, 115)" />
        </linearGradient>
        <linearGradient id="GetAllUserPreferences--Get" gradientUnits="userSpaceOnUse" x1="675" x2="795" y1="75" y2="75">
            <stop offset="0%" stop-color="rgb(64, 243, 115)" />
            <stop offset="100%" stop-color="rgb(26, 199, 194)" />
        </linearGradient>
        <linearGradient id="Get--::PassThrough.Get" gradientUnits="userSpaceOnUse" x1="795" x2="825" y1="75" y2="75">
            <stop offset="0%" stop-color="rgb(26, 199, 194)" />
            <stop offset="100%" stop-color="rgb(65, 125, 224)" />
        </linearGradient>
        <linearGradient id="::PassThrough.Get--HTML" gradientUnits="userSpaceOnUse" x1="825" x2="860" y1="75" y2="30">
            <stop offset="0%" stop-color="rgb(65, 125, 224)" />
            <stop offset="100%" stop-color="rgb(210, 62, 167)" />
        </linearGradient>
    </defs>
    <g>
        <path d="M90,30L265,75" fill="none" stroke-width="3" stroke="url(#SpeechToTextVendor--GetAllInputFields)" />
        <path d="M90,30C90,30,205.08893677815138,30,265,30C328.2419581242258,30,393.4136899138126,29.999999999999996,460,30C529.917658110101,29.999999999999993,613.7079749540395,30,675,30C720.7904976487664,30.000000000000007,768.3333333333334,30,795,30C808.3333333333334,30,814.6148139681571,30,825,30C836.2172829628499,29.999999999999996,860,30,860,30" fill="none" stroke-width="3" stroke="url(#SpeechToTextVendor--HTML)" />
        <path fill="none" stroke-width="3" stroke="url(#HTML--::HTML)" />
        <path d="M860,30C860,30,879.767389548481,28.265188135293567,895,30C924.7402978907443,33.387063681893174,1025,60,1025,60" fill="none" stroke-width="3" stroke="url(#HTML--::HTML)" />
        <path d="M265,75L460,75" fill="none" stroke-width="3" stroke="url(#GetAllInputFields--_GetAllUserPreferences)" />
        <path d="M460,75L675,75" fill="none" stroke-width="3" stroke="url(#_GetAllUserPreferences--GetAllUserPreferences)" />
        <path d="M675,75L795,75" fill="none" stroke-width="3" stroke="url(#GetAllUserPreferences--Get)" />
        <path d="M795,75L825,75" fill="none" stroke-width="3" stroke="url(#Get--::PassThrough.Get)" />
        <path d="M825,75L860,30" fill="none" stroke-width="3" stroke="url(#::PassThrough.Get--HTML)" />
    </g>
    <g transform="">
        <g transform="translate(90, 30)">
            <circle r="10" fill="rgb(110, 64, 170)" />
            <text y="10" font-weight="bold" font-family="sans-serif" text-anchor="middle" alignment-baseline="text-before-edge">SpeechToTextVendor</text>
        </g>
        <g transform="translate(860, 30)">
            <circle r="10" fill="rgb(210, 62, 167)" />
            <text y="10" font-weight="bold" font-family="sans-serif" text-anchor="middle" alignment-baseline="text-before-edge">HTML</text>
        </g>
        <g transform="translate(1025, 60)">
            <circle r="10" fill="rgb(255, 94, 99)" />
            <text y="10" font-weight="bold" font-family="sans-serif" text-anchor="middle" alignment-baseline="text-before-edge">AJ-Document::View::HTML</text>
        </g>
        <g transform="translate(265, 75)">
            <circle r="10" fill="rgb(239, 167, 47)" />
            <text y="10" font-weight="bold" font-family="sans-serif" text-anchor="middle" alignment-baseline="text-before-edge">GetAllInputFields</text>
        </g>
        <g transform="translate(460, 75)">
            <circle r="10" fill="rgb(175, 240, 91)" />
            <text y="10" font-weight="bold" font-family="sans-serif" text-anchor="middle" alignment-baseline="text-before-edge">_GetAllUserPreferences</text>
        </g>
        <g transform="translate(675, 75)">
            <circle r="10" fill="rgb(64, 243, 115)" />
            <text y="10" font-weight="bold" font-family="sans-serif" text-anchor="middle" alignment-baseline="text-before-edge">GetAllUserPreferences</text>
        </g>
        <g transform="translate(795, 75)">
            <circle r="10" fill="rgb(26, 199, 194)" />
            <text y="10" font-weight="bold" font-family="sans-serif" text-anchor="middle" alignment-baseline="text-before-edge">Get</text>
        </g>
        <g transform="translate(825, 75)">
            <circle r="10" fill="rgb(65, 125, 224)" />
            <text y="10" font-weight="bold" font-family="sans-serif" text-anchor="middle" alignment-baseline="text-before-edge">Get</text>
        </g>
    </g>
</svg>

Used the following snippet to convert this into PNG

const sharp = require("sharp")

sharp("source.svg", { density: 300})
  .png()
  .toFile("target.png")
  .then(function(info) {
    console.log(info)
  })
  .catch(function(err) {
    console.log(err)
  })

Please provide sample image(s) that help explain this question

The following is the screenshot of the SVG opened in browser

The following is the generated PNG. Notice that the text below the nodes are slightly moved upwards

[lovell]

Hi, did you see #1996 ?

[ksbalajee]

Thanks @lovell