Détail du package

oslllo-svg-fixer

oslllo126.1kMIT5.0.0

Converts SVG Strokes To Fill.

converts-svg, svg-fixer, svg-icons, font-pack

readme

SVG Fixer

Cover Image

CI/Test npm Coveralls github

🎉 v3.0.0 Is now 11x faster thanks to @ericfennis, see #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

Strokes To Files Demo

Documentation, Installation, and Usage Instructions

See the full installation and usage documentation HERE.

The Objective

I wanted to convert some svg icons to fonts using tools like icomoon.io, fontello.com and 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

SVG Icon

Code -> for the icon

<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<line x1="9" y1="9" x2="15" y2="15" />
<line x1="15" y1="9" x2="9" y2="15" />
</svg>

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 error fontello.com error webfont error
Icomoon Error Fontello Error Webfont Error

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 blank fontello.com blank webfont blank using fontdrop.info to preview the font
Icomoon Blank Fontello Blank Webfont Blank

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().

icomoon.io fixed fontello.com fixed webfont fixed using fontdrop.info to preview the font
Icomoon Fixed Fontello Fixed Webfont Fixed

Fixed SVG Code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.620 2.025 C 4.212 2.105,4.087 2.139,3.870 2.227 C 2.989 2.585,2.321 3.364,2.076 4.320 C 1.993 4.647,1.992 19.351,2.076 19.677 C 2.357 20.776,3.117 21.553,4.260 21.915 C 4.439 21.971,5.243 21.979,11.820 21.990 C 16.818 21.998,19.268 21.989,19.453 21.960 C 20.643 21.777,21.620 20.876,21.924 19.680 C 22.007 19.352,22.008 4.648,21.924 4.323 C 21.617 3.126,20.660 2.233,19.480 2.043 C 19.234 2.003,4.819 1.986,4.620 2.025 M19.340 4.066 C 19.455 4.105,19.603 4.201,19.701 4.299 C 20.025 4.623,20.000 3.977,20.000 12.000 C 20.000 20.023,20.025 19.377,19.701 19.701 C 19.377 20.025,20.023 20.000,12.000 20.000 C 3.975 20.000,4.623 20.025,4.298 19.700 C 3.974 19.376,3.998 20.028,4.010 11.918 L 4.020 4.700 4.131 4.511 C 4.256 4.298,4.449 4.136,4.670 4.057 C 4.793 4.013,6.104 4.003,11.983 4.002 C 18.548 4.000,19.162 4.006,19.340 4.066 M8.643 8.069 C 8.291 8.193,8.000 8.614,8.000 9.000 C 8.000 9.080,8.030 9.234,8.066 9.343 C 8.123 9.517,8.276 9.685,9.354 10.770 L 10.577 12.000 9.354 13.230 C 8.276 14.315,8.123 14.483,8.066 14.657 C 7.936 15.046,8.021 15.423,8.299 15.701 C 8.577 15.979,8.954 16.064,9.343 15.934 C 9.517 15.877,9.685 15.724,10.770 14.646 L 12.000 13.423 13.230 14.646 C 14.315 15.724,14.483 15.877,14.657 15.934 C 15.046 16.064,15.423 15.979,15.701 15.701 C 15.979 15.423,16.064 15.046,15.934 14.657 C 15.877 14.483,15.724 14.315,14.646 13.230 L 13.423 12.000 14.646 10.770 C 15.724 9.685,15.877 9.517,15.934 9.343 C 16.064 8.954,15.979 8.577,15.701 8.299 C 15.423 8.021,15.046 7.936,14.657 8.066 C 14.483 8.123,14.315 8.276,13.230 9.354 L 12.000 10.577 10.770 9.354 C 9.685 8.276,9.517 8.123,9.343 8.066 C 9.102 7.985,8.877 7.986,8.643 8.069 " stroke="none" fill="black" fill-rule="evenodd"></path></svg>

changelog

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

5.0.0 (2024-07-21)

Breaking Changes

  • Breaking changes will only affect users on node 21.x, as the security fixes will throw a deprication warning that might cause the fixer to exit if you are using it in a cli. See https://github.com/yarnpkg/yarn/issues/9005 for more details.

Bug Fixes

  • security vulnerabilities (0ade74b)

4.0.1 (2024-03-27)

Bug Fixes

  • security vulnerabilities (81cc6ac)

4.0.0 (2024-03-26)

Breaking

  • drop support for node 16

Bug Fixes

3.0.0 (2023-09-16)

⚠️ Contains breaking changes.

Breaking Changes

  • Dropped support for node <16.0.0
  • This version will not work with <16.0.0

Features

  • Made the tool 11x faster thanks to @ericfennis, see #89

Bug Fixes

2.2.0 (2022-10-19)

Features

  • closes #82 - fix negative viewBox min-x min-y bug (b64aa75)

2.1.2 (2022-07-16)

Miscellaneous Chores

2.1.1 (2022-05-1)

Chore

  • update dependencies
  • npm audit fix

2.1.0 (2022-03-8)

