svg-toolbox 1.1.4 → 1.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +151 -21
- package/es/common.d.ts +101 -0
- package/es/common.js +128 -0
- package/es/common.js.map +1 -0
- package/es/index.d.ts +9 -2
- package/es/index.js +9 -2
- package/es/index.js.map +1 -1
- package/es/utils.d.ts +103 -0
- package/es/utils.js +130 -0
- package/es/utils.js.map +1 -0
- package/lib/common.d.ts +101 -0
- package/lib/common.js +135 -0
- package/lib/common.js.map +1 -0
- package/lib/index.d.ts +9 -2
- package/lib/index.js +10 -2
- package/lib/index.js.map +1 -1
- package/lib/utils.d.ts +103 -0
- package/lib/utils.js +137 -0
- package/lib/utils.js.map +1 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
#
|
|
2
|
-
This
|
|
1
|
+
# SVG Utility Functions
|
|
2
|
+
This module provides utility functions for working with SVG elements and files, including creating, cloning, merging, converting SVG to Base64, comparing SVG images, normalizing path data, and converting SVG to PNG format.
|
|
3
3
|
|
|
4
4
|
[](https://www.npmjs.com/package/svg-toolbox)
|
|
5
5
|
[](https://www.npmjs.com/package/svg-toolbox)
|
|
@@ -9,34 +9,164 @@ This library provides some SVG-related tools
|
|
|
9
9
|
```bash
|
|
10
10
|
npm install svg-toolbox
|
|
11
11
|
```
|
|
12
|
+
|
|
13
|
+
## Table of Contents
|
|
14
|
+
|
|
15
|
+
- [SVG Utility Functions](#svg-utility-functions)
|
|
16
|
+
- [Installation](#installation)
|
|
17
|
+
- [Table of Contents](#table-of-contents)
|
|
18
|
+
- [Usage](#usage)
|
|
19
|
+
- [createSVGElement](#createsvgelement)
|
|
20
|
+
- [cloneSVGElement](#clonesvgelement)
|
|
21
|
+
- [mergeSVGElements](#mergesvgelements)
|
|
22
|
+
- [convertSVGToBase64](#convertsvgtobase64)
|
|
23
|
+
- [convertBase64ToSVG](#convertbase64tosvg)
|
|
24
|
+
- [diffSvg](#diffsvg)
|
|
25
|
+
- [removeNanCoordinates](#removenancoordinates)
|
|
26
|
+
- [svg2png](#svg2png)
|
|
27
|
+
- [License](#license)
|
|
28
|
+
|
|
12
29
|
## Usage
|
|
30
|
+
|
|
31
|
+
### createSVGElement
|
|
32
|
+
|
|
33
|
+
Creates an SVG element from a given SVG content string.
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
import { createSVGElement } from 'svg-toolbox';
|
|
37
|
+
|
|
38
|
+
const svgContent = `<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />`;
|
|
39
|
+
const svgElement = createSVGElement(svgContent);
|
|
40
|
+
console.log(svgElement);
|
|
41
|
+
```
|
|
42
|
+
### cloneSVGElement
|
|
43
|
+
|
|
44
|
+
Clones an SVG element deeply.
|
|
45
|
+
|
|
46
|
+
```typescript
|
|
47
|
+
import { cloneSVGElement } from 'svg-toolbox';
|
|
48
|
+
import { JSDOM } from 'jsdom';
|
|
49
|
+
|
|
50
|
+
const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`);
|
|
51
|
+
const { document } = dom.window;
|
|
52
|
+
|
|
53
|
+
const originalElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
54
|
+
originalElement.setAttribute('cx', '50');
|
|
55
|
+
originalElement.setAttribute('cy', '50');
|
|
56
|
+
originalElement.setAttribute('r', '40');
|
|
57
|
+
originalElement.setAttribute('stroke', 'black');
|
|
58
|
+
originalElement.setAttribute('stroke-width', '3');
|
|
59
|
+
originalElement.setAttribute('fill', 'red');
|
|
60
|
+
|
|
61
|
+
const clonedElement = cloneSVGElement(originalElement);
|
|
62
|
+
console.log(clonedElement);
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### mergeSVGElements
|
|
66
|
+
Merges multiple SVG elements into a single SVG element.
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
import { mergeSVGElements } from 'svg-toolbox';
|
|
70
|
+
import { JSDOM } from 'jsdom';
|
|
71
|
+
|
|
72
|
+
const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`);
|
|
73
|
+
const { document } = dom.window;
|
|
74
|
+
|
|
75
|
+
const svgElement1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
76
|
+
svgElement1.setAttribute('cx', '50');
|
|
77
|
+
svgElement1.setAttribute('cy', '50');
|
|
78
|
+
svgElement1.setAttribute('r', '40');
|
|
79
|
+
svgElement1.setAttribute('stroke', 'black');
|
|
80
|
+
svgElement1.setAttribute('stroke-width', '3');
|
|
81
|
+
svgElement1.setAttribute('fill', 'red');
|
|
82
|
+
|
|
83
|
+
const svgElement2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
84
|
+
svgElement2.setAttribute('x', '10');
|
|
85
|
+
svgElement2.setAttribute('y', '10');
|
|
86
|
+
svgElement2.setAttribute('width', '100');
|
|
87
|
+
svgElement2.setAttribute('height', '100');
|
|
88
|
+
svgElement2.setAttribute('fill', 'blue');
|
|
89
|
+
|
|
90
|
+
const mergedElement = mergeSVGElements([svgElement1, svgElement2]);
|
|
91
|
+
console.log(mergedElement);
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### convertSVGToBase64
|
|
95
|
+
Converts an SVG element to a Base64-encoded string.
|
|
96
|
+
|
|
97
|
+
```typescript
|
|
98
|
+
import { convertSVGToBase64 } from 'svg-toolbox';
|
|
99
|
+
import { JSDOM } from 'jsdom';
|
|
100
|
+
|
|
101
|
+
const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`);
|
|
102
|
+
const { document } = dom.window;
|
|
103
|
+
|
|
104
|
+
const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
105
|
+
svgElement.setAttribute('cx', '50');
|
|
106
|
+
svgElement.setAttribute('cy', '50');
|
|
107
|
+
svgElement.setAttribute('r', '40');
|
|
108
|
+
svgElement.setAttribute('stroke', 'black');
|
|
109
|
+
svgElement.setAttribute('stroke-width', '3');
|
|
110
|
+
svgElement.setAttribute('fill', 'red');
|
|
111
|
+
|
|
112
|
+
const base64String = convertSVGToBase64(svgElement);
|
|
113
|
+
console.log(base64String);
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### convertBase64ToSVG
|
|
117
|
+
Converts a Base64-encoded string back to an SVG string.
|
|
118
|
+
|
|
13
119
|
```typescript
|
|
14
|
-
|
|
120
|
+
import { convertBase64ToSVG } from 'svg-toolbox';
|
|
15
121
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
122
|
+
const base64String = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9InJlZCIgLz48L3N2Zz4=';
|
|
123
|
+
const svgString = convertBase64ToSVG(base64String);
|
|
124
|
+
console.log(svgString);
|
|
19
125
|
```
|
|
20
126
|
|
|
127
|
+
### diffSvg
|
|
128
|
+
Compares two PNG images and generates a diff image.
|
|
129
|
+
|
|
21
130
|
```typescript
|
|
22
|
-
|
|
131
|
+
import { diffSvg } from 'svg-toolbox';
|
|
132
|
+
|
|
133
|
+
const pathA = 'path/to/first/image.png';
|
|
134
|
+
const pathB = 'path/to/second/image.png';
|
|
135
|
+
const diffFilePath = 'path/to/save/diff/image.png';
|
|
23
136
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
} | void> = await diffSvg(svgPath1, svgPath2, diffResultSavePath)
|
|
32
|
-
const diffPngBase64 = `data:image/png;base64,${diffPngBuffer.toString('base64')}`;
|
|
33
|
-
...
|
|
137
|
+
diffSvg(pathA, pathB, diffFilePath)
|
|
138
|
+
.then(({ diffPngBuffer, numDiffPixels }) => {
|
|
139
|
+
console.log(`Number of different pixels: ${numDiffPixels}`);
|
|
140
|
+
})
|
|
141
|
+
.catch(error => {
|
|
142
|
+
console.error('Error generating diff image:', error);
|
|
143
|
+
});
|
|
34
144
|
```
|
|
35
145
|
|
|
146
|
+
### removeNanCoordinates
|
|
147
|
+
Parses and normalizes the d attribute of all path elements in an SVG content.
|
|
148
|
+
|
|
36
149
|
```typescript
|
|
37
|
-
|
|
150
|
+
import { removeNanCoordinates } from 'svg-toolbox';
|
|
151
|
+
|
|
152
|
+
const svgContent = `<svg><path d="M 10,20 nan L 30,40 -nan Z" /></svg>`;
|
|
153
|
+
const normalizedSvgContent = removeNanCoordinates(svgContent);
|
|
154
|
+
console.log(normalizedSvgContent);
|
|
38
155
|
|
|
39
|
-
...
|
|
40
|
-
const modifiedSvgContent: string = removeEmptyCoordinates(svgContent)
|
|
41
|
-
...
|
|
42
156
|
```
|
|
157
|
+
|
|
158
|
+
### svg2png
|
|
159
|
+
Converts an SVG file to PNG format.
|
|
160
|
+
|
|
161
|
+
```typescript
|
|
162
|
+
import { svg2Png } from 'svg-toolbox';
|
|
163
|
+
|
|
164
|
+
const svgPath = 'path/to/input/image.svg';
|
|
165
|
+
const pngPath = 'path/to/output/image.png';
|
|
166
|
+
const scale = 2; // Scaling factor
|
|
167
|
+
|
|
168
|
+
svg2Png(svgPath, pngPath, scale);
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
## License
|
|
172
|
+
MIT License
|
package/es/common.d.ts
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file utils.ts
|
|
3
|
+
* @description This module provides utility functions for working with SVG elements.
|
|
4
|
+
* @module utils
|
|
5
|
+
* @requires jsdom - A JavaScript implementation of the WHATWG DOM and HTML standards.
|
|
6
|
+
* @author pipi
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Creates an SVG element from a given element.
|
|
10
|
+
*
|
|
11
|
+
* This function serializes the given element to a string, then parses it back to create an SVG element.
|
|
12
|
+
* This approach ensures that the element is correctly parsed as an SVG element.
|
|
13
|
+
*
|
|
14
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
15
|
+
* @returns {Element} - The created SVG element.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
*
|
|
19
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
20
|
+
* @returns {Element} - The created SVG element.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* const svgElement = document.createElementNS('URL_ADDRESS * const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
24
|
+
* const svgElement2 = createSVGElement(svgElement);
|
|
25
|
+
* @param svgContent
|
|
26
|
+
* @returns
|
|
27
|
+
*/
|
|
28
|
+
export declare function createSVGElement(svgContent: string): Element;
|
|
29
|
+
/**
|
|
30
|
+
* Clones an SVG element deeply.
|
|
31
|
+
*
|
|
32
|
+
* This function serializes the given SVG element to a string, then parses it back to create a deep clone.
|
|
33
|
+
* This approach ensures that all attributes and child nodes are duplicated.
|
|
34
|
+
*
|
|
35
|
+
* @param {Element} element - The SVG element to clone.
|
|
36
|
+
* @returns {Element} - The cloned SVG element.
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
40
|
+
* const clonedElement = cloneSVGElement(svgElement);
|
|
41
|
+
* console.log(clonedElement);
|
|
42
|
+
*
|
|
43
|
+
* @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6ED8C4D5 - DOM Level 2 Core specification
|
|
44
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
45
|
+
*/
|
|
46
|
+
export declare function cloneSVGElement(element: Element): Element;
|
|
47
|
+
/**
|
|
48
|
+
* Merges multiple SVG elements into a single SVG element.
|
|
49
|
+
*
|
|
50
|
+
* This function creates a new SVG element and appends clones of the provided elements to it.
|
|
51
|
+
* The SVG namespace is specified as 'http://www.w3.org/2000/svg'.
|
|
52
|
+
*
|
|
53
|
+
* @param {Element[]} elements - An array of SVG elements to merge.
|
|
54
|
+
* @returns {Element} - The merged SVG element.
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* const svgElement1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
58
|
+
* const svgElement2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
59
|
+
* const mergedElement = mergeSVGElements([svgElement1, svgElement2]);
|
|
60
|
+
* console.log(mergedElement);
|
|
61
|
+
*
|
|
62
|
+
* @see https://www.w3.org/TR/SVG/ - SVG specification
|
|
63
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS - createElementNS documentation
|
|
64
|
+
*/
|
|
65
|
+
export declare function mergeSVGElements(elements: Element[]): Element;
|
|
66
|
+
/**
|
|
67
|
+
* Converts an SVG element to a Base64-encoded string.
|
|
68
|
+
*
|
|
69
|
+
* This function serializes the SVG element to a string and then encodes it to Base64.
|
|
70
|
+
* The resulting string can be used as a data URI for embedding SVG content in HTML or CSS.
|
|
71
|
+
*
|
|
72
|
+
* @param {Element} svgElement - The SVG element to convert.
|
|
73
|
+
* @returns {string} - The Base64-encoded string representation of the SVG element.
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
77
|
+
* const base64String = convertSVGToBase64(svgElement);
|
|
78
|
+
* console.log(base64String);
|
|
79
|
+
*
|
|
80
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
81
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Buffer - Buffer documentation
|
|
82
|
+
*/
|
|
83
|
+
export declare function convertSVGToBase64(svgElement: Element): string;
|
|
84
|
+
/**
|
|
85
|
+
* Converts a Base64-encoded string to an SVG string.
|
|
86
|
+
*
|
|
87
|
+
* This function decodes the Base64-encoded string and then converts it to an SVG string.
|
|
88
|
+
* The resulting string can be used to create an SVG element using the `createSVGElement` function.
|
|
89
|
+
*
|
|
90
|
+
* @param {string} base64String - The Base64-encoded string to convert.
|
|
91
|
+
* @returns {string} - The SVG string representation of the Base64-encoded string.
|
|
92
|
+
*
|
|
93
|
+
* @example
|
|
94
|
+
* const base64String = 'data:image/svg+xml;base64, * const base64String = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3
|
|
95
|
+
* const svgString = convertBase64ToSVG(base64String);
|
|
96
|
+
* console.log(svgString);
|
|
97
|
+
*
|
|
98
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser - DOMParser documentation
|
|
99
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Buffer - Buffer documentation
|
|
100
|
+
*/
|
|
101
|
+
export declare function convertBase64ToSVG(base64String: string): string;
|
package/es/common.js
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file utils.ts
|
|
3
|
+
* @description This module provides utility functions for working with SVG elements.
|
|
4
|
+
* @module utils
|
|
5
|
+
* @requires jsdom - A JavaScript implementation of the WHATWG DOM and HTML standards.
|
|
6
|
+
* @author pipi
|
|
7
|
+
*/
|
|
8
|
+
import { JSDOM } from 'jsdom';
|
|
9
|
+
// Create a virtual DOM environment
|
|
10
|
+
const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`);
|
|
11
|
+
const { document } = dom.window;
|
|
12
|
+
/**
|
|
13
|
+
* Creates an SVG element from a given element.
|
|
14
|
+
*
|
|
15
|
+
* This function serializes the given element to a string, then parses it back to create an SVG element.
|
|
16
|
+
* This approach ensures that the element is correctly parsed as an SVG element.
|
|
17
|
+
*
|
|
18
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
19
|
+
* @returns {Element} - The created SVG element.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
*
|
|
23
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
24
|
+
* @returns {Element} - The created SVG element.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* const svgElement = document.createElementNS('URL_ADDRESS * const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
28
|
+
* const svgElement2 = createSVGElement(svgElement);
|
|
29
|
+
* @param svgContent
|
|
30
|
+
* @returns
|
|
31
|
+
*/
|
|
32
|
+
export function createSVGElement(svgContent) {
|
|
33
|
+
const svgElement = new dom.window.DOMParser().parseFromString(svgContent, 'image/svg+xml').documentElement;
|
|
34
|
+
return svgElement;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Clones an SVG element deeply.
|
|
38
|
+
*
|
|
39
|
+
* This function serializes the given SVG element to a string, then parses it back to create a deep clone.
|
|
40
|
+
* This approach ensures that all attributes and child nodes are duplicated.
|
|
41
|
+
*
|
|
42
|
+
* @param {Element} element - The SVG element to clone.
|
|
43
|
+
* @returns {Element} - The cloned SVG element.
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
47
|
+
* const clonedElement = cloneSVGElement(svgElement);
|
|
48
|
+
* console.log(clonedElement);
|
|
49
|
+
*
|
|
50
|
+
* @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6ED8C4D5 - DOM Level 2 Core specification
|
|
51
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
52
|
+
*/
|
|
53
|
+
export function cloneSVGElement(element) {
|
|
54
|
+
const serializer = new dom.window.XMLSerializer();
|
|
55
|
+
const sourceCode = serializer.serializeToString(element);
|
|
56
|
+
const parser = new dom.window.DOMParser();
|
|
57
|
+
const doc = parser.parseFromString(sourceCode, 'image/svg+xml');
|
|
58
|
+
return doc.documentElement;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Merges multiple SVG elements into a single SVG element.
|
|
62
|
+
*
|
|
63
|
+
* This function creates a new SVG element and appends clones of the provided elements to it.
|
|
64
|
+
* The SVG namespace is specified as 'http://www.w3.org/2000/svg'.
|
|
65
|
+
*
|
|
66
|
+
* @param {Element[]} elements - An array of SVG elements to merge.
|
|
67
|
+
* @returns {Element} - The merged SVG element.
|
|
68
|
+
*
|
|
69
|
+
* @example
|
|
70
|
+
* const svgElement1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
71
|
+
* const svgElement2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
72
|
+
* const mergedElement = mergeSVGElements([svgElement1, svgElement2]);
|
|
73
|
+
* console.log(mergedElement);
|
|
74
|
+
*
|
|
75
|
+
* @see https://www.w3.org/TR/SVG/ - SVG specification
|
|
76
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS - createElementNS documentation
|
|
77
|
+
*/
|
|
78
|
+
export function mergeSVGElements(elements) {
|
|
79
|
+
const mergedSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
80
|
+
elements.forEach((element) => {
|
|
81
|
+
mergedSVG.appendChild(cloneSVGElement(element));
|
|
82
|
+
});
|
|
83
|
+
return mergedSVG;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Converts an SVG element to a Base64-encoded string.
|
|
87
|
+
*
|
|
88
|
+
* This function serializes the SVG element to a string and then encodes it to Base64.
|
|
89
|
+
* The resulting string can be used as a data URI for embedding SVG content in HTML or CSS.
|
|
90
|
+
*
|
|
91
|
+
* @param {Element} svgElement - The SVG element to convert.
|
|
92
|
+
* @returns {string} - The Base64-encoded string representation of the SVG element.
|
|
93
|
+
*
|
|
94
|
+
* @example
|
|
95
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
96
|
+
* const base64String = convertSVGToBase64(svgElement);
|
|
97
|
+
* console.log(base64String);
|
|
98
|
+
*
|
|
99
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
100
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Buffer - Buffer documentation
|
|
101
|
+
*/
|
|
102
|
+
export function convertSVGToBase64(svgElement) {
|
|
103
|
+
const serializer = new dom.window.XMLSerializer();
|
|
104
|
+
const svgString = serializer.serializeToString(svgElement);
|
|
105
|
+
return `data:image/svg+xml;base64,${Buffer.from(svgString).toString('base64')}`;
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Converts a Base64-encoded string to an SVG string.
|
|
109
|
+
*
|
|
110
|
+
* This function decodes the Base64-encoded string and then converts it to an SVG string.
|
|
111
|
+
* The resulting string can be used to create an SVG element using the `createSVGElement` function.
|
|
112
|
+
*
|
|
113
|
+
* @param {string} base64String - The Base64-encoded string to convert.
|
|
114
|
+
* @returns {string} - The SVG string representation of the Base64-encoded string.
|
|
115
|
+
*
|
|
116
|
+
* @example
|
|
117
|
+
* const base64String = 'data:image/svg+xml;base64, * const base64String = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3
|
|
118
|
+
* const svgString = convertBase64ToSVG(base64String);
|
|
119
|
+
* console.log(svgString);
|
|
120
|
+
*
|
|
121
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser - DOMParser documentation
|
|
122
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Buffer - Buffer documentation
|
|
123
|
+
*/
|
|
124
|
+
export function convertBase64ToSVG(base64String) {
|
|
125
|
+
const svgString = Buffer.from(base64String.split(',')[1], 'base64').toString('utf-8');
|
|
126
|
+
return svgString;
|
|
127
|
+
}
|
|
128
|
+
//# sourceMappingURL=common.js.map
|
package/es/common.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"","sources":["../src/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,mCAAmC;AACnC,MAAM,GAAG,GAAG,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;AACnE,MAAM,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,gBAAgB,CAAC,UAAkB;IACjD,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,eAAe,CAAC;IAC3G,OAAO,UAAU,CAAA;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,eAAe,CAAC,OAAgB;IAC9C,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;IAClD,MAAM,UAAU,GAAG,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;IAC1C,MAAM,GAAG,GAAG,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;IAChE,OAAO,GAAG,CAAC,eAAgB,CAAC;AAC9B,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,gBAAgB,CAAC,QAAmB;IAClD,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;IAChF,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC3B,SAAS,CAAC,WAAW,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IACH,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,kBAAkB,CAAC,UAAmB;IACpD,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;IAClD,MAAM,SAAS,GAAG,UAAU,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAC3D,OAAO,6BAA6B,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;AAClF,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,kBAAkB,CAAC,YAAoB;IACrD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACtF,OAAO,SAAS,CAAC;AACnB,CAAC"}
|
package/es/index.d.ts
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
import svg2Png from './applySvg2Png';
|
|
2
2
|
import diffSvg from './applyDiffSvg';
|
|
3
|
-
import
|
|
4
|
-
|
|
3
|
+
import removeNanCoordinates from './applyRemoveNanCoordinates';
|
|
4
|
+
import { createSVGElement, cloneSVGElement, mergeSVGElements, convertSVGToBase64, convertBase64ToSVG } from './common';
|
|
5
|
+
declare const removeEmptyCoordinates: typeof removeNanCoordinates;
|
|
6
|
+
export { svg2Png, diffSvg,
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated
|
|
9
|
+
* @see removeNanCoordinates
|
|
10
|
+
*/
|
|
11
|
+
removeEmptyCoordinates, removeNanCoordinates, createSVGElement, cloneSVGElement, mergeSVGElements, convertSVGToBase64, convertBase64ToSVG };
|
package/es/index.js
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import svg2Png from './applySvg2Png';
|
|
2
2
|
import diffSvg from './applyDiffSvg';
|
|
3
|
-
import
|
|
4
|
-
|
|
3
|
+
import removeNanCoordinates from './applyRemoveNanCoordinates';
|
|
4
|
+
import { createSVGElement, cloneSVGElement, mergeSVGElements, convertSVGToBase64, convertBase64ToSVG } from './common';
|
|
5
|
+
const removeEmptyCoordinates = removeNanCoordinates;
|
|
6
|
+
export { svg2Png, diffSvg,
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated
|
|
9
|
+
* @see removeNanCoordinates
|
|
10
|
+
*/
|
|
11
|
+
removeEmptyCoordinates, removeNanCoordinates, createSVGElement, cloneSVGElement, mergeSVGElements, convertSVGToBase64, convertBase64ToSVG };
|
|
5
12
|
//# sourceMappingURL=index.js.map
|
package/es/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,oBAAoB,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAEtH,MAAM,sBAAsB,GAAG,oBAAoB,CAAA;AAEnD,OAAO,EACL,OAAO,EACP,OAAO;AACP;;;GAGG;AACH,sBAAsB,EACtB,oBAAoB,EACpB,gBAAgB,EAAE,eAAe,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAC5F,CAAC"}
|
package/es/utils.d.ts
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file utils.ts
|
|
3
|
+
* @description This module provides utility functions for working with SVG elements.
|
|
4
|
+
* @module utils
|
|
5
|
+
* @requires jsdom - A JavaScript implementation of the WHATWG DOM and HTML standards.
|
|
6
|
+
* @author pipi
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Creates an SVG element from a given element.
|
|
10
|
+
*
|
|
11
|
+
* This function serializes the given element to a string, then parses it back to create an SVG element.
|
|
12
|
+
* This approach ensures that the element is correctly parsed as an SVG element.
|
|
13
|
+
*
|
|
14
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
15
|
+
* @returns {Element} - The created SVG element.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
*
|
|
19
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
20
|
+
* @returns {Element} - The created SVG element.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* const svgElement = document.createElementNS('URL_ADDRESS * const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
24
|
+
* const svgElement2 = createSVGElement(svgElement);
|
|
25
|
+
* @param svgContent
|
|
26
|
+
* @returns
|
|
27
|
+
*/
|
|
28
|
+
export declare function createSVGElement(svgContent: string): Element;
|
|
29
|
+
/**
|
|
30
|
+
* Clones an SVG element deeply.
|
|
31
|
+
*
|
|
32
|
+
* This function serializes the given SVG element to a string, then parses it back to create a deep clone.
|
|
33
|
+
* This approach ensures that all attributes and child nodes are duplicated.
|
|
34
|
+
*
|
|
35
|
+
* @param {Element} element - The SVG element to clone.
|
|
36
|
+
* @returns {Element} - The cloned SVG element.
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
40
|
+
* const clonedElement = cloneSVGElement(svgElement);
|
|
41
|
+
* console.log(clonedElement);
|
|
42
|
+
*
|
|
43
|
+
* @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6ED8C4D5 - DOM Level 2 Core specification
|
|
44
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
45
|
+
*/
|
|
46
|
+
export declare function cloneSVGElement(element: Element): Element;
|
|
47
|
+
/**
|
|
48
|
+
* Merges multiple SVG elements into a single SVG element.
|
|
49
|
+
*
|
|
50
|
+
* This function creates a new SVG element and appends clones of the provided elements to it.
|
|
51
|
+
* The SVG namespace is specified as 'http://www.w3.org/2000/svg'.
|
|
52
|
+
*
|
|
53
|
+
* @param {Element[]} elements - An array of SVG elements to merge.
|
|
54
|
+
* @returns {Element} - The merged SVG element.
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* const svgElement1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
58
|
+
* const svgElement2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
59
|
+
* const mergedElement = mergeSVGElements([svgElement1, svgElement2]);
|
|
60
|
+
* console.log(mergedElement);
|
|
61
|
+
*
|
|
62
|
+
* @see https://www.w3.org/TR/SVG/ - SVG specification
|
|
63
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS - createElementNS documentation
|
|
64
|
+
*/
|
|
65
|
+
export declare function mergeSVGElements(elements: Element[]): Element;
|
|
66
|
+
/**
|
|
67
|
+
* Converts an SVG element to a Base64-encoded string.
|
|
68
|
+
*
|
|
69
|
+
* This function serializes the SVG element to a string and then encodes it to Base64.
|
|
70
|
+
* The resulting string can be used as a data URI for embedding SVG content in HTML or CSS.
|
|
71
|
+
*
|
|
72
|
+
* @param {Element} svgElement - The SVG element to convert.
|
|
73
|
+
* @returns {string} - The Base64-encoded string representation of the SVG element.
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
77
|
+
* const base64String = convertSVGToBase64(svgElement);
|
|
78
|
+
* console.log(base64String);
|
|
79
|
+
*
|
|
80
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
81
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Buffer - Buffer documentation
|
|
82
|
+
*/
|
|
83
|
+
export declare function convertSVGToBase64(svgElement: Element): string;
|
|
84
|
+
/**
|
|
85
|
+
* Converts a Base64-encoded string to an SVG string.
|
|
86
|
+
*
|
|
87
|
+
* This function decodes the Base64-encoded string and then converts it to an SVG string.
|
|
88
|
+
* The resulting string can be used to create an SVG element using the `createSVGElement` function.
|
|
89
|
+
*
|
|
90
|
+
* @param {string} base64String - The Base64-encoded string to convert.
|
|
91
|
+
* @returns {string} - The SVG string representation of the Base64-encoded string.
|
|
92
|
+
*
|
|
93
|
+
* @example
|
|
94
|
+
*
|
|
95
|
+
* @param {string} base64String - The Base64-encoded string to convert.
|
|
96
|
+
* @returns {string} - The SVG string representation of the Base64-encoded string.
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* const base64String = 'data:image/svg+xml;base64, * const base64String = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3
|
|
100
|
+
* const svgString = convertBase64ToSVG(base64String);
|
|
101
|
+
* console.log(svgString);
|
|
102
|
+
*/
|
|
103
|
+
export declare function convertBase64ToSVG(base64String: string): string;
|
package/es/utils.js
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file utils.ts
|
|
3
|
+
* @description This module provides utility functions for working with SVG elements.
|
|
4
|
+
* @module utils
|
|
5
|
+
* @requires jsdom - A JavaScript implementation of the WHATWG DOM and HTML standards.
|
|
6
|
+
* @author pipi
|
|
7
|
+
*/
|
|
8
|
+
import { JSDOM } from 'jsdom';
|
|
9
|
+
// Create a virtual DOM environment
|
|
10
|
+
const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`);
|
|
11
|
+
const { document } = dom.window;
|
|
12
|
+
/**
|
|
13
|
+
* Creates an SVG element from a given element.
|
|
14
|
+
*
|
|
15
|
+
* This function serializes the given element to a string, then parses it back to create an SVG element.
|
|
16
|
+
* This approach ensures that the element is correctly parsed as an SVG element.
|
|
17
|
+
*
|
|
18
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
19
|
+
* @returns {Element} - The created SVG element.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
*
|
|
23
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
24
|
+
* @returns {Element} - The created SVG element.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* const svgElement = document.createElementNS('URL_ADDRESS * const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
28
|
+
* const svgElement2 = createSVGElement(svgElement);
|
|
29
|
+
* @param svgContent
|
|
30
|
+
* @returns
|
|
31
|
+
*/
|
|
32
|
+
export function createSVGElement(svgContent) {
|
|
33
|
+
const svgElement = new dom.window.DOMParser().parseFromString(svgContent, 'image/svg+xml').documentElement;
|
|
34
|
+
return svgElement;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Clones an SVG element deeply.
|
|
38
|
+
*
|
|
39
|
+
* This function serializes the given SVG element to a string, then parses it back to create a deep clone.
|
|
40
|
+
* This approach ensures that all attributes and child nodes are duplicated.
|
|
41
|
+
*
|
|
42
|
+
* @param {Element} element - The SVG element to clone.
|
|
43
|
+
* @returns {Element} - The cloned SVG element.
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
47
|
+
* const clonedElement = cloneSVGElement(svgElement);
|
|
48
|
+
* console.log(clonedElement);
|
|
49
|
+
*
|
|
50
|
+
* @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6ED8C4D5 - DOM Level 2 Core specification
|
|
51
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
52
|
+
*/
|
|
53
|
+
export function cloneSVGElement(element) {
|
|
54
|
+
const serializer = new dom.window.XMLSerializer();
|
|
55
|
+
const sourceCode = serializer.serializeToString(element);
|
|
56
|
+
const parser = new dom.window.DOMParser();
|
|
57
|
+
const doc = parser.parseFromString(sourceCode, 'image/svg+xml');
|
|
58
|
+
return doc.documentElement;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Merges multiple SVG elements into a single SVG element.
|
|
62
|
+
*
|
|
63
|
+
* This function creates a new SVG element and appends clones of the provided elements to it.
|
|
64
|
+
* The SVG namespace is specified as 'http://www.w3.org/2000/svg'.
|
|
65
|
+
*
|
|
66
|
+
* @param {Element[]} elements - An array of SVG elements to merge.
|
|
67
|
+
* @returns {Element} - The merged SVG element.
|
|
68
|
+
*
|
|
69
|
+
* @example
|
|
70
|
+
* const svgElement1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
71
|
+
* const svgElement2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
72
|
+
* const mergedElement = mergeSVGElements([svgElement1, svgElement2]);
|
|
73
|
+
* console.log(mergedElement);
|
|
74
|
+
*
|
|
75
|
+
* @see https://www.w3.org/TR/SVG/ - SVG specification
|
|
76
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS - createElementNS documentation
|
|
77
|
+
*/
|
|
78
|
+
export function mergeSVGElements(elements) {
|
|
79
|
+
const mergedSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
80
|
+
elements.forEach((element) => {
|
|
81
|
+
mergedSVG.appendChild(cloneSVGElement(element));
|
|
82
|
+
});
|
|
83
|
+
return mergedSVG;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Converts an SVG element to a Base64-encoded string.
|
|
87
|
+
*
|
|
88
|
+
* This function serializes the SVG element to a string and then encodes it to Base64.
|
|
89
|
+
* The resulting string can be used as a data URI for embedding SVG content in HTML or CSS.
|
|
90
|
+
*
|
|
91
|
+
* @param {Element} svgElement - The SVG element to convert.
|
|
92
|
+
* @returns {string} - The Base64-encoded string representation of the SVG element.
|
|
93
|
+
*
|
|
94
|
+
* @example
|
|
95
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
96
|
+
* const base64String = convertSVGToBase64(svgElement);
|
|
97
|
+
* console.log(base64String);
|
|
98
|
+
*
|
|
99
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
100
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Buffer - Buffer documentation
|
|
101
|
+
*/
|
|
102
|
+
export function convertSVGToBase64(svgElement) {
|
|
103
|
+
const serializer = new dom.window.XMLSerializer();
|
|
104
|
+
const svgString = serializer.serializeToString(svgElement);
|
|
105
|
+
return `data:image/svg+xml;base64,${Buffer.from(svgString).toString('base64')}`;
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Converts a Base64-encoded string to an SVG string.
|
|
109
|
+
*
|
|
110
|
+
* This function decodes the Base64-encoded string and then converts it to an SVG string.
|
|
111
|
+
* The resulting string can be used to create an SVG element using the `createSVGElement` function.
|
|
112
|
+
*
|
|
113
|
+
* @param {string} base64String - The Base64-encoded string to convert.
|
|
114
|
+
* @returns {string} - The SVG string representation of the Base64-encoded string.
|
|
115
|
+
*
|
|
116
|
+
* @example
|
|
117
|
+
*
|
|
118
|
+
* @param {string} base64String - The Base64-encoded string to convert.
|
|
119
|
+
* @returns {string} - The SVG string representation of the Base64-encoded string.
|
|
120
|
+
*
|
|
121
|
+
* @example
|
|
122
|
+
* const base64String = 'data:image/svg+xml;base64, * const base64String = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3
|
|
123
|
+
* const svgString = convertBase64ToSVG(base64String);
|
|
124
|
+
* console.log(svgString);
|
|
125
|
+
*/
|
|
126
|
+
export function convertBase64ToSVG(base64String) {
|
|
127
|
+
const svgString = Buffer.from(base64String.split(',')[1], 'base64').toString('utf-8');
|
|
128
|
+
return svgString;
|
|
129
|
+
}
|
|
130
|
+
//# sourceMappingURL=utils.js.map
|
package/es/utils.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,mCAAmC;AACnC,MAAM,GAAG,GAAG,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;AACnE,MAAM,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,gBAAgB,CAAC,UAAkB;IACjD,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,eAAe,CAAC;IAC3G,OAAO,UAAU,CAAA;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,eAAe,CAAC,OAAgB;IAC9C,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;IAClD,MAAM,UAAU,GAAG,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;IAC1C,MAAM,GAAG,GAAG,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;IAChE,OAAO,GAAG,CAAC,eAAgB,CAAC;AAC9B,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,gBAAgB,CAAC,QAAmB;IAClD,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;IAChF,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC3B,SAAS,CAAC,WAAW,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IACH,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,kBAAkB,CAAC,UAAmB;IACpD,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;IAClD,MAAM,SAAS,GAAG,UAAU,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAC3D,OAAO,6BAA6B,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;AAClF,CAAC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,kBAAkB,CAAC,YAAoB;IACrD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACtF,OAAO,SAAS,CAAC;AACnB,CAAC"}
|
package/lib/common.d.ts
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file utils.ts
|
|
3
|
+
* @description This module provides utility functions for working with SVG elements.
|
|
4
|
+
* @module utils
|
|
5
|
+
* @requires jsdom - A JavaScript implementation of the WHATWG DOM and HTML standards.
|
|
6
|
+
* @author pipi
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Creates an SVG element from a given element.
|
|
10
|
+
*
|
|
11
|
+
* This function serializes the given element to a string, then parses it back to create an SVG element.
|
|
12
|
+
* This approach ensures that the element is correctly parsed as an SVG element.
|
|
13
|
+
*
|
|
14
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
15
|
+
* @returns {Element} - The created SVG element.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
*
|
|
19
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
20
|
+
* @returns {Element} - The created SVG element.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* const svgElement = document.createElementNS('URL_ADDRESS * const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
24
|
+
* const svgElement2 = createSVGElement(svgElement);
|
|
25
|
+
* @param svgContent
|
|
26
|
+
* @returns
|
|
27
|
+
*/
|
|
28
|
+
export declare function createSVGElement(svgContent: string): Element;
|
|
29
|
+
/**
|
|
30
|
+
* Clones an SVG element deeply.
|
|
31
|
+
*
|
|
32
|
+
* This function serializes the given SVG element to a string, then parses it back to create a deep clone.
|
|
33
|
+
* This approach ensures that all attributes and child nodes are duplicated.
|
|
34
|
+
*
|
|
35
|
+
* @param {Element} element - The SVG element to clone.
|
|
36
|
+
* @returns {Element} - The cloned SVG element.
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
40
|
+
* const clonedElement = cloneSVGElement(svgElement);
|
|
41
|
+
* console.log(clonedElement);
|
|
42
|
+
*
|
|
43
|
+
* @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6ED8C4D5 - DOM Level 2 Core specification
|
|
44
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
45
|
+
*/
|
|
46
|
+
export declare function cloneSVGElement(element: Element): Element;
|
|
47
|
+
/**
|
|
48
|
+
* Merges multiple SVG elements into a single SVG element.
|
|
49
|
+
*
|
|
50
|
+
* This function creates a new SVG element and appends clones of the provided elements to it.
|
|
51
|
+
* The SVG namespace is specified as 'http://www.w3.org/2000/svg'.
|
|
52
|
+
*
|
|
53
|
+
* @param {Element[]} elements - An array of SVG elements to merge.
|
|
54
|
+
* @returns {Element} - The merged SVG element.
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* const svgElement1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
58
|
+
* const svgElement2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
59
|
+
* const mergedElement = mergeSVGElements([svgElement1, svgElement2]);
|
|
60
|
+
* console.log(mergedElement);
|
|
61
|
+
*
|
|
62
|
+
* @see https://www.w3.org/TR/SVG/ - SVG specification
|
|
63
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS - createElementNS documentation
|
|
64
|
+
*/
|
|
65
|
+
export declare function mergeSVGElements(elements: Element[]): Element;
|
|
66
|
+
/**
|
|
67
|
+
* Converts an SVG element to a Base64-encoded string.
|
|
68
|
+
*
|
|
69
|
+
* This function serializes the SVG element to a string and then encodes it to Base64.
|
|
70
|
+
* The resulting string can be used as a data URI for embedding SVG content in HTML or CSS.
|
|
71
|
+
*
|
|
72
|
+
* @param {Element} svgElement - The SVG element to convert.
|
|
73
|
+
* @returns {string} - The Base64-encoded string representation of the SVG element.
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
77
|
+
* const base64String = convertSVGToBase64(svgElement);
|
|
78
|
+
* console.log(base64String);
|
|
79
|
+
*
|
|
80
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
81
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Buffer - Buffer documentation
|
|
82
|
+
*/
|
|
83
|
+
export declare function convertSVGToBase64(svgElement: Element): string;
|
|
84
|
+
/**
|
|
85
|
+
* Converts a Base64-encoded string to an SVG string.
|
|
86
|
+
*
|
|
87
|
+
* This function decodes the Base64-encoded string and then converts it to an SVG string.
|
|
88
|
+
* The resulting string can be used to create an SVG element using the `createSVGElement` function.
|
|
89
|
+
*
|
|
90
|
+
* @param {string} base64String - The Base64-encoded string to convert.
|
|
91
|
+
* @returns {string} - The SVG string representation of the Base64-encoded string.
|
|
92
|
+
*
|
|
93
|
+
* @example
|
|
94
|
+
* const base64String = 'data:image/svg+xml;base64, * const base64String = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3
|
|
95
|
+
* const svgString = convertBase64ToSVG(base64String);
|
|
96
|
+
* console.log(svgString);
|
|
97
|
+
*
|
|
98
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser - DOMParser documentation
|
|
99
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Buffer - Buffer documentation
|
|
100
|
+
*/
|
|
101
|
+
export declare function convertBase64ToSVG(base64String: string): string;
|
package/lib/common.js
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* @file utils.ts
|
|
4
|
+
* @description This module provides utility functions for working with SVG elements.
|
|
5
|
+
* @module utils
|
|
6
|
+
* @requires jsdom - A JavaScript implementation of the WHATWG DOM and HTML standards.
|
|
7
|
+
* @author pipi
|
|
8
|
+
*/
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.createSVGElement = createSVGElement;
|
|
11
|
+
exports.cloneSVGElement = cloneSVGElement;
|
|
12
|
+
exports.mergeSVGElements = mergeSVGElements;
|
|
13
|
+
exports.convertSVGToBase64 = convertSVGToBase64;
|
|
14
|
+
exports.convertBase64ToSVG = convertBase64ToSVG;
|
|
15
|
+
var jsdom_1 = require("jsdom");
|
|
16
|
+
// Create a virtual DOM environment
|
|
17
|
+
var dom = new jsdom_1.JSDOM("<!DOCTYPE html><html><body></body></html>");
|
|
18
|
+
var document = dom.window.document;
|
|
19
|
+
/**
|
|
20
|
+
* Creates an SVG element from a given element.
|
|
21
|
+
*
|
|
22
|
+
* This function serializes the given element to a string, then parses it back to create an SVG element.
|
|
23
|
+
* This approach ensures that the element is correctly parsed as an SVG element.
|
|
24
|
+
*
|
|
25
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
26
|
+
* @returns {Element} - The created SVG element.
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
*
|
|
30
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
31
|
+
* @returns {Element} - The created SVG element.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* const svgElement = document.createElementNS('URL_ADDRESS * const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
35
|
+
* const svgElement2 = createSVGElement(svgElement);
|
|
36
|
+
* @param svgContent
|
|
37
|
+
* @returns
|
|
38
|
+
*/
|
|
39
|
+
function createSVGElement(svgContent) {
|
|
40
|
+
var svgElement = new dom.window.DOMParser().parseFromString(svgContent, 'image/svg+xml').documentElement;
|
|
41
|
+
return svgElement;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Clones an SVG element deeply.
|
|
45
|
+
*
|
|
46
|
+
* This function serializes the given SVG element to a string, then parses it back to create a deep clone.
|
|
47
|
+
* This approach ensures that all attributes and child nodes are duplicated.
|
|
48
|
+
*
|
|
49
|
+
* @param {Element} element - The SVG element to clone.
|
|
50
|
+
* @returns {Element} - The cloned SVG element.
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
54
|
+
* const clonedElement = cloneSVGElement(svgElement);
|
|
55
|
+
* console.log(clonedElement);
|
|
56
|
+
*
|
|
57
|
+
* @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6ED8C4D5 - DOM Level 2 Core specification
|
|
58
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
59
|
+
*/
|
|
60
|
+
function cloneSVGElement(element) {
|
|
61
|
+
var serializer = new dom.window.XMLSerializer();
|
|
62
|
+
var sourceCode = serializer.serializeToString(element);
|
|
63
|
+
var parser = new dom.window.DOMParser();
|
|
64
|
+
var doc = parser.parseFromString(sourceCode, 'image/svg+xml');
|
|
65
|
+
return doc.documentElement;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* Merges multiple SVG elements into a single SVG element.
|
|
69
|
+
*
|
|
70
|
+
* This function creates a new SVG element and appends clones of the provided elements to it.
|
|
71
|
+
* The SVG namespace is specified as 'http://www.w3.org/2000/svg'.
|
|
72
|
+
*
|
|
73
|
+
* @param {Element[]} elements - An array of SVG elements to merge.
|
|
74
|
+
* @returns {Element} - The merged SVG element.
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* const svgElement1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
78
|
+
* const svgElement2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
79
|
+
* const mergedElement = mergeSVGElements([svgElement1, svgElement2]);
|
|
80
|
+
* console.log(mergedElement);
|
|
81
|
+
*
|
|
82
|
+
* @see https://www.w3.org/TR/SVG/ - SVG specification
|
|
83
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS - createElementNS documentation
|
|
84
|
+
*/
|
|
85
|
+
function mergeSVGElements(elements) {
|
|
86
|
+
var mergedSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
87
|
+
elements.forEach(function (element) {
|
|
88
|
+
mergedSVG.appendChild(cloneSVGElement(element));
|
|
89
|
+
});
|
|
90
|
+
return mergedSVG;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Converts an SVG element to a Base64-encoded string.
|
|
94
|
+
*
|
|
95
|
+
* This function serializes the SVG element to a string and then encodes it to Base64.
|
|
96
|
+
* The resulting string can be used as a data URI for embedding SVG content in HTML or CSS.
|
|
97
|
+
*
|
|
98
|
+
* @param {Element} svgElement - The SVG element to convert.
|
|
99
|
+
* @returns {string} - The Base64-encoded string representation of the SVG element.
|
|
100
|
+
*
|
|
101
|
+
* @example
|
|
102
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
103
|
+
* const base64String = convertSVGToBase64(svgElement);
|
|
104
|
+
* console.log(base64String);
|
|
105
|
+
*
|
|
106
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
107
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Buffer - Buffer documentation
|
|
108
|
+
*/
|
|
109
|
+
function convertSVGToBase64(svgElement) {
|
|
110
|
+
var serializer = new dom.window.XMLSerializer();
|
|
111
|
+
var svgString = serializer.serializeToString(svgElement);
|
|
112
|
+
return "data:image/svg+xml;base64,".concat(Buffer.from(svgString).toString('base64'));
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Converts a Base64-encoded string to an SVG string.
|
|
116
|
+
*
|
|
117
|
+
* This function decodes the Base64-encoded string and then converts it to an SVG string.
|
|
118
|
+
* The resulting string can be used to create an SVG element using the `createSVGElement` function.
|
|
119
|
+
*
|
|
120
|
+
* @param {string} base64String - The Base64-encoded string to convert.
|
|
121
|
+
* @returns {string} - The SVG string representation of the Base64-encoded string.
|
|
122
|
+
*
|
|
123
|
+
* @example
|
|
124
|
+
* const base64String = 'data:image/svg+xml;base64, * const base64String = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3
|
|
125
|
+
* const svgString = convertBase64ToSVG(base64String);
|
|
126
|
+
* console.log(svgString);
|
|
127
|
+
*
|
|
128
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser - DOMParser documentation
|
|
129
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Buffer - Buffer documentation
|
|
130
|
+
*/
|
|
131
|
+
function convertBase64ToSVG(base64String) {
|
|
132
|
+
var svgString = Buffer.from(base64String.split(',')[1], 'base64').toString('utf-8');
|
|
133
|
+
return svgString;
|
|
134
|
+
}
|
|
135
|
+
//# sourceMappingURL=common.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"","sources":["../src/common.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AA4BH,4CAGC;AAmBD,0CAMC;AAoBD,4CAMC;AAmBD,gDAIC;AAmBD,gDAGC;AA7HD,+BAA8B;AAE9B,mCAAmC;AACnC,IAAM,GAAG,GAAG,IAAI,aAAK,CAAC,2CAA2C,CAAC,CAAC;AAC3D,IAAA,QAAQ,GAAK,GAAG,CAAC,MAAM,SAAf,CAAgB;AAEhC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAgB,gBAAgB,CAAC,UAAkB;IACjD,IAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,eAAe,CAAC;IAC3G,OAAO,UAAU,CAAA;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,SAAgB,eAAe,CAAC,OAAgB;IAC9C,IAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;IAClD,IAAM,UAAU,GAAG,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzD,IAAM,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;IAC1C,IAAM,GAAG,GAAG,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;IAChE,OAAO,GAAG,CAAC,eAAgB,CAAC;AAC9B,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAgB,gBAAgB,CAAC,QAAmB;IAClD,IAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;IAChF,QAAQ,CAAC,OAAO,CAAC,UAAC,OAAO;QACvB,SAAS,CAAC,WAAW,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IACH,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,SAAgB,kBAAkB,CAAC,UAAmB;IACpD,IAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;IAClD,IAAM,SAAS,GAAG,UAAU,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAC3D,OAAO,oCAA6B,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAE,CAAC;AAClF,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,SAAgB,kBAAkB,CAAC,YAAoB;IACrD,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACtF,OAAO,SAAS,CAAC;AACnB,CAAC"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
import svg2Png from './applySvg2Png';
|
|
2
2
|
import diffSvg from './applyDiffSvg';
|
|
3
|
-
import
|
|
4
|
-
|
|
3
|
+
import removeNanCoordinates from './applyRemoveNanCoordinates';
|
|
4
|
+
import { createSVGElement, cloneSVGElement, mergeSVGElements, convertSVGToBase64, convertBase64ToSVG } from './common';
|
|
5
|
+
declare const removeEmptyCoordinates: typeof removeNanCoordinates;
|
|
6
|
+
export { svg2Png, diffSvg,
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated
|
|
9
|
+
* @see removeNanCoordinates
|
|
10
|
+
*/
|
|
11
|
+
removeEmptyCoordinates, removeNanCoordinates, createSVGElement, cloneSVGElement, mergeSVGElements, convertSVGToBase64, convertBase64ToSVG };
|
package/lib/index.js
CHANGED
|
@@ -3,11 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.removeEmptyCoordinates = exports.diffSvg = exports.svg2Png = void 0;
|
|
6
|
+
exports.convertBase64ToSVG = exports.convertSVGToBase64 = exports.mergeSVGElements = exports.cloneSVGElement = exports.createSVGElement = exports.removeNanCoordinates = exports.removeEmptyCoordinates = exports.diffSvg = exports.svg2Png = void 0;
|
|
7
7
|
var applySvg2Png_1 = __importDefault(require("./applySvg2Png"));
|
|
8
8
|
exports.svg2Png = applySvg2Png_1.default;
|
|
9
9
|
var applyDiffSvg_1 = __importDefault(require("./applyDiffSvg"));
|
|
10
10
|
exports.diffSvg = applyDiffSvg_1.default;
|
|
11
11
|
var applyRemoveNanCoordinates_1 = __importDefault(require("./applyRemoveNanCoordinates"));
|
|
12
|
-
exports.
|
|
12
|
+
exports.removeNanCoordinates = applyRemoveNanCoordinates_1.default;
|
|
13
|
+
var common_1 = require("./common");
|
|
14
|
+
Object.defineProperty(exports, "createSVGElement", { enumerable: true, get: function () { return common_1.createSVGElement; } });
|
|
15
|
+
Object.defineProperty(exports, "cloneSVGElement", { enumerable: true, get: function () { return common_1.cloneSVGElement; } });
|
|
16
|
+
Object.defineProperty(exports, "mergeSVGElements", { enumerable: true, get: function () { return common_1.mergeSVGElements; } });
|
|
17
|
+
Object.defineProperty(exports, "convertSVGToBase64", { enumerable: true, get: function () { return common_1.convertSVGToBase64; } });
|
|
18
|
+
Object.defineProperty(exports, "convertBase64ToSVG", { enumerable: true, get: function () { return common_1.convertBase64ToSVG; } });
|
|
19
|
+
var removeEmptyCoordinates = applyRemoveNanCoordinates_1.default;
|
|
20
|
+
exports.removeEmptyCoordinates = removeEmptyCoordinates;
|
|
13
21
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,gEAAqC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,gEAAqC;AAQnC,kBARK,sBAAO,CAQL;AAPT,gEAAqC;AAQnC,kBARK,sBAAO,CAQL;AAPT,0FAA+D;AAa7D,+BAbK,mCAAoB,CAaL;AAZtB,mCAAsH;AAapH,iGAbO,yBAAgB,OAaP;AAAE,gGAbO,wBAAe,OAaP;AAAE,iGAbO,yBAAgB,OAaP;AAAE,mGAbO,2BAAkB,OAaP;AAAE,mGAbO,2BAAkB,OAaP;AAX7F,IAAM,sBAAsB,GAAG,mCAAoB,CAAA;AASjD,wDAAsB"}
|
package/lib/utils.d.ts
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file utils.ts
|
|
3
|
+
* @description This module provides utility functions for working with SVG elements.
|
|
4
|
+
* @module utils
|
|
5
|
+
* @requires jsdom - A JavaScript implementation of the WHATWG DOM and HTML standards.
|
|
6
|
+
* @author pipi
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Creates an SVG element from a given element.
|
|
10
|
+
*
|
|
11
|
+
* This function serializes the given element to a string, then parses it back to create an SVG element.
|
|
12
|
+
* This approach ensures that the element is correctly parsed as an SVG element.
|
|
13
|
+
*
|
|
14
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
15
|
+
* @returns {Element} - The created SVG element.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
*
|
|
19
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
20
|
+
* @returns {Element} - The created SVG element.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* const svgElement = document.createElementNS('URL_ADDRESS * const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
24
|
+
* const svgElement2 = createSVGElement(svgElement);
|
|
25
|
+
* @param svgContent
|
|
26
|
+
* @returns
|
|
27
|
+
*/
|
|
28
|
+
export declare function createSVGElement(svgContent: string): Element;
|
|
29
|
+
/**
|
|
30
|
+
* Clones an SVG element deeply.
|
|
31
|
+
*
|
|
32
|
+
* This function serializes the given SVG element to a string, then parses it back to create a deep clone.
|
|
33
|
+
* This approach ensures that all attributes and child nodes are duplicated.
|
|
34
|
+
*
|
|
35
|
+
* @param {Element} element - The SVG element to clone.
|
|
36
|
+
* @returns {Element} - The cloned SVG element.
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
40
|
+
* const clonedElement = cloneSVGElement(svgElement);
|
|
41
|
+
* console.log(clonedElement);
|
|
42
|
+
*
|
|
43
|
+
* @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6ED8C4D5 - DOM Level 2 Core specification
|
|
44
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
45
|
+
*/
|
|
46
|
+
export declare function cloneSVGElement(element: Element): Element;
|
|
47
|
+
/**
|
|
48
|
+
* Merges multiple SVG elements into a single SVG element.
|
|
49
|
+
*
|
|
50
|
+
* This function creates a new SVG element and appends clones of the provided elements to it.
|
|
51
|
+
* The SVG namespace is specified as 'http://www.w3.org/2000/svg'.
|
|
52
|
+
*
|
|
53
|
+
* @param {Element[]} elements - An array of SVG elements to merge.
|
|
54
|
+
* @returns {Element} - The merged SVG element.
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* const svgElement1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
58
|
+
* const svgElement2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
59
|
+
* const mergedElement = mergeSVGElements([svgElement1, svgElement2]);
|
|
60
|
+
* console.log(mergedElement);
|
|
61
|
+
*
|
|
62
|
+
* @see https://www.w3.org/TR/SVG/ - SVG specification
|
|
63
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS - createElementNS documentation
|
|
64
|
+
*/
|
|
65
|
+
export declare function mergeSVGElements(elements: Element[]): Element;
|
|
66
|
+
/**
|
|
67
|
+
* Converts an SVG element to a Base64-encoded string.
|
|
68
|
+
*
|
|
69
|
+
* This function serializes the SVG element to a string and then encodes it to Base64.
|
|
70
|
+
* The resulting string can be used as a data URI for embedding SVG content in HTML or CSS.
|
|
71
|
+
*
|
|
72
|
+
* @param {Element} svgElement - The SVG element to convert.
|
|
73
|
+
* @returns {string} - The Base64-encoded string representation of the SVG element.
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
77
|
+
* const base64String = convertSVGToBase64(svgElement);
|
|
78
|
+
* console.log(base64String);
|
|
79
|
+
*
|
|
80
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
81
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Buffer - Buffer documentation
|
|
82
|
+
*/
|
|
83
|
+
export declare function convertSVGToBase64(svgElement: Element): string;
|
|
84
|
+
/**
|
|
85
|
+
* Converts a Base64-encoded string to an SVG string.
|
|
86
|
+
*
|
|
87
|
+
* This function decodes the Base64-encoded string and then converts it to an SVG string.
|
|
88
|
+
* The resulting string can be used to create an SVG element using the `createSVGElement` function.
|
|
89
|
+
*
|
|
90
|
+
* @param {string} base64String - The Base64-encoded string to convert.
|
|
91
|
+
* @returns {string} - The SVG string representation of the Base64-encoded string.
|
|
92
|
+
*
|
|
93
|
+
* @example
|
|
94
|
+
*
|
|
95
|
+
* @param {string} base64String - The Base64-encoded string to convert.
|
|
96
|
+
* @returns {string} - The SVG string representation of the Base64-encoded string.
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* const base64String = 'data:image/svg+xml;base64, * const base64String = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3
|
|
100
|
+
* const svgString = convertBase64ToSVG(base64String);
|
|
101
|
+
* console.log(svgString);
|
|
102
|
+
*/
|
|
103
|
+
export declare function convertBase64ToSVG(base64String: string): string;
|
package/lib/utils.js
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* @file utils.ts
|
|
4
|
+
* @description This module provides utility functions for working with SVG elements.
|
|
5
|
+
* @module utils
|
|
6
|
+
* @requires jsdom - A JavaScript implementation of the WHATWG DOM and HTML standards.
|
|
7
|
+
* @author pipi
|
|
8
|
+
*/
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.createSVGElement = createSVGElement;
|
|
11
|
+
exports.cloneSVGElement = cloneSVGElement;
|
|
12
|
+
exports.mergeSVGElements = mergeSVGElements;
|
|
13
|
+
exports.convertSVGToBase64 = convertSVGToBase64;
|
|
14
|
+
exports.convertBase64ToSVG = convertBase64ToSVG;
|
|
15
|
+
var jsdom_1 = require("jsdom");
|
|
16
|
+
// Create a virtual DOM environment
|
|
17
|
+
var dom = new jsdom_1.JSDOM("<!DOCTYPE html><html><body></body></html>");
|
|
18
|
+
var document = dom.window.document;
|
|
19
|
+
/**
|
|
20
|
+
* Creates an SVG element from a given element.
|
|
21
|
+
*
|
|
22
|
+
* This function serializes the given element to a string, then parses it back to create an SVG element.
|
|
23
|
+
* This approach ensures that the element is correctly parsed as an SVG element.
|
|
24
|
+
*
|
|
25
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
26
|
+
* @returns {Element} - The created SVG element.
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
*
|
|
30
|
+
* @param {Element} element - The element to create an SVG element from.
|
|
31
|
+
* @returns {Element} - The created SVG element.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* const svgElement = document.createElementNS('URL_ADDRESS * const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
35
|
+
* const svgElement2 = createSVGElement(svgElement);
|
|
36
|
+
* @param svgContent
|
|
37
|
+
* @returns
|
|
38
|
+
*/
|
|
39
|
+
function createSVGElement(svgContent) {
|
|
40
|
+
var svgElement = new dom.window.DOMParser().parseFromString(svgContent, 'image/svg+xml').documentElement;
|
|
41
|
+
return svgElement;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Clones an SVG element deeply.
|
|
45
|
+
*
|
|
46
|
+
* This function serializes the given SVG element to a string, then parses it back to create a deep clone.
|
|
47
|
+
* This approach ensures that all attributes and child nodes are duplicated.
|
|
48
|
+
*
|
|
49
|
+
* @param {Element} element - The SVG element to clone.
|
|
50
|
+
* @returns {Element} - The cloned SVG element.
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
54
|
+
* const clonedElement = cloneSVGElement(svgElement);
|
|
55
|
+
* console.log(clonedElement);
|
|
56
|
+
*
|
|
57
|
+
* @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6ED8C4D5 - DOM Level 2 Core specification
|
|
58
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
59
|
+
*/
|
|
60
|
+
function cloneSVGElement(element) {
|
|
61
|
+
var serializer = new dom.window.XMLSerializer();
|
|
62
|
+
var sourceCode = serializer.serializeToString(element);
|
|
63
|
+
var parser = new dom.window.DOMParser();
|
|
64
|
+
var doc = parser.parseFromString(sourceCode, 'image/svg+xml');
|
|
65
|
+
return doc.documentElement;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* Merges multiple SVG elements into a single SVG element.
|
|
69
|
+
*
|
|
70
|
+
* This function creates a new SVG element and appends clones of the provided elements to it.
|
|
71
|
+
* The SVG namespace is specified as 'http://www.w3.org/2000/svg'.
|
|
72
|
+
*
|
|
73
|
+
* @param {Element[]} elements - An array of SVG elements to merge.
|
|
74
|
+
* @returns {Element} - The merged SVG element.
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* const svgElement1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
78
|
+
* const svgElement2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
79
|
+
* const mergedElement = mergeSVGElements([svgElement1, svgElement2]);
|
|
80
|
+
* console.log(mergedElement);
|
|
81
|
+
*
|
|
82
|
+
* @see https://www.w3.org/TR/SVG/ - SVG specification
|
|
83
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS - createElementNS documentation
|
|
84
|
+
*/
|
|
85
|
+
function mergeSVGElements(elements) {
|
|
86
|
+
var mergedSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
87
|
+
elements.forEach(function (element) {
|
|
88
|
+
mergedSVG.appendChild(cloneSVGElement(element));
|
|
89
|
+
});
|
|
90
|
+
return mergedSVG;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Converts an SVG element to a Base64-encoded string.
|
|
94
|
+
*
|
|
95
|
+
* This function serializes the SVG element to a string and then encodes it to Base64.
|
|
96
|
+
* The resulting string can be used as a data URI for embedding SVG content in HTML or CSS.
|
|
97
|
+
*
|
|
98
|
+
* @param {Element} svgElement - The SVG element to convert.
|
|
99
|
+
* @returns {string} - The Base64-encoded string representation of the SVG element.
|
|
100
|
+
*
|
|
101
|
+
* @example
|
|
102
|
+
* const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
103
|
+
* const base64String = convertSVGToBase64(svgElement);
|
|
104
|
+
* console.log(base64String);
|
|
105
|
+
*
|
|
106
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - XMLSerializer documentation
|
|
107
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Buffer - Buffer documentation
|
|
108
|
+
*/
|
|
109
|
+
function convertSVGToBase64(svgElement) {
|
|
110
|
+
var serializer = new dom.window.XMLSerializer();
|
|
111
|
+
var svgString = serializer.serializeToString(svgElement);
|
|
112
|
+
return "data:image/svg+xml;base64,".concat(Buffer.from(svgString).toString('base64'));
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Converts a Base64-encoded string to an SVG string.
|
|
116
|
+
*
|
|
117
|
+
* This function decodes the Base64-encoded string and then converts it to an SVG string.
|
|
118
|
+
* The resulting string can be used to create an SVG element using the `createSVGElement` function.
|
|
119
|
+
*
|
|
120
|
+
* @param {string} base64String - The Base64-encoded string to convert.
|
|
121
|
+
* @returns {string} - The SVG string representation of the Base64-encoded string.
|
|
122
|
+
*
|
|
123
|
+
* @example
|
|
124
|
+
*
|
|
125
|
+
* @param {string} base64String - The Base64-encoded string to convert.
|
|
126
|
+
* @returns {string} - The SVG string representation of the Base64-encoded string.
|
|
127
|
+
*
|
|
128
|
+
* @example
|
|
129
|
+
* const base64String = 'data:image/svg+xml;base64, * const base64String = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3
|
|
130
|
+
* const svgString = convertBase64ToSVG(base64String);
|
|
131
|
+
* console.log(svgString);
|
|
132
|
+
*/
|
|
133
|
+
function convertBase64ToSVG(base64String) {
|
|
134
|
+
var svgString = Buffer.from(base64String.split(',')[1], 'base64').toString('utf-8');
|
|
135
|
+
return svgString;
|
|
136
|
+
}
|
|
137
|
+
//# sourceMappingURL=utils.js.map
|
package/lib/utils.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AA4BH,4CAGC;AAmBD,0CAMC;AAoBD,4CAMC;AAmBD,gDAIC;AAqBD,gDAGC;AA/HD,+BAA8B;AAE9B,mCAAmC;AACnC,IAAM,GAAG,GAAG,IAAI,aAAK,CAAC,2CAA2C,CAAC,CAAC;AAC3D,IAAA,QAAQ,GAAK,GAAG,CAAC,MAAM,SAAf,CAAgB;AAEhC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAgB,gBAAgB,CAAC,UAAkB;IACjD,IAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,eAAe,CAAC;IAC3G,OAAO,UAAU,CAAA;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,SAAgB,eAAe,CAAC,OAAgB;IAC9C,IAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;IAClD,IAAM,UAAU,GAAG,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzD,IAAM,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;IAC1C,IAAM,GAAG,GAAG,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;IAChE,OAAO,GAAG,CAAC,eAAgB,CAAC;AAC9B,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAgB,gBAAgB,CAAC,QAAmB;IAClD,IAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;IAChF,QAAQ,CAAC,OAAO,CAAC,UAAC,OAAO;QACvB,SAAS,CAAC,WAAW,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IACH,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,SAAgB,kBAAkB,CAAC,UAAmB;IACpD,IAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;IAClD,IAAM,SAAS,GAAG,UAAU,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAC3D,OAAO,oCAA6B,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAE,CAAC;AAClF,CAAC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAgB,kBAAkB,CAAC,YAAoB;IACrD,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACtF,OAAO,SAAS,CAAC;AACnB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svg-toolbox",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.6",
|
|
4
4
|
"description": "This library provides some SVG-related tools",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
"scripts": {
|
|
16
16
|
"build:es": "tsc -p tsconfig.json",
|
|
17
17
|
"build:cjs": "tsc -p tsconfig.cjs.json",
|
|
18
|
-
"build": "npm run build:es && npm run build:cjs"
|
|
18
|
+
"build": "npm run build:es && npm run build:cjs",
|
|
19
|
+
"prepublishOnly": "npm run build"
|
|
19
20
|
},
|
|
20
21
|
"keywords": [
|
|
21
22
|
"svg"
|