https://github.com/scriptex/svg64
Convert SVG to base64 in Node and the browser
https://github.com/scriptex/svg64
base64 image-converter svg
Last synced: 6 months ago
JSON representation
Convert SVG to base64 in Node and the browser
- Host: GitHub
- URL: https://github.com/scriptex/svg64
- Owner: scriptex
- License: mit
- Created: 2018-06-30T10:17:30.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-02-05T17:57:43.000Z (8 months ago)
- Last Synced: 2025-03-30T02:09:38.975Z (6 months ago)
- Topics: base64, image-converter, svg
- Language: TypeScript
- Homepage: https://svg64.atanas.info
- Size: 598 KB
- Stars: 34
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://travis-ci.com/scriptex/svg64)
[](https://github.com/scriptex/svg64/actions?query=workflow%3ABuild)
[](https://www.codacy.com/gh/scriptex/svg64/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/svg64&utm_campaign=Badge_Grade)
[](https://codebeat.co/projects/github-com-scriptex-svg64-master)
[](https://www.codefactor.io/repository/github/scriptex/svg64)
[](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[](https://github.com/scriptex/svg64/)
# SVG64
> Convert SVG to base64 anywhere
## Visitor stats
## Code stats
## About
If you, like me, are using lots of SVGs when developing, you might have come to a point where you need your SVG used as background image or embedded in your javascript file. The only way to do this is to convert your SVG file to a base64 string and then use it where needed. This package does exactly this - it converts SVGs to base64.
This package works in a browser and in a Node environment. Please read along to understand how.
## Install
```sh
npm i svg64
```
or
```sh
yarn add svg64
```
or
just download this repository and use the files located in `dist` folder
or unclude it from unpkg.com
```html
```
## Usage
### In a browser
```javascript
import svg64 from 'svg64'; // or use window.svg64.default
// This is your SVG DOM element
const svg = document.getElementById('svg');
// This is your DOM element that needs SVG background image
const demo = document.getElementById('demo');
// This is your SVG in base64 representation
const base64fromSVG = svg64(svg);
// Add the base64 image as a background to your element
demo.style.backgroundImage = `url(${base64fromSVG})`;
```
### In Node
```javascript
// Require svg64
const svg64 = require('svg64');
// Import `readFileSync` from the file system module
const { readFileSync } = require('fs');
// Read your SVG file's contents
const svg = readFileSync('./file.svg', 'utf-8');
// This is your SVG in base64 representation
const base64fromSVG = svg64(svg);
```
## Demo
There is a simple demo illustrating how to use the SVG64 module in a browser.
Check it out [here](https://svg64.atanas.info)
There is a simple demo illustrating how to use the SVG64 module in NodeJS.
Check it out [here](https://github.com/scriptex/svg64/blob/master/demo/scripts/node.mjs)
## LICENSE
MIT
---
Connect with me:
---
Support and sponsor my work:
