❤
npm
Sign UpSign In

simple-svg-parser

1.1.5 • Public • Published

Simple SVG Parser

Usage

    const src = `<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
        <g>
            <path d="M57.141,23.67c0.991,0,1.795-0.803,1.795-1.795V12.95c0-0.503-0.211-0.982-0.581-1.322   c-0.37-0.339-0.864-0.506-1.366-0.466c-5.043,0.431-8.846,4.578-8.846,9.645v1.069c0,0.991,0.803,1.795,1.795,1.795   s1.795-0.803,1.795-1.795v-1.069c0-2.444,1.484-4.602,3.615-5.562v6.631C55.347,22.866,56.15,23.67,57.141,23.67z"></path>
            <path d="M53.494,33.997h-0.397c-1.129,0-2.052,0.923-2.052,2.052v3.177c0,1.129,0.923,2.052,2.052,2.052h0.397   c1.129,0,2.052-0.923,2.052-2.052v-3.177C55.546,34.921,54.622,33.997,53.494,33.997z"></path>
            <path d="M93.205,25.556H60.279h-15.69V23.67v-8.974c0-0.503-0.211-0.982-0.581-1.322c-0.37-0.339-0.866-0.505-1.366-0.466   c-5.043,0.431-8.846,4.578-8.846,9.645v30.095c0,2.916-2.372,5.289-5.289,5.289H23.47c-5.83,0-10.573,4.743-10.573,10.574v17.9   c0,0.991,0.803,1.795,1.795,1.795h7.022c0.991,0,1.795-0.803,1.795-1.795v-5.095h17.635v5.734c0,0.991,0.803,1.795,1.795,1.795   h7.34c0.991,0,1.795-0.803,1.795-1.795c0,0,0-20.925,0-21.091c0-3.666,2.26-9.292,5.64-9.548   c7.897-0.599,17.052-3.109,24.427-8.315c0.862-0.608,1.673-1.235,2.453-1.874c0.067-0.055,0.138-0.11,0.204-0.165   C91.399,40.579,95,34.03,95,27.35C95,26.359,94.197,25.556,93.205,25.556z M81.808,41.832c0,1.32-0.641,2.557-1.72,3.318   l-0.018,0.013c-6.692,4.723-15.258,7.657-22.358,7.658c-13.832,0.002-7.975,32.434-9.229,32.434c0,0-3.751,0-3.751,0v-5.734   c0-0.991-0.803-1.795-1.795-1.795H21.714c-0.991,0-1.795,0.803-1.795,1.795v5.095h-3.433V68.511c0-3.857,3.127-6.984,6.984-6.984   h5.037c4.903,0,8.878-3.975,8.878-8.878V22.553c0-2.444,1.484-4.603,3.615-5.563v10.36c0,0.991,0.803,1.795,1.795,1.795h1.77   h15.714h19.697c1.012,0,1.832,0.82,1.832,1.832V41.832z M86.27,39.607c-0.3,0.349-0.872,0.147-0.872-0.314v-8.92   c0-0.679,0.55-1.229,1.229-1.229h4.672C90.856,32.703,89.115,36.291,86.27,39.607z"></path>
            <path d="M13.489,59.337l-5.426-5.426c-0.701-0.7-1.837-0.7-2.538,0c-0.7,0.701-0.7,1.837,0,2.538l5.426,5.426   c0.351,0.35,0.81,0.526,1.269,0.526s0.918-0.175,1.269-0.526C14.189,61.174,14.189,60.038,13.489,59.337z"></path>
        </g>
    </svg>`;

    const _ = require('lodash');
    const Parser = require('simple-svg-parser');
    const parser = new Parser({
        defs: '<%= defs %>',
        fill: index => `fill="<%= fill[${index}] %>"`,
        stroke: index => `stroke="<%= stroke[${index}] %>"`
    });

    const result = parser.parse(src);
    /*
    { 
        fill: 4,
        height: 100,
        stroke: 0,
        template: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
                        <g>
                            <path fill="<%= fill[0] %>" d="M57.141,23.67c0.991,0,1.795-0.803,1.795-1.795V12.95c0-0.503-0.211-0.982-0.581-1.322 c-0.37-0.339-0.864-0.506-1.366-0.466c-5.043,0.431-8.846,4.578-8.846,9.645v1.069c0,0.991,0.803,1.795,1.795,1.795 s1.795-0.803,1.795-1.795v-1.069c0-2.444,1.484-4.602,3.615-5.562v6.631C55.347,22.866,56.15,23.67,57.141,23.67z"></path>
                            <path fill="<%= fill[1] %>" d="M53.494,33.997h-0.397c-1.129,0-2.052,0.923-2.052,2.052v3.177c0,1.129,0.923,2.052,2.052,2.052h0.397 c1.129,0,2.052-0.923,2.052-2.052v-3.177C55.546,34.921,54.622,33.997,53.494,33.997z"></path>
                            <path fill="<%= fill[2] %>" d="M93.205,25.556H60.279h-15.69V23.67v-8.974c0-0.503-0.211-0.982-0.581-1.322c-0.37-0.339-0.866-0.505-1.366-0.466 c-5.043,0.431-8.846,4.578-8.846,9.645v30.095c0,2.916-2.372,5.289-5.289,5.289H23.47c-5.83,0-10.573,4.743-10.573,10.574v17.9 c0,0.991,0.803,1.795,1.795,1.795h7.022c0.991,0,1.795-0.803,1.795-1.795v-5.095h17.635v5.734c0,0.991,0.803,1.795,1.795,1.795 h7.34c0.991,0,1.795-0.803,1.795-1.795c0,0,0-20.925,0-21.091c0-3.666,2.26-9.292,5.64-9.548 c7.897-0.599,17.052-3.109,24.427-8.315c0.862-0.608,1.673-1.235,2.453-1.874c0.067-0.055,0.138-0.11,0.204-0.165 C91.399,40.579,95,34.03,95,27.35C95,26.359,94.197,25.556,93.205,25.556z M81.808,41.832c0,1.32-0.641,2.557-1.72,3.318 l-0.018,0.013c-6.692,4.723-15.258,7.657-22.358,7.658c-13.832,0.002-7.975,32.434-9.229,32.434c0,0-3.751,0-3.751,0v-5.734 c0-0.991-0.803-1.795-1.795-1.795H21.714c-0.991,0-1.795,0.803-1.795,1.795v5.095h-3.433V68.511c0-3.857,3.127-6.984,6.984-6.984 h5.037c4.903,0,8.878-3.975,8.878-8.878V22.553c0-2.444,1.484-4.603,3.615-5.563v10.36c0,0.991,0.803,1.795,1.795,1.795h1.77 h15.714h19.697c1.012,0,1.832,0.82,1.832,1.832V41.832z M86.27,39.607c-0.3,0.349-0.872,0.147-0.872-0.314v-8.92 c0-0.679,0.55-1.229,1.229-1.229h4.672C90.856,32.703,89.115,36.291,86.27,39.607z"></path>
                            <path fill="<%= fill[3] %>" d="M13.489,59.337l-5.426-5.426c-0.701-0.7-1.837-0.7-2.538,0c-0.7,0.701-0.7,1.837,0,2.538l5.426,5.426 c0.351,0.35,0.81,0.526,1.269,0.526s0.918-0.175,1.269-0.526C14.189,61.174,14.189,60.038,13.489,59.337z"></path>
                        </g>
                        <%= defs %>
                    </svg>`
    }
    */

    const svg = _.template(result.template)({
        defs: '',
        fill:  _.times(result.fill, () => '#d7006c'),
        stroke: []
    });
    /*
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
        <g>
            <path fill="#d7006c" d="M57.141,23.67c0.991,0,1.795-0.803,1.795-1.795V12.95c0-0.503-0.211-0.982-0.581-1.322 c-0.37-0.339-0.864-0.506-1.366-0.466c-5.043,0.431-8.846,4.578-8.846,9.645v1.069c0,0.991,0.803,1.795,1.795,1.795 s1.795-0.803,1.795-1.795v-1.069c0-2.444,1.484-4.602,3.615-5.562v6.631C55.347,22.866,56.15,23.67,57.141,23.67z"></path>
            <path fill="#d7006c" d="M53.494,33.997h-0.397c-1.129,0-2.052,0.923-2.052,2.052v3.177c0,1.129,0.923,2.052,2.052,2.052h0.397 c1.129,0,2.052-0.923,2.052-2.052v-3.177C55.546,34.921,54.622,33.997,53.494,33.997z"></path>
            <path fill="#d7006c" d="M93.205,25.556H60.279h-15.69V23.67v-8.974c0-0.503-0.211-0.982-0.581-1.322c-0.37-0.339-0.866-0.505-1.366-0.466 c-5.043,0.431-8.846,4.578-8.846,9.645v30.095c0,2.916-2.372,5.289-5.289,5.289H23.47c-5.83,0-10.573,4.743-10.573,10.574v17.9 c0,0.991,0.803,1.795,1.795,1.795h7.022c0.991,0,1.795-0.803,1.795-1.795v-5.095h17.635v5.734c0,0.991,0.803,1.795,1.795,1.795 h7.34c0.991,0,1.795-0.803,1.795-1.795c0,0,0-20.925,0-21.091c0-3.666,2.26-9.292,5.64-9.548 c7.897-0.599,17.052-3.109,24.427-8.315c0.862-0.608,1.673-1.235,2.453-1.874c0.067-0.055,0.138-0.11,0.204-0.165 C91.399,40.579,95,34.03,95,27.35C95,26.359,94.197,25.556,93.205,25.556z M81.808,41.832c0,1.32-0.641,2.557-1.72,3.318 l-0.018,0.013c-6.692,4.723-15.258,7.657-22.358,7.658c-13.832,0.002-7.975,32.434-9.229,32.434c0,0-3.751,0-3.751,0v-5.734 c0-0.991-0.803-1.795-1.795-1.795H21.714c-0.991,0-1.795,0.803-1.795,1.795v5.095h-3.433V68.511c0-3.857,3.127-6.984,6.984-6.984 h5.037c4.903,0,8.878-3.975,8.878-8.878V22.553c0-2.444,1.484-4.603,3.615-5.563v10.36c0,0.991,0.803,1.795,1.795,1.795h1.77 h15.714h19.697c1.012,0,1.832,0.82,1.832,1.832V41.832z M86.27,39.607c-0.3,0.349-0.872,0.147-0.872-0.314v-8.92 c0-0.679,0.55-1.229,1.229-1.229h4.672C90.856,32.703,89.115,36.291,86.27,39.607z"></path>
            <path fill="#d7006c" d="M13.489,59.337l-5.426-5.426c-0.701-0.7-1.837-0.7-2.538,0c-0.7,0.701-0.7,1.837,0,2.538l5.426,5.426 c0.351,0.35,0.81,0.526,1.269,0.526s0.918-0.175,1.269-0.526C14.189,61.174,14.189,60.038,13.489,59.337z"></path>
        </g>
    </svg>
    */

Readme

Keywords

none

Package Sidebar

Install

npm i simple-svg-parser

Weekly Downloads

0

Version

1.1.5

License

MIT

Unpacked Size

58 kB

Total Files

5

Last publish

Collaborators

  • feliperohde
Try on RunKit
Report malware