Light

elrumordelaluz / path-that-svg Goto Github PK

View Code? Open in Web Editor NEW

59.0 3.0 5.0 590 KB

Path that SVG!

JavaScript 100.00%

svg path svg-path svg-converter

path-that-svg's Introduction

Sometimes is useful to have an svg done with paths instead of elements
such as rect, circle, ellipse, line, polyline or polygon.
Like when you apply Compound Path in Adobe Illustrator.

Install

yarn add path-that-svg

Usage

String|Buffer svg

const { pathThatSvg } = require('path-that-svg')

fs.readFile('./elements.svg', (err, input) => {
  pathThatSvg(input).then((convertedFromBuffer) => {
    console.log({ convertedFromBuffer })
  })
})

pathThatSvg(`<svg viewBox="0 0 500 200">
  <rect 
    x="200" 
    y="50" 
    fill="#F16362" 
    stroke="#30456B" 
    stroke-width="5" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    width="100" height="100"/>
</svg>`).then((convertedFromString) => {
  console.log(convertedFromString)
})

Related

element-to-path Convert SVG element into path

path-that-svg's People

Contributors

Stargazers

Watchers

Forkers

bankel intermundos devbox10 l1553k dohard2023

path-that-svg's Issues

Browser version

Is there a version for only browser use?
I dont want to use yarn or any additional library!

Preserve attributes

Hello, thanks for this library, I was just about to write something similar 👍
I'm having an issue where I would like my class attribute to be preserved:

<svg><line class="foo" x1="0" y1="0" x2="5" y2="5" /></svg>

becomes:

<svg><path d="M0 0 L5 5" /></svg>

The solution does not need to be limited to just the class attribute, I suppose any attribute that is not used by the conversion and does not collide with d should carry over.

Does not make one path from SVG with two paths

example SVG

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <g fill="#1d1d1b">
    <path d="m13.89 19.59h-6.63a1.63 1.63 0 0 1 -1.63-1.59v-12a1.63 1.63 0 0 1 1.63-1.59h6.63a.75.75 0 0 0 0-1.5h-6.63a3.13 3.13 0 0 0 -3.13 3.09v12a3.13 3.13 0 0 0 3.13 3.13h6.63a.75.75 0 1 0 0-1.5z"/>
    <path d="m19.65 11.47-3.51-3.47a.75.75 0 1 0 -1.06 1l2.23 2.23h-6.91a.75.75 0 1 0 0 1.5h6.91l-2.23 2.27a.75.75 0 0 0 0 1.06.79.79 0 0 0 .53.22.77.77 0 0 0 .53-.22l3.51-3.51a.75.75 0 0 0 0-1.08z"/>
  </g>
</svg>

no changes after attempting to convert

TypeError: svgToPath is not a function

When I am tring to execute example code get this error

TypeError: svgToPath is not a function

Intended to use this package to convert the SVG I have into Compound form (no rect, circle, etc).
Heres the code I wrote

const svgToPath = require('path-that-svg')
const fs = require('fs');

