https://github.com/RouninMedia/SVG-to-Data-URL
SVG to Data URL is a function which converts any SVG into a Data URL. An Ashiva Component.
https://github.com/RouninMedia/SVG-to-Data-URL
data-uri data-url javascript svg xml
Last synced: 3 months ago
JSON representation
SVG to Data URL is a function which converts any SVG into a Data URL. An Ashiva Component.
- Host: GitHub
- URL: https://github.com/RouninMedia/SVG-to-Data-URL
- Owner: RouninMedia
- Created: 2020-12-02T15:54:36.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-09-04T10:25:02.000Z (over 3 years ago)
- Last Synced: 2024-10-24T15:38:06.696Z (7 months ago)
- Topics: data-uri, data-url, javascript, svg, xml
- Language: JavaScript
- Homepage:
- Size: 59.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SVG to Data URL
The function `SVGtoDataURL(svg)` converts any **valid SVG** into a **Data URL**.
The function `dataURLtoSVG(dataURL)` converts a **Data URL** which satisfies certain criteria into a **valid SVG**.
______
## SVG to Data URL Function
### Step 1
The `SVGtoDataURL(svg)` function verifies that the string passed to the function:
- has a valid **SVG Namespace**
- represents **well-formed XML**
If either or both conditions are not met, the `SVGtoDataURL(svg)` function will return a verbose error detailing how the string may be fixed.
### Step 2
If both the conditions above are met, the `SVGtoDataURL(svg)` function returns the validated SVG as a **Data URL**.
________
### `SVGtoDataURL(svg)` :
```
const SVGToDataURL = (SVG) => {
let output;
const { SVGNamespaceMatches, wellFormedXML, parsedDocument } = validateSVG(SVG);
// ASSIGN TO OUTPUT: SVG CONVERTED INTO DATA URL
if ((SVGNamespaceMatches === true) && (wellFormedXML === true)) {
let dataURL = SVG;
dataURL = dataURL.replace(/(\s*\n)*\s+/g, ' ');
dataURL = dataURL.replace(/[\"|\']/g, '%22');
dataURL = dataURL.replace(/\>\s+\<');
dataURL = dataURL.replace(/\s\/\>/g, '/>');
dataURL = dataURL.replace(/\s*\:\s*/g, ':');
dataURL = dataURL.replace(/\s*\;\s*/g, ';');
dataURL = dataURL.replace(/\s*\{\s*/g, '{');
dataURL = dataURL.replace(/\s*\}\s*/g, '}');
dataURL = dataURL.replace(/\s*\,\s*/g, ',');
dataURL = dataURL.trim();
const characterArray = dataURL.split('');
for (let i = 0; i < characterArray.length; i++) {
if (characterArray[i].match(/[A-Za-z0-9\.\,\;\:\/\*\-\=\_\~\'\!\$\@]/) === null) {
characterArray[i] = encodeURIComponent(characterArray[i]);
}
}
dataURL = 'data:image/svg+xml,' + characterArray.join('');
output = dataURL;
}
// ELSE ASSIGN TO OUTPUT: ASHIVA CONSOLE WITH ANALYSIS OF SVG CODE
else {
output = consoleSVG({SVG, parsedDocument, SVGNamespaceMatches, wellFormedXML});
}
return output;
}
```
______
## Data URL to SVG Function
Naturally, a function like `SVGtoDataURL(svg)`, above, needs a corresponding function which can perform the same transformation in reverse.
`dataURLtoSVG(dataURL)` will convert the **Data URL** (which conforms to certain constraints) into a valid, namespaced, well-formed **SVG**.
If the function cannot build an **SVG** out of the **Data URL**, it will return a verbose error, explaining why not.
### Step 1
The `dataURLtoSVG(dataURL)` function converts the **Data URL** provided into an **unformatted SVG**.
### Step 2
The `dataURLtoSVG(dataURL)` function then verifies that the **unformatted SVG**:
- has a valid **SVG Namespace**
- represents **well-formed XML**
If either or both conditions are not met, the `dataURLtoSVG(dataURL)` function will return a verbose error detailing how the string may be fixed.
### Step 3
If both the conditions above are met, the `dataURLtoSVG(dataURL)` function will format the **valid SVG** and return a **formatted, valid SVG**.
________
### `dataURLtoSVG(dataURL)` :
```
const dataURLtoSVG = (dataURL) => {
let output;
// CONVERT DATA URL TO SVG
let SVG = dataURL;
SVG = SVG.replace('data:image/svg+xml,', '');
SVG = decodeURIComponent(SVG);
SVG = SVG.replace(/\'/g, '"');
SVG = SVG.trim();
// VALIDATE SVG
const { SVGNamespaceMatches, wellFormedXML, parsedDocument } = validateSVG(SVG);
// ASSIGN TO OUTPUT: FORMATTED SVG
if ((SVGNamespaceMatches === true) && (wellFormedXML === true)) {
// ADD A NEWLINE BEFORE EACH SVG ELEMENT
SVG = SVG.replace('><', '>\n\n<');
SVG = SVG.replace(/\>\<\/svg\>$/, '>\n\n');
SVG = SVG.replace(/>\n<');
// FORMAT SVG ROOT ELEMENT
let svgRoot = SVG.match(/^\]+?)\>/)[0];
svgRootPieces = svgRoot.split('"');
for (let i = 0; i < svgRootPieces.length; i = i + 2) {
svgRootPieces[i] = svgRootPieces[i].split(' ').join('\n ');
}
let reformattedRoot = svgRootPieces.join('"');
SVG = SVG.replace(svgRoot, reformattedRoot);
output = SVG;
}
// ELSE ASSIGN TO OUTPUT: ASHIVA CONSOLE WITH ANALYSIS OF SVG CODE
else {
output = consoleSVG({SVG, parsedDocument, SVGNamespaceMatches, wellFormedXML});
}
return output;
}
```
______
## Two more functions
Both `SVGtoDataURL(svg)` and `dataURLtoSVG(dataURL)` reference two further functions:
- `validateSVG(SVG)` which checks:
- if the SVG starts with the right namespace; and
- if the SVG represents well-formed XML
- `consoleSVG(dataObject)` which returns a verbose Ashiva Console Message detailing where the SVG is invalid
________
### `validateSVG(SVG)` :
```
const validateSVG = (SVG) => {
// VERIFY SVG NAMESPACE MATCHES
const SVGNamespace = SVG.trim().replace(/\s+/g, ' ').substr(0, 39);
const SVGNamespaceMatch = ' {
const { SVG, parsedDocument, SVGNamespaceMatches, wellFormedXML } = dataObject;
const SVGTitle = SVG.split('')[0].split('')[1];
let console = '';
console += '\n\n\n\n';
return console;
}
```