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
npm i svg64
or
yarn add svg64
or
just download this repository and use the files located in dist
folder
or unclude it from unpkg.com
<script src="https://unpkg.com/svg64"></script>
Usage
In a browser
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
// 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
There is a simple demo illustrating how to use the SVG64 module in NodeJS.
Check it out here
LICENSE
MIT