saxi icon indicating copy to clipboard operation
saxi copied to clipboard

Export optimized SVG

Open Jip-Hop opened this issue 4 years ago • 2 comments

Hi nornagon,

How would you feel like an "Export SVG" feature? I find saxi the most sexy and fast option to optimize an SVG for plotting. I have a Makelangelo machine, not an Axidraw, but I'd still use saxi to optimize my files before plotting if it had an export button. I quickly tested the saxi optimized output, by copy pasting the contents of the SVG tag in the DOM, but it includes extra stuff like the "pen up" moves.

The fact that saxi also reverses paths when optimizing is super. The official Axidraw Inkscape plugins don't do that. And saxi doesn't need Inkscape, which is another big plus for me.

The only other program I found which optimizes SVG with similar efficiency is LightBurn. It exports to gcode, which would work for me as well. But I still like saxi better.

Will you consider adding this feature?

Jip-Hop avatar Jun 24 '20 12:06 Jip-Hop

This snippet will let you download the optimized SVG with the pen-up moves stripped out.

(function () {
  var svg = document.querySelector(".preview > svg").cloneNode(true);
  svg.removeAttribute("width");
  svg.removeAttribute("height");
  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
  svg.setAttribute("viewBox", "0 0 1500 1500");
  svg.setAttribute("fill", "none");
  svg.setAttribute("style", "stroke: #ff0000; stroke-width: 1;");

  // Remove additional groups
  while (svg.childNodes.length > 1) {
    svg.removeChild(svg.lastChild);
  }

  var group = svg.firstChild;
  while (group.firstChild) {
    let child = group.firstChild;
    let style = child.getAttribute("style");
    if (style && style.indexOf("rgba(0, 0, 0, 0.3)") > -1) {
      // Get rid of the pen-up lines, based on their color
      group.removeChild(child);
    } else {
      // Move pen-down moves out of group tag
      svg.appendChild(child);
    }
  }

  // Remove remaining group
  svg.removeChild(group);

  var svgData = svg.outerHTML;
  var svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
  var svgUrl = URL.createObjectURL(svgBlob);
  var downloadLink = document.createElement("a");
  downloadLink.href = svgUrl;
  downloadLink.download = "saxi-optimized.svg";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
})();

Can be copy pasted into the JavaScript console. But I still think an export button would be nice. 🙂

Jip-Hop avatar Jun 26 '20 13:06 Jip-Hop

Seems like a reasonable thing to add.

nornagon avatar Jun 26 '20 16:06 nornagon