fs.readFile('./Bank.svg', (err, input) => {
  svgToPath(input).then(convertedFromBuffer => {
    console.log({ convertedFromBuffer })
  })
})

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 194.03 149.11">
    <defs>
        <style>
            .cls-2{fill:#ccc}.cls-3{fill:#f2f2f2}.cls-4{fill:#e6e6e6}
        </style>
    </defs>
    <title>
        Bank
    </title>
    <g id="Layer_2" data-name="Layer 2">
        <g id="Objects">
            <rect x="18.81" y="59.06" width="156.42" height="78.29" style="fill:#b3b3b3"/>
            <polygon class="cls-2" points="173.71 46.4 20.33 46.4 20.33 32.32 97.02 2.15 173.71 32.32 173.71 46.4"/>
            <polygon class="cls-3" points="173.71 34.49 97.02 4.3 20.33 34.49 20.33 30.17 97.02 0 173.71 30.17 173.71 34.49"/>
            <rect class="cls-3" x="7.56" y="36.91" width="18.34" height="3.41"/>
            <polygon class="cls-4" points="22.9 43.73 10.56 43.73 7.56 40.32 25.9 40.32 22.9 43.73"/>
            <rect class="cls-3" x="168.13" y="36.91" width="18.34" height="3.41"/>
            <polygon class="cls-4" points="183.47 43.73 171.13 43.73 168.13 40.32 186.47 40.32 183.47 43.73"/>
            <rect class="cls-3" x="14.48" y="60.88" width="29.56" height="3.41"/>
            <polygon class="cls-4" points="41.04 67.7 17.48 67.7 14.48 64.3 44.04 64.3 41.04 67.7"/>
            <rect class="cls-3" x="14.48" y="131.58" width="29.56" height="3.41"/>
            <polygon class="cls-4" points="17.48 128.17 41.04 128.17 44.04 131.58 14.48 131.58 17.48 128.17"/>
            <rect class="cls-2" x="17.4" y="67.71" width="23.72" height="60.46"/>
            <rect class="cls-4" x="17.4" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="21.62" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="25.85" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="30.08" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="34.3" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="38.53" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-3" x="47.37" y="60.88" width="29.55" height="3.41"/>
            <polygon class="cls-4" points="73.92 67.7 50.37 67.7 47.37 64.3 76.92 64.3 73.92 67.7"/>
            <rect class="cls-3" x="47.37" y="131.58" width="29.55" height="3.41"/>
            <polygon class="cls-4" points="50.37 128.17 73.92 128.17 76.92 131.58 47.37 131.58 50.37 128.17"/>
            <rect class="cls-2" x="50.29" y="67.71" width="23.72" height="60.46"/>
            <rect class="cls-4" x="50.29" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="54.51" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="58.74" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="62.96" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="67.19" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="71.41" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-3" x="117.11" y="60.88" width="29.56" height="3.41"/>
            <polygon class="cls-4" points="143.67 67.7 120.11 67.7 117.11 64.3 146.67 64.3 143.67 67.7"/>
            <rect class="cls-3" x="117.11" y="131.58" width="29.56" height="3.41"/>
            <polygon class="cls-4" points="120.11 128.17 143.67 128.17 146.67 131.58 117.11 131.58 120.11 128.17"/>
            <rect class="cls-2" x="120.03" y="67.71" width="23.72" height="60.46"/>
            <rect class="cls-4" x="120.03" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="124.25" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="128.48" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="132.71" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="136.93" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="141.16" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-3" x="150" y="60.88" width="29.56" height="3.41"/>
            <polygon class="cls-4" points="176.55 67.7 153 67.7 150 64.3 179.55 64.3 176.55 67.7"/>
            <rect class="cls-3" x="150" y="131.58" width="29.56" height="3.41"/>
            <polygon class="cls-4" points="153 128.17 176.55 128.17 179.55 131.58 150 131.58 153 128.17"/>
            <rect class="cls-2" x="152.91" y="67.71" width="23.72" height="60.46"/>
            <rect class="cls-4" x="152.91" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="157.14" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="161.37" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="165.59" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="169.82" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="174.04" y="67.71" width="2.59" height="60.46" rx="1"/>
            <rect class="cls-4" x="13.18" y="57.23" width="167.67" height="3.65"/>
            <polygon class="cls-2" points="183.52 53.07 10.52 53.07 13.18 57.23 180.85 57.23 183.52 53.07"/>
            <rect class="cls-3" x="10.52" y="43.73" width="173" height="9.33"/>
            <text transform="translate(92.47 32.6)" style="font-size:17.73px;font-family:Exo-Bold,Exo Bold;font-weight:700;fill:#f2f2f2">
                $
            </text>
            <path d="M108.81,26.09A11.8,11.8,0,1,1,97,14.3,11.79,11.79,0,0,1,108.81,26.09Z" style="fill:none;stroke:#f2f2f2;stroke-miterlimit:10"/>
            <rect class="cls-2" x="10.52" y="134.99" width="173" height="4.71"/>
            <rect class="cls-4" x="5.67" y="139.7" width="182.68" height="4.71"/>
            <rect class="cls-3" y="144.4" width="194.03" height="4.71"/>
            <path d="M112.25,135V88.29a1,1,0,0,0-1-1H82.79a1,1,0,0,0-1,1V135Z" style="fill:gray"/>
        </g>
    </g>
</svg>

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.