Using Sharp to turn svg to png corrupts text in node.js

Question

I am using sharp to convert an svg file into png format to upload to a slack workspace.

I found the same issue here

 const options = {
    d3Module: d3,
    selector: '#chart',
    container: '<div id="container"><div id="chart"></div></div>'
  }
  const d3n = new D3Node(options);
  const margin = {
    top: 10, right: 5, bottom: 30, left: 5
  }

  const width = 1000 - margin.left - margin.right;
  const height = 400 - margin.top - margin.bottom;
  const svgWidth = width + margin.left + margin.right;
  const svgHeight = height + margin.top + margin.bottom;

  const svg = d3n.createSVG(svgWidth, svgHeight);
  const tempData = [{ year: 2020, value: 100 }, { year: 2019, value: 200 }, { year: 2018, value: 30 }, { year: 2017, value: 50 }, { year: 2016, value: 80 }];

  const xScale = d3.scaleBand().range([0,width]).padding(0.5);
  const yScale = d3.scaleLinear().range([height,0]);
  
  let yMax = d3.max(tempData, (d) => {return d.value})
  yMax += yMax * 0.3;
  xScale.domain(tempData.map((d) => {return d.year} ))
  yScale.domain([0,yMax]);

  svg.append('rect')
    .attr('width','100%')
    .attr('height', '100%')
    .style('fill','rgb(28, 35, 51);');

  svg.append('text')
    .attr('transform','translate(150,0)')
    .attr('fill','#85ceff')
    .attr('font-size','24px')
    .attr('x',50)
    .attr('y',50)
    .text('Node and D3 Bar chart')
  
  svg.append('g').attr('transform',`translate(${100}, ${100})`);

  svg.append('g')
    .attr('transform', `translate(50, ${height})`)
    .call(d3.axisBottom(xScale))
    .append('text')
    .attr('y', height-380)
    .attr('x',width-500)
    .attr('text-anchor','end')
    .attr('stroke','black')
    .attr('fill','#85ceff')
    .attr('font-size','20px')
    .text('Year')
  
  svg.append('g')
    .attr('transform','translate(50,0)')
    .call(d3.axisLeft(yScale).tickFormat((d) => {
      return `$${d}`;
    }).ticks(5))
    .append('text')
    .attr('transform','rotate(-90)')
    .attr('y',150)
    .attr('x',-150)
    .attr('dy','-9.1em')
    .attr('text-anchor','end')
    .attr('stroke','black')
    .attr('font-size','20px')
    .attr('fill','#85ceff')
    .text('Cost')

  fs.writeFileSync('out.svg', d3n.svgString());
  sharp('out.svg')
    .png()
    .toFile('sharp.png')
    .then((info) => {
      console.log("Svg to Png conversion completed", info);
    })
    .catch((error) => {
      console.log(error)
    })

However, when I process my svg to png my text gets corrupted and is no longer in the photo. What am I doing wrong here?

To clarify, I am running this server on replit . When I run this code locally, the png is not corrupted. Could the replit server be the issue?

Answer 1

After browsing several Github Issues about this [ Link 1 , Link 2 , Link 3 ] , I did more research and discovered that I needed a font-config file and fonts downloaded because the Replit server did not have the fonts installed.

File Structure

    - index.js
    - api
     - fetch.js
    - fonts
     - fonts.conf
     - SourceSansPro-Regular.ttf

fonts.conf

     <?xml version="1.0"?>
     <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
     <fontconfig>
     <dir>/home/runner/gittrack/fonts</dir>
     <config></config>
     </fontconfig>

Once I added the above changes, I am now getting fonts on my png