wootwoot wootwoot - 6 months ago 16
Javascript Question

How to extract data from multiple svg files and store it in a javascript array

I have multiple svg files similar to

<?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.665s-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>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>


I want to be able to extract the 'path d value' and 'viewBox values' of each svg and save it into an array that looks like this, where data[i][0] is the viewbox value and data[i][1] is the path d value

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 c0,76.325,119.274,280.238,151.955,334.638c1.72,2.882,4.826,4.641,8.178,4.641c3.351,0,6.468-1.759,8.168-4.631 C290.545,440.361,409.81,236.438,409.81,160.113z M249.716,283.999c-68.303,0-123.915-55.573-123.915-123.895 c0-68.313,55.592-123.895,123.915-123.895s123.876,55.582,123.876,123.895S318.029,283.999,249.716,283.999z'],
['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 c0.83,2.667,3.322,4.484,6.116,4.465c2.804-0.039,5.256-1.876,6.048-4.563c37.478-126.533,172.6-223.307,172.609-315.869 C427.963,80.106,347.886,0,249.462,0z M249.462,313.925c-77.184,0-139.987-62.812-139.987-139.987 c0-77.184,62.803-139.987,139.987-139.987c77.165,0,139.977,62.803,139.977,139.987 C389.439,251.113,326.626,313.925,249.462,313.925z'],
['0 0 254.019 254.019', 'M126.514,48.282c-43.428,0-78.738,35.319-78.738,78.738c0,43.389,35.309,78.718,78.738,78.718 c43.389,0,78.738-35.329,78.738-78.708C205.252,83.601,169.932,48.282,126.514,48.282z M126.514,198.898 c-39.647,0-71.879-32.232-71.879-71.869s32.222-71.928,71.879-71.928s71.879,32.29,71.879,71.928 S166.171,198.898,126.514,198.898z M193.352,127.029c0,36.882-29.926,66.808-66.828,66.808 c-36.912,0-66.838-29.936-66.838-66.808c0-36.921,29.936-66.847,66.838-66.847C163.426,60.172,193.352,90.108,193.352,127.029z M41.308,56.733l0.02,38.836h-0.059c-0.391,12.389-13.971,17.117-13.971,17.117v24.924h0.02l-0.02,57.312 c0,0-5.491,7.093-12.604,0v-82.226h0.166c-8.285-3.527-14.411-4.748-14.802-17.117H0V56.733l6.224-0.029L9.252,94.28H16.6 l0.928-38.348h5.989l0.723,38.348h8.617l1.983-37.547L41.308,56.733L41.308,56.733z M252.1,122.857h-15.232v77.038h-17.596 V54.144h17.596C236.878,54.134,260.844,84.548,252.1,122.857z'],
['0 0 231.779 231.779', 'M140.501,45.881v0.322l-52.173,0.274l1.602-3.039l0,0l2.912-3.078l41.934-0.215L146.578,0 L83.55,0.342l9.028,39.042c-6.526-7.308-22.569-22.833-37.156-17.459l1.583,4.377C69.413,21.7,84.586,37.322,89.911,43.438 c-8.881,3.273-20.4,5.657-27.229-0.449l-3.087,3.517c4.055,3.635,9.194,4.885,14.606,4.866c3.166,0,6.429-0.518,9.575-1.212 c-29.643,20.351-50.336,65.548-50.14,99.792c0.225,45.441,37.283,82.069,82.665,81.825c45.451-0.215,82.069-37.254,81.845-82.714 C197.93,112.425,173.719,63.36,140.501,45.881z M139.504,176.439c-4.357,3.869-9.809,6.312-16.238,7.406l0.078,13.082 l-14.059,0.078l-0.078-13.072c-6.351-1.075-12.056-3.732-17.02-7.855c-5.95-5.09-9.008-10.991-9.164-17.537l0.264-3.586 l13.659-0.059l0.059,1.368c0.098,5.422,1.739,9.477,5.022,12.359c3.283,2.872,7.972,4.318,14.01,4.318 c6.028-0.068,10.747-1.563,14.079-4.465c3.283-2.951,4.866-6.937,4.846-12.144c-0.02-4.279-1.544-7.621-4.709-10.141 c-3.283-2.579-8.969-4.817-16.941-6.693c-8.832-2.062-15.632-5.227-20.097-9.389c-4.543-4.279-6.908-9.79-6.947-16.306 c-0.039-7.455,2.843-13.668,8.608-18.436c3.928-3.253,8.578-5.393,13.835-6.37l-0.059-11.392l14.049-0.078l0.059,11.021 c6.282,0.85,11.558,3.039,15.681,6.468c5.52,4.602,8.568,11.021,9.008,19.052l0.078,1.397l-13.776,0.068l-0.156-1.143 c-0.664-5.012-2.345-8.764-5.071-11.148c-2.667-2.345-6.605-3.576-11.714-3.527c-5.305,0.01-9.575,1.309-12.476,3.762 c-2.902,2.423-4.279,5.706-4.26,10.102c0,3.801,1.339,6.771,4.006,9.008c2.706,2.286,7.552,4.27,14.391,5.872 c10.014,2.306,17.596,5.764,22.628,10.268c5.032,4.572,7.63,10.386,7.65,17.293C148.815,164.266,145.718,171.134,139.504,176.439 z'],
['0 0 202.614 202.614', 'M177.91,55.377h-22.589v-1.368C155.311,24.25,131.091,0,101.302,0 C71.503,0,47.292,24.25,47.292,54.009v1.368H24.704L11.495,202.614h179.624L177.91,55.377L177.91,55.377z M101.302,6.624 c19.687,0,36.619,12.105,43.761,29.232c-9.448-14.137-25.5-23.478-43.761-23.478c-18.231,0-34.313,9.34-43.77,23.507 C64.713,18.729,81.635,6.624,101.302,6.624z M57.297,55.377c4.406-20.263,22.481-35.485,44.024-35.485 c21.582,0,39.618,15.222,44.024,35.485H57.297z']];


Anyone have any ideas how to do this?

Edit.
I want to be able to loop through the array and create svg for use in a 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>';
}

Answer

In node.js, cheerio is the best suitable module for your case. I wrote a code very roughly but it might be enough to accomplish your goal.

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

var paths = [
  'one.svg',
  'two.svg'
  // ...and so on, Write all your SVGs
];

var results = [];
var count = 0;

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

    var $ = cheerio.load(data, { xmlMode: true });
    var data = getDatum($);
    results.push(data);

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

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(); 
  });
}