Guide on retrieving information from various svg documents and saving it within a javascript array

Question

Guide on retrieving information from various svg documents and saving it within a javascript array

I have a collection of svg files that are structured like this:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 684.214 684.214" style="enable-background:new 0 0 684.214 684.214;" xml:space="preserve">
<g>
    <g>
        <g>
            <path style="fill:#010002;" d="M285.22,103.603h49.476v222.613h-89.065L285.22,103.603z M349.567,103.603v222.613h89.065
                l-39.579-222.613H349.567z M557.652,215.549c0,119.059-215.549,468.665-215.549,468.665
                s-215.54-349.606-215.54-468.665
                C126.563,96.519,223.063,0,342.112,0S557.671,96.519,557.652,215.549z M508.908,215.549c0-91.957-74.83-166.777-166.796-166.777
                s-166.786,74.82-166.786,166.777s74.82,166.796,166.786,166.796S508.908,307.506,508.908,215.549z"/>
        </g>
    </g>
</g>
<g>
</g>
<g>
</g>
...

My goal is to extract the 'path d value' and 'viewBox values' for each svg file and store them in an array structured like this:

 data = [
        ['0 0 499.392 499.392', 'M409.81,160.113C409.79,71.684,338.136,0,249.725,0C161.276,0,89.583,71.684,89.583,160.113 ...'],
        ['0 0 498.923 498.923', 'M249.462,0C151.018,0,70.951,80.106,70.951,178.511c0,92.436,133.617,192.453,172.248,315.948 ...'],
        ...
];

Anyone have any ideas how to accomplish this task?

Edit:
I would like to loop through the array and generate svgs for use in a web browser:

for (var i=0; i<data.length; i++) {
            html += '<div class="tour-tag-icon" data-path="'+ data[i][1] +'" data-viewbox="'+ data[i][0] +'">';
            html += '   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="'+ data[i][0] +'" xml:space="preserve" width="40px" height="40px">';
            html += '       <path d="'+ data[i][1] +'"></path>';
            html += '   </svg>';
            html += '</div>';
}

-- Updated --

Completed code - Thanks to Jinyoung Kim

This code searches through the 'svg' directory, retrieves all svg files automatically.

Looks through 'svg' directory and automatically finds all svg files

function getDatum($) {
  return [$('svg').attr('viewBox'), $('path').attr('d')];
}

function generateJson() {
  fs.writeFile('./output.json', JSON.stringify(results), 'utf8', function () {
    console.log('completed!');
    process.exit(); 
  });
}

javascript arrays svg

Answer 1

Answer №1

If you are working with node.js, the cheerio module is highly recommended for your task. I have provided a rough code snippet below which should help you achieve your desired outcome.

const cheerio = require('cheerio');
const fs = require('fs');

const paths = [
  'image1.svg',
  'image2.svg'
  // Add all your SVG file paths here
];

const results = [];
let count = 0;

paths.forEach((path) => {
  fs.readFile(path, 'utf8', (err, data) => {
    if (err) { return console.error(err); }

    const $ = cheerio.load(data, { xmlMode: true });
    const imageData = getSvgData($);
    results.push(imageData);

    count++;
    if (paths.length === count) { createJsonFile(); }
  });
});

function getSvgData($) {
  return [$('svg').attr('viewBox'), $('path').attr('d')];
}

function createJsonFile() {
  fs.writeFile('./output.json', JSON.stringify(results), 'utf8', () => {
    console.log('Process completed successfully!');
    process.exit();
  });
}

Answer 2

If you are working with node.js, the cheerio module is highly recommended for your task. I have provided a rough code snippet below which should help you achieve your desired outcome.

const cheerio = require('cheerio');
const fs = require('fs');

const paths = [
  'image1.svg',
  'image2.svg'
  // Add all your SVG file paths here
];

const results = [];
let count = 0;

paths.forEach((path) => {
  fs.readFile(path, 'utf8', (err, data) => {
    if (err) { return console.error(err); }

    const $ = cheerio.load(data, { xmlMode: true });
    const imageData = getSvgData($);
    results.push(imageData);

    count++;
    if (paths.length === count) { createJsonFile(); }
  });
});

function getSvgData($) {
  return [$('svg').attr('viewBox'), $('path').attr('d')];
}

function createJsonFile() {
  fs.writeFile('./output.json', JSON.stringify(results), 'utf8', () => {
    console.log('Process completed successfully!');
    process.exit();
  });
}

Guide on retrieving information from various svg documents and saving it within a javascript array

Answer №1

Similar questions

Is there a way to transform a regular CommonJS declaration into an ECMAScript import when it is making multiple requires in a single line?

Deactivating the submit button after a single click without compromising the form's functionality

Angular element for dynamic background image based on conditions

Experiencing perplexity due to receiving this error message: "Unable to access property 'checked' of an undefined or null reference."

Retrieving JSON information and refreshing the display

How can I create the effect of text changing color automatically after a specified time period has elapsed

Is there a way to activate a click event when I click on a button that is located outside of the dialog element?

The watch function remains inactive until it is triggered by an event

The textarea field activates a select event listener whenever a button or link is clicked within the DOM

Creating a component that responds to changes in the state data

Discovering components within a 3 by 3 matrix

From time to time, I may post files of substantial size

What is the best way to identify the highest three test scores along with the corresponding names in my array?

Create reactivity in output by utilizing global functions in Vue

How do I assign a value to a multi-dimensional array in statically compiled Groovy?

Flexbox causing issues with relative positioning at the bottom of the screen in various browsers

The initial JavaScript load shared by all users is quite large in the next.js framework

Encountered a "Transformer is not a constructor" error when trying to upgrade the React Native SDK version from 0.61.5 to 0.64

Achieve horizontal bar movement by utilizing google.visualization.DataTable in a left-to-right motion

Sending data back and forth across 2 tabs within one page