Make SVG Path (Vector Graphic) Simplification easier

Question

Make SVG Path (Vector Graphic) Simplification easier

Provided Input:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600">
    <g enable-background="new">
    <path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 " transform="matrix(1,0,0,-1,0,600)"/>
    <path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 111.050781 268.679688 L 111.050781 265.421875 " transform="matrix(1,0,0,-1,0,600)"/>
    <path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 268.679688 L 110.949219 265.421875 " transform="matrix(1,0,0,-1,0,600)"/>
      </g>
    </svg>

Expected Output:

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600">
        <g enable-background="new">
        <path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.07" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 110.95 265.42 L 109.73 265.69 L 108.7 266.41 L 108.01 267.46 L 107.78 268.68 "/>
        <path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.07" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 111.05 268.68 L 111.05 265.42 "/>
        <path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.07" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 110.95 268.68 L 110.95 265.42 "/>
          </g>
        </svg>

This pertains to enhancing the appearance of SVG paths. The expected output should include elements like path transform, stroke-width, stroke-linecap, stroke-linejoin, fill, stroke, and d (rounded to 2 decimal points for simplicity).

I attempted to use

svg_object_alt=document.querySelector('svg').outerHTML;

to convert the SVG to a string for processing, but I am unsure how to extract and format all the necessary information to match the expected output. Any assistance on this matter would be greatly appreciated :)

I believe that the stroke color can be set directly as #929292 instead of using the rgb color values :)

javascript html jquery css arrays

Answer 1

Answer №1

If you're looking to perform various conversions, one tool that can help is SVGOMG. However, if you prefer a custom script, here's a working example for style to attributes, rounding pathData, and converting RGB to Hex:

1. Replace Inline CSS Style with SVG Attributes

Access each path's style and replace it with attributes:

let style = path.style;

for (let i = 0; i < style.length; i++) {
  let propertyName = style.item(i);
  let value = style.getPropertyValue(propertyName);

  // Convert RGB colors to Hex
  if ((propertyName === 'stroke' || propertyName === 'fill') && value !== 'none') {
    let [r, g, b] = value.replaceAll('rgb(', '').replaceAll(')', '').split(',');
    let colorHex = rgbToHex(r, g, b);
    value = colorHex;
  }

  // Set attribute
  path.setAttribute(propertyName, value);
}

// Remove style attribute
path.removeAttribute('style');

1.2 Color Conversion RGB to Hex

Referencing the approach in this Stack Overflow post, convert RGB to Hex for color values.

1.3 Optional: Decompose the Transform Matrix

For a more detailed transformation breakdown, consider decomposing the transform matrix into separate properties like scaling, translation, rotation, etc. This is inspired by @AndreaBogazzi's solution.

2. Round PathData

Utilize a reliable parser such as getPathData() polyfill to handle pathData rounding. Here's an example implementation:

let pathData = path.getPathData();
roundPath(path, 2);

function roundPath(path, decimals = 3) {
  let pathData = path.getPathData();
  pathData.forEach((com, c) => {
    if (decimals >= 0) {
      com.values.forEach((val, v) => {
        pathData[c].values[v] = +val.toFixed(decimals);
      });
    }
  });
  // Apply rounded values
  path.setPathData(pathData);
}

By handling each command value individually, we can ensure precise rounding for pathData elements.

Answer 2

If you're looking to perform various conversions, one tool that can help is SVGOMG. However, if you prefer a custom script, here's a working example for style to attributes, rounding pathData, and converting RGB to Hex:

1. Replace Inline CSS Style with SVG Attributes

Access each path's style and replace it with attributes:

let style = path.style;

for (let i = 0; i < style.length; i++) {
  let propertyName = style.item(i);
  let value = style.getPropertyValue(propertyName);

  // Convert RGB colors to Hex
  if ((propertyName === 'stroke' || propertyName === 'fill') && value !== 'none') {
    let [r, g, b] = value.replaceAll('rgb(', '').replaceAll(')', '').split(',');
    let colorHex = rgbToHex(r, g, b);
    value = colorHex;
  }

  // Set attribute
  path.setAttribute(propertyName, value);
}

// Remove style attribute
path.removeAttribute('style');

1.2 Color Conversion RGB to Hex

Referencing the approach in this Stack Overflow post, convert RGB to Hex for color values.

1.3 Optional: Decompose the Transform Matrix

For a more detailed transformation breakdown, consider decomposing the transform matrix into separate properties like scaling, translation, rotation, etc. This is inspired by @AndreaBogazzi's solution.

2. Round PathData

Utilize a reliable parser such as getPathData() polyfill to handle pathData rounding. Here's an example implementation:

let pathData = path.getPathData();
roundPath(path, 2);

function roundPath(path, decimals = 3) {
  let pathData = path.getPathData();
  pathData.forEach((com, c) => {
    if (decimals >= 0) {
      com.values.forEach((val, v) => {
        pathData[c].values[v] = +val.toFixed(decimals);
      });
    }
  });
  // Apply rounded values
  path.setPathData(pathData);
}