Added

  • add configurable trace resolution (#72)

Updated

  • Updated dependencies

2.0.1 (2022-01-21)

Refactor

2.0.0 (2022-01-12)

This version did not break the api so upgrading from v1.0.0 without any changes should be fine. The reason for the major version change is just in case something did break.

Changed

  • Removed Canvas & JSDOM to fix very slow npm install cycles.
  • Switched from Canvas to svg2png-wasm.

Updated

  • Updated dependencies

1.4.1 (2021-09-05)

Bug Fixes

1.4.0 (2021-07-14)

Features

  • add support for svgs with "ex", "ch", "cm", "mm", "q", "in", "pc", "pt" (4d2c18e)
  • add support for svgs with fill color in path style attribute (1aeb079)
  • support svgs without a set viewBox attribute (17b876c)

1.3.2 (2021-06-26)

Bug Fixes

  • security vulnerabilities (372730b)

1.3.1 (2021-05-27)

Bug Fixes

  • output svg being smaller than viewBox (#48) (f658614)

1.3.0 (2021-05-15)

Features

  • add support for svgs with light colored fill (#45) (47aa95d)

Bug Fixes

1.2.1 (2021-05-06)

Bug Fixes

  • drop yargs version to 16 (7b4d9cc)
  • package breaking when process.env.NODE_ENV env variable is set (51c6318)

[1.2.0] - 2021/4/1

Fixed

  • Fixed bug in test.

Updated

  • Updated dependencies.

[1.1.2] - 2020/12/12

Fixed

  • Fixed vulnerability.

Updated

  • Updated dependencies.

[1.1.1] - 2020/10/22

Fixed

  • Fixed large npm package.

[1.1.0] - 2020/10/22

Fixed

  • Fixed bug that allowed you to update options that do not exist.

Added

  • Added CLI functionality.
  • Added callback functionality to SVGFixer.fix().

Changed

  • Refactored tests.
  • Refactored progress bar.

[1.0.2] - 2020/10/2

Fixed

  • Fixed not being able to process SVGs with % dimensions.

Added

  • SVG attribute tests.

[1.0.1] - 2020/9/16

Changed

  • Remove tests from npm package to help reduce unpacked package size.

[1.0.0] - 2020/9/16

⚠️ Contains breaking changes.

Breaking Changes

  • svgfixer.fix(source, destination, options) => SVGFixer(source, destination, options).fix().
    • It was changed from a wrapper function to a method function for SVGFixer.
    • It still returns a Promise.
    • fix() no more takes in parameters, those should be passed into SVGFixer().
  • svgfixer.SVGFixer() class => SVGFixer().
    • The .setOptions(options) method has been removed, options should now be passed in class constructor as the 3rd parameter.
    • The .setSourceAndDest() method has been removed, source and destination should now be passed in class constructor as the 1st and 2nd parameters.
    • The .process() method has been removed, use .fix() instead.
    • SVGFixer() does not require the new operator anymore.
  • fixConcurrency has been removed, might be reimplemented on later versions.

Changed

  • Updated dependencies.
  • Refactored codebase.
  • Refactored progressbar.

[0.6.0] - 2020/8/13

Security

Changed

  • Updated image processor.
  • Updated CHANGELOG.md wording and formatting.

[0.5.1] - 2020/7/7

Changed

  • Updated README.md.

Added

  • Documentation.

[0.5.0] - 2020/6/13

Changed

  • Changed image processing engine from Sharp to Jimp. Fixes #7
  • Refactored async pools (fixConcurrency).

Fixed

  • Fixed pathing issues on windows. Fixes #8

[0.4.4] - 2020/6/8

Changed

  • Updated dependencies. Fixes #7

[0.4.3] - 2020/6/2

Changed

  • Updated package.json description.

[0.4.2] - 2020/5/24

Fixed

  • Fixed incorrect svg data when source svg has 'px', 'rem' or 'em' on height and width attributes as a unit of measurement. See (#5)

[0.4.1] - 2020/5/16

Security

[0.4.0] - 2020/5/14

Added

  • Added new parameter fixConcurrency to control how many svgs to fix at a given time.
  • Added new tests

  • Added an perfomance increase by ~67%

    |Version|completion (%)|Time (seconds)|Number of SVGs fixed| |------|------|-----|-----| |v0.4.0|100.00|~ 127|1315| |v0.3.3|100.00|~ 190|1315| |-|-|-|-| |VPS|CPU|RAM||| ||Intel(R) Xeon(R) E5-1650 v3 3.50GHz (2x) | 1548MiB|||

Fixed

  • Fixed tests

Changed

  • Reduceed npm package size.
  • Updated README.md.

[0.3.3] - 2020/5/12

Added

  • Added badge links to README.md.
  • Added new tags to package.json.

Changed

  • Updated README.md content.

[0.3.2] - 2020/5/10

Changed

  • Updated README.md

[0.3.1] - 2020/5/9

Changed

  • Updated README.md

[0.3.0] - 2020/5/8

Changed

  • Refactored the whole codebase.
  • Updated README.md

Added

  • Added tests
  • Added slight performance increase.

[0.2.0] - 2020/4/18

Added

  • Added progress bar

[0.1.0] - 2020/4/17

Added

  • Added CHANGELOG.md
  • Create destination folder if it does not exist.

Changed

  • Switched from fs to fs-extra
  • Changed SvgFixer() function name from SvgFixer to svgFixer because its a function not a class.

Removed

  • Removed debug functions

[0.0.3] - 2020/4/16

Added

  • Added package.json description

[0.0.2] - 2020/4/16

Added

[0.0.1] - 2020/4/16

Added

  • Added everything, initial release.