https://github.com/JS-DevTools/rehype-inline-svg
A rehype plugin that inlines and optimizes SVG images
https://github.com/JS-DevTools/rehype-inline-svg
html html5 images inline javascript nodejs optimizer rehype rehype-plugin svg unified
Last synced: 24 days ago
JSON representation
A rehype plugin that inlines and optimizes SVG images
- Host: GitHub
- URL: https://github.com/JS-DevTools/rehype-inline-svg
- Owner: JS-DevTools
- License: mit
- Created: 2019-06-20T10:23:15.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-16T14:59:18.000Z (about 1 year ago)
- Last Synced: 2025-04-25T18:15:26.000Z (30 days ago)
- Topics: html, html5, images, inline, javascript, nodejs, optimizer, rehype, rehype-plugin, svg, unified
- Language: TypeScript
- Homepage: https://jstools.dev/rehype-inline-svg/
- Size: 305 KB
- Stars: 9
- Watchers: 1
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-rehype - rehype-inline-svg - Inline and optimize SVGs. (Plugins)
README
# Inline SVG plugin for rehype
A [rehype](https://github.com/rehypejs/rehype) plugin that inlines and optimizes SVG images
[](https://github.com/JS-DevTools/rehype-inline-svg/actions)
[](https://github.com/JS-DevTools/rehype-inline-svg/actions)
[](https://coveralls.io/github/JS-DevTools/rehype-inline-svg)
[](https://david-dm.org/JS-DevTools/rehype-inline-svg)
[](https://www.npmjs.com/package/@jsdevtools/rehype-inline-svg)
[](LICENSE)
[](https://plant.treeware.earth/JS-DevTools/rehype-inline-svg)
Features
--------------------------
- Replaces SVG `![]()
` tags with inlined `` tags
- Reduces extra HTTP requests to fetch tiny SVG files
- Gives you [fine-grained control of images using CSS](https://css-tricks.com/using-svg/#article-header-id-7)
- Optimizes SVGs using [svgo](https://github.com/svg/svgo#readme)
- Minimizes download size
- Removes extra metadata that is added by image editors
- Caches file reads
- Each `.svg` file is only read from disk _once_ and optimized _once_
- Improves processing speed when images occur multiple times on a page
- Improves processing speed when processing multiple HTML pages
Example
--------------------------
This example uses [to-vfile](https://github.com/vfile/to-vfile) to read an HTML file and process it using [unified](https://unifiedjs.com/), [rehype-parse](https://github.com/rehypejs/rehype/tree/master/packages/rehype-parse), and [rehype-stringify](https://github.com/rehypejs/rehype/tree/master/packages/rehype-stringify).
**index.html**
```html
```
**example.js**
```javascript
const unified = require("unified");
const parse = require("rehype-parse");
const inlineSVG = require("@jsdevtools/rehype-inline-svg");
const stringify = require("rehype-stringify");
const vfile = require("to-vfile");
async function example() {
// Create a Rehype processor with the Inline SVG plugin
const processor = unified()
.use(parse)
.use(inlineSVG)
.use(stringify);
// Read an HTML file that contains SVG images
let originalFile = await vfile.read("index.html");
// Process the file, inlining and optimizing SVG images
let modifiedFile = await processor.process(originalFile);
// The result is HTML with inlined elements
console.log(modifiedFile.contents);
//
//
//
Defaults to ~3 kilobytes.
|`maxOccurrences` |`number` |`Infinity` |The maximum number of times that the same image can appear on a page and still be inlined. Images that occur more than this number of times will not be inlined.
|`maxTotalSize` |`number` |`10000` |The maximum total size (in bytes) of all occurrences of a single image. If `maxTotalSize` is 10kb and a 2kb image occurs 5 times on a page, then all five occurrences will be inlined. But if the image accurs 6 or more times, then none of them will be inlined.
Defaults to ~10 kilobytes.
|`optimize` |`boolean` or `object`|`true` |[SVG optimization options](https://github.com/svg/svgo). If `false`, then SVGs will not be optimized. If `true`, then the default optimization options will be used.
Contributing
--------------------------
Contributions, enhancements, and bug-fixes are welcome! [Open an issue](https://github.com/JS-DevTools/rehype-inline-svg/issues) on GitHub and [submit a pull request](https://github.com/JS-DevTools/rehype-inline-svg/pulls).
#### Building
To build the project locally on your computer:
1. __Clone this repo__
`git clone https://github.com/JS-DevTools/rehype-inline-svg.git`
2. __Install dependencies__
`npm install`
3. __Build the code__
`npm run build`
4. __Run the tests__
`npm test`
License
--------------------------
Rehype Inline SVG is 100% free and open-source, under the [MIT license](LICENSE). Use it however you want.
This package is [Treeware](http://treeware.earth). If you use it in production, then we ask that you [**buy the world a tree**](https://plant.treeware.earth/JS-DevTools/rehype-inline-svg) to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.
Big Thanks To
--------------------------
Thanks to these awesome companies for their support of Open Source developers ❤
[](https://github.com/open-source)
[](https://www.npmjs.com/)
[](https://coveralls.io)
[](https://travis-ci.com)
[](https://saucelabs.com)