0

I currently have a Python bs4 script which loads a .svg file and lets me change some text, colors and a few other things in it.

Today I decided to start working on a SaaS version of this script. I decided that I will probably use Python/Django for the back end in case I need some work done on the svg in the back end via bs4, and React for the front end, since it's really the only front end technology I am familiar with.

But I am having issues with loading, editing and showing the .svg files in React. I used axios for loading the .svg(it's currently locally hosted but in the future it's going to be on AWS or something) and jssoup npm package for finding elements in my svg.

Here's my current code:

import React, { useEffect, useState } from "react";
import axios from "axios";
import JSSoup from "jssoup";

function App() {
  const [pic, setPic] = useState("");

  useEffect(() => {
    axios
      .get("./newfile.svg")
      .then((res) => {
        var soup = new JSSoup(res.data, false);
        let elements = soup.findAll("g");
        console.log(elements);
        setPic(soup.prettify());
      })
      .catch((err) => console.log("Error, ", err));
  }, []);

  return (
    <div className="App">
      <img src={`data:image/svg+xml;utf8,${pic}`} />
    </div>
  );
}

export default App;

First question is, am I even using the correct tool for the job? Is JavaScript even capable of such work? Next question is, how am I supposed to actually show the .svg after doing some work on it with jssoup?

randomprogramming
  • 323
  • 3
  • 12
  • You have a lot of cool tools for sure. I have no clue WHAT you want to change in the SVG. But displaying it in an IMG takes some alterations: https://stackoverflow.com/questions/66359132/how-to-properly-encode-content-of-img-src-dataimage-svgxml – Danny '365CSI' Engelman Mar 06 '21 at 11:13
  • Hey @Danny'365CSI'Engelman thanks for the link, as it turns out I will probably need to add some onClick functionality eventually so I need the svg to stay as a svg. The more I research about this problem the more I feel like this is not the correct tool for the job. Thanks either way. – randomprogramming Mar 06 '21 at 19:11
  • JavaScript + SVG can do [this](https://stackoverflow.com/questions/66487955/show-multiple-svgs-in-single-img-tag) and [this](https://stackoverflow.com/questions/66263255/how-to-make-an-svg-interactive-to-gather-comments-annotations-on-depicted-elemen) and [this](https://stackoverflow.com/questions/66247729/display-svg-as-image-from-external-url) and [this](https://stackoverflow.com/questions/66205662/calculate-percentage-in-progress-circle). There is only one serious problem with JavaScript.... you have to learn JavaScript – Danny '365CSI' Engelman Mar 06 '21 at 19:17

0 Answers0