I wanna develop an svg to eps using react without any 3rd part api. Is it possible to make it possible without any 3rd party api? I am using react for this.
I wanna develop an svg to eps using react without any 3rd part api. Is it possible to make it possible without any 3rd party api? I am using react for this.

import React, { useState } from 'react';
import { saveAs } from 'file-saver';
import * as d3 from 'd3';

function App() {
  const [svgContent, setSvgContent] = useState(null);
  const [epsContent, setEpsContent] = useState(null);

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file && file.type === 'image/svg+xml') {
      const reader = new FileReader();
      reader.onload = (e) => {
        setSvgContent(e.target.result);
      };
      reader.readAsText(file);
    } else {
      alert('Please upload an SVG file.');
    }
  };

  const convertSvgToEps = () => {
    if (svgContent) {
      // Basic EPS header
      const epsHeader = `%!PS-Adobe-3.0 EPSF-3.0
%%BoundingBox: 0 0 500 500
%%Title: Converted from SVG
%%Creator: SVG to EPS Converter
%%CreationDate: ${new Date().toISOString()}
%%EndComments
`;

      const svg = d3.select(d3.create("svg").html(svgContent).node());

      let epsBody = '';

      svg.selectAll("circle").each(function() {
        const circle = d3.select(this);
        const cx = circle.attr("cx");
        const cy = circle.attr("cy");
        const r = circle.attr("r");
        const fill = circle.attr("fill") || "black";
        epsBody += `${fill} setrgbcolornnewpathn${cx} ${cy} ${r} 0 360 arcnfilln`;
      });

      svg.selectAll("rect").each(function() {
        const rect = d3.select(this);
        const x = rect.attr("x");
        const y = rect.attr("y");
        const width = rect.attr("width");
        const height = rect.attr("height");
        const fill = rect.attr("fill") || "black";
        epsBody += `${fill} setrgbcolornnewpathn${x} ${y} moveton${width} 0 rlineton0 ${height} rlineton${-width} 0 rlinetonclosepathnfilln`;
      });

      const epsContent = `${epsHeader}${epsBody}
showpage
`;

      setEpsContent(epsContent);
    }
  };

  const handleDownload = () => {
    if (epsContent) {
      const blob = new Blob([epsContent], { type: 'application/postscript' });
      saveAs(blob, 'converted.eps');
    }
  };

  return (
    <div className="App">
      <h1>SVG to EPS Converter</h1>
      <input type="file" accept=".svg" onChange={handleFileChange} />
      <button onClick={convertSvgToEps}>Convert to EPS</button>
      {epsContent && (
        <button onClick={handleDownload}>Download EPS</button>
      )}
    </div>
  );
}

export default App;