https://github.com/oslllo/svg-fixer
Converts SVG Strokes To Fill.
https://github.com/oslllo/svg-fixer
converts-svg fill font font-pack fontello icomoon oslllo stroke-fill stroke-to-fill svg svg-fixer svg-icons webfont
Last synced: 10 months ago
JSON representation
Converts SVG Strokes To Fill.
- Host: GitHub
- URL: https://github.com/oslllo/svg-fixer
- Owner: oslllo
- License: mit
- Created: 2020-04-14T21:37:11.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-01-09T05:04:58.000Z (over 1 year ago)
- Last Synced: 2025-07-25T07:37:44.880Z (10 months ago)
- Topics: converts-svg, fill, font, font-pack, fontello, icomoon, oslllo, stroke-fill, stroke-to-fill, svg, svg-fixer, svg-icons, webfont
- Language: JavaScript
- Homepage: https://docs-oslllo-com.onrender.com/svg-fixer/master
- Size: 24.1 MB
- Stars: 246
- Watchers: 2
- Forks: 23
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# SVG Fixer
[](https://github.com/oslllo/svg-fixer/actions/workflows/ci.test.yml)
[](https://www.npmjs.com/package/oslllo-svg-fixer)
[](https://coveralls.io/github/oslllo/svg-fixer)
🎉 v3.0.0 Is now 11x faster thanks to @ericfennis, see [#89](https://github.com/oslllo/svg-fixer/pull/89).
🎉 v2.0.0 Removed `Canvas & JSDOM` no more slow `npm install` cycles.
Attempts to fix your svg by turning it into a fill / single path (and making it font compatible as a bonus).
## Convert SVG Strokes To Fills
---
---
## Documentation, Installation, and Usage Instructions
See the full installation and usage documentation [HERE](https://docs-oslllo-com.onrender.com/svg-fixer/master/).
### The Objective
I wanted to convert some `svg icons` to `fonts` using tools like [icomoon.io](https://icomoon.io/app/#/select), [fontello.com](http://fontello.com) and [webfont](https://www.npmjs.com/package/webfont)
### The Problem / Why
If your svg containts `strokes` or any tags besides a single `path` e.g `polygon` `rect` `line` etc, you will get these errors when trying to convert them into fonts.
---
### Example
##### SVG
`Icon` -> we will be using in this example
`Code` -> for the icon
```xml
```
---
### Errors
When we try to convert this `SVG` into a font using one of these `SVG To Font` conversion tools we get the following errors.
| [icomoon.io](https://icomoon.io/app/#/select) error | [fontello.com](http://fontello.com) error | [webfont](https://www.npmjs.com/package/webfont) error |
| -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| [](docs/images/icomoon-error.png) | [](docs/images/fontello-error.png) | [](docs/images/webfont-error.png) |
### Ignoring The Errors
What happends if you ignore these errors? well, the font pack with the icon(s) will come out `"corrupt/incorrect"`, `different than expected` or `not even render at all` (blank).
### Results From Ignoring The Errors
> The icon not showning up or rendering in the font pack when we ignore the errors and just create the font anyway.
| [icomoon.io](https://icomoon.io/app/#/select) blank | [fontello.com](http://fontello.com) blank | [webfont](https://www.npmjs.com/package/webfont) blank using [fontdrop.info](https://fontdrop.info) to preview the font |
| -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [](docs/images/icomoon-blank.png) | [](docs/images/fontello-blank.png) | [](docs/images/webfont-blank.png) |
### The Solution
I created this `package` to solve this issue, now you can `"fix"` svg icons to make then font compatable by running them through `SVGFixer`.
### Fixing The Icon
The icon in a font pack after we run it through [`SVGFixer()`](https://github.com/oslllo/svg-fixer).
| [icomoon.io](https://icomoon.io/app/#/select) fixed | [fontello.com](http://fontello.com) fixed | [webfont](https://www.npmjs.com/package/webfont) fixed using [fontdrop.info](https://fontdrop.info) to preview the font |
| -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [](docs/images/icomoon-fixed.png) | [](docs/images/fontello-fixed.png) | [](docs/images/webfont-fixed.png) |
---
### Fixed SVG Code
```xml
```
---