By handling each command value individually, we can ensure precise rounding for pathData elements.

Answer 3

Answer №2

you have the option to utilize the following code snippet:

const mySvg_Paths = document.querySelectorAll('#my-svg > g > path');
 

for ( let attr of mySvg_Paths[2].attributes ) 
  {
  console.log(attr.name,'-->\n', attr.value);
  }
  
//  or
// console.log( 'outerHTML -->\n', mySvg_Paths[2].outerHTML );
// console.log( 'path.d -->\n', mySvg_Paths[2].getAttribute('d'));

#my-svg {
  width  : 800pt;
  height : 600pt;
  background : lightgreen;
  }
#my-svg path {
  fill              : none;
  stroke-width      : 0.074;
  stroke-linecap    : round;
  stroke-linejoin   : round;
  stroke            : rgb(50.19989%, 50.19989%, 50.19989%);
  stroke-opacity    : 1;
  stroke-miterlimit : 10;
  }

<svg id="my-svg" viewBox="0 0 800 600">
  <g enable-background="new">
    <path
      d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 "
      transform="matrix(1,0,0,-1,0,600)"/>
    <path
      d="M 111.050781 268.679688 L 111.050781 265.421875 "
      transform="matrix(1,0,0,-1,0,600)" />
    <path
      style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" 
      d="M 110.949219 268.679688 L 110.949219 265.421875 " 
      transform="matrix(1,0,0,-1,0,600)"/>
  </g>
</svg>

afterwards, you can refer to this link for further information -> Use RegEx to parse a string with complicated delimiting

especially this method:

function parseData(pathData)
  {
  var pieces = pathData.match(/([a-z]+[-.,\d ]*)/gi), i;
  /* now parse each piece into its own array */
  for (i=0; i<pieces.length; i++)
      pieces[i] = pieces[i].match(/([a-z]+|-?[.\d]*\d)/gi);
  return pieces;
  }

Answer 4

you have the option to utilize the following code snippet:

const mySvg_Paths = document.querySelectorAll('#my-svg > g > path');
 

for ( let attr of mySvg_Paths[2].attributes ) 
  {
  console.log(attr.name,'-->\n', attr.value);
  }
  
//  or
// console.log( 'outerHTML -->\n', mySvg_Paths[2].outerHTML );
// console.log( 'path.d -->\n', mySvg_Paths[2].getAttribute('d'));

#my-svg {
  width  : 800pt;
  height : 600pt;
  background : lightgreen;
  }
#my-svg path {
  fill              : none;
  stroke-width      : 0.074;
  stroke-linecap    : round;
  stroke-linejoin   : round;
  stroke            : rgb(50.19989%, 50.19989%, 50.19989%);
  stroke-opacity    : 1;
  stroke-miterlimit : 10;
  }

<svg id="my-svg" viewBox="0 0 800 600">
  <g enable-background="new">
    <path
      d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 "
      transform="matrix(1,0,0,-1,0,600)"/>
    <path
      d="M 111.050781 268.679688 L 111.050781 265.421875 "
      transform="matrix(1,0,0,-1,0,600)" />
    <path
      style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" 
      d="M 110.949219 268.679688 L 110.949219 265.421875 " 
      transform="matrix(1,0,0,-1,0,600)"/>
  </g>
</svg>

afterwards, you can refer to this link for further information -> Use RegEx to parse a string with complicated delimiting

especially this method:

function parseData(pathData)
  {
  var pieces = pathData.match(/([a-z]+[-.,\d ]*)/gi), i;
  /* now parse each piece into its own array */
  for (i=0; i<pieces.length; i++)
      pieces[i] = pieces[i].match(/([a-z]+|-?[.\d]*\d)/gi);
  return pieces;
  }

Make SVG Path (Vector Graphic) Simplification easier

Answer №1

1. Replace Inline CSS Style with SVG Attributes

1.2 Color Conversion RGB to Hex

1.3 Optional: Decompose the Transform Matrix

2. Round PathData

Answer №2

Similar questions

Exploring the Ins and Outs of Debugging JavaScript in Visual Studio Using

Why do query values disappear when refreshing a page in Next.js? [Illustrative example provided]

Incorporating interactive maps into an AngularJS web application

Creating a responsive table layout with CSS

Leveraging ForEach to merge two arrays and generate a fresh entity

Building VSCode on Windows: A step-by-step guide

The ajax function's value will be delivered at a later time

Problem detected in id modification

Is there a way to display various data with an onClick event without overwriting the existing render?

Tips for designing a HTML form using classes

Issue with VideoJS: MP4 file does not play after dynamically updating video URL

Implement an event listener on the final element of a webpage utilizing querySelector

Tips for accessing a unique window name in JavaScript

Looking to transmit metadata in JSON format for Paystack integration

Invalid template detected within the Kendo dropdown component

Unable to choose the option from the modal that functions similarly to a drop-down menu

the pause in execution before my function redirects to a different route

The precedence of theme CSS is paramount

HTML/JavaScript: Embrace the Power of Dynamic Page

Receive File - Error 500 from Server