cncf / svg-autocrop Goto Github PK

View Code? Open in Web Editor NEW

104.0 8.0 19.0 5.64 MB

🚗🌽🔳An NPM module to autocrop and slim down SVGs

Home Page: https://autocrop.cncf.io

License: Apache License 2.0

JavaScript 94.50% HTML 4.71% Shell 0.79%

svg svg-icons svgo cleaner crop crop-image autocrop

svg-autocrop's Introduction

svg-autocrop

This NPM module optimizes SVGs to have a consistent (and small) border on each side and to remove extraneous tags and attributes, so that the resulting files are as small as possible. The code has been tested and refined on hundreds of real world SVGs so as to produce reliable results without distortions or to fail with a clear error if there is an unfixable problem with the source SVG.

It was created to format SVGs for the CNCF Cloud Native Landscape and has been extracted out to be usable by any application looking for reliable SVG formatting. It is a dependency of landscapeapp which now powers multiple interactive landscapes.

svg-autocrop provides the following functionality on each SVG on which it acts:

Autocrops by temporarily converting to a bitmap and scanning to find the bounding rectangle of non-transparent pixels
Adds a viewbox so that the SVG will not be distorted if placed in a rectangle with a different ratio
Uses aggressive settings of svgo to remove a large amount of useless or redundant information and runs 5 times to eliminate pointless nested groups
Standardizes the SVG header to the minimum necessary to reliably render
Fails with an error if the SVG includes a raster image (such as a PNG or JPEG), as these do not scale seamlessly and needlessly add to the file size
Fails with an error on SVGs that contain a <text> or <tspan> element since the text will not render reliably if the specified fonts are not installed (instead, you can convert the text to an image so that it will reliably render anywhere)
Optionally adds a title since that is displayed as the title in the browser tab

svg-autocrop requires a transparent or a white background to work correctly.

For more information on recommended rules for collecting logos, please see the guidelines for the CNCF Cloud Native Landscape.

svg-autocrop has been developed by Andrey Kozlov and Dan Kohn of CNCF.

Manually Optimizing SVGs

These directions will let you manually optimize SVGs on a Mac:

Install (do these once)

Type Cmd-space, enter terminal and hit return to open. For each of the commands below, it's easiest to copy and paste from here into the terminal window.
Enter: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" to install Homebrew
Enter: brew install node
Type cd ~/Documents; mkdir -p svg/input; mkdir -p svg/output; open ~/Documents/svg to create an svg folder in your Documents folder with input and output folders inside it
Enter: npm install -g svg-autocrop to install the latest version of the svg-autocrop command

Process SVGs

In Finder, go to Documents:svg:input and drag in one or more SVGs that you want to optimize.
If terminal is not already running, type Cmd-space, enter terminal and hit return to open
Type cd ~/Documents/svg to go to the proper directory
Type npm run fix
If no errors print out, you should see the optimized SVGs in an output folder
Double-click on each SVG so that it opens in Chrome. Manually verify that the SVG does not look any different (except cropped)

Update

Every month or so, you should update the software: brew update && brew upgrade && npm update -g

Autocropping multiple SVGs

You can recursively autocrop multiple SVGs (while non-SVG files are ignored) with the command:

node fix --recursive ../artwork/

(Do this from the svg-autocrop directory and set the directory to where you have images to autocrop.)

Debugging the project

npm test will run a full check on all the images in the fixture folder
CAPTURE=1 npm test will run an svg-autocrop on all images in the fixture folder and then save results
MATCH=kubernetes npm test will run a check only on files matching kubernetes in the
CAPTURE=1 MATCH=kubernetes npm test will run an svg-autocrop only on files matching kubernetes in the fixture folder
npm fix will convert svg images in the images folder

Vulnerability reporting

Please open an issue or, for sensitive information, email [email protected].

svg-autocrop's People

Contributors

Stargazers

Watchers

Forkers

ivanoblomov taylorwaggoner strikingraghu aqkj haardikdharma10 tokunaga1 danielchicote global-localhost global19 global19-atlassian-net elliotberry lfvaca sourceful-julian isabella232 palanivenkatesh sebastian-onlea

svg-autocrop's Issues

Should we turn white to transparent?

For example, in Anchore

https://github.com/cncf/svg-autocrop/blob/master/fixtures/anchore.output.svg

It might make sense only to do for non-enclosed white sections.

npm install issue

Deepaks-MacBook-Air:~ deepak$ brew reinstall node
==> Reinstalling node
==> Downloading https://homebrew.bintray.com/bottles/node-13.2.0.mojave.bottle.t
Already downloaded: /Users/deepak/Library/Caches/Homebrew/downloads/efe2d5c90ac1f7468a326a8b77f14d7f4baccf1f8a0e6c662660dd6489b95099--node-13.2.0.mojave.bottle.tar.gz
==> Pouring node-13.2.0.mojave.bottle.tar.gz
Warning: The post-install step did not complete successfully
You can try again using brew postinstall node
==> Caveats
Bash completion has been installed to:
/usr/local/etc/bash_completion.d
==> Summary
🍺 /usr/local/Cellar/node/13.2.0: 4,654 files, 58.8MB

Deepaks-MacBook-Air:~ deepak$ node -v
v13.2.0
Deepaks-MacBook-Air:~ deepak$ npm -v
-bash: npm: command not found
Deepaks-MacBook-Air:~ deepak$

Remove SVGs from top level

SVGO version deprecation

Upon installing, I get the message: This SVGO version is no longer supported. Upgrade to v2.x.x.

Sounds like you need to update the dependency.

Replace svg2png

It's using PhantomJS, which has been deprecated, and hasn't been updated in 2 years: https://www.npmjs.com/package/svg2png

Instead, switch to https://www.npmjs.com/package/convert-svg-to-png which uses headless Chromium.

Detect bad SVGs

This doesn't load in Chrome. Can we detect that and trigger an error?
singularity.svg.zip

Try certain optimizations if they don't damage the output

Some optimizations of the SVGO may work in 99.9% of our cases.
It would be reasonable to try this optimization, compare the png before and after, and if there is any difference we should not use that optimization, but if pngs are the same, then lets use it.

Error: ENOENT: no such file or directory, scandir 'input'

I already created the file input and output using the mkdir -p svg/input and mkdir -p svg/output. However there still an error.

My node version is: v14.15.1
npm version 6.14.9

PS C:\Users\35846\AppData\Roaming\npm\node_modules\svg-autocrop> npm run fix

> [email protected] fix C:\Users\35846\AppData\Roaming\npm\node_modules\svg-autocrop
> node fix.js

Error: ENOENT: no such file or directory, scandir 'input'
    at Object.readdirSync (fs.js:1021:3)
    at getInputFiles (C:\Users\35846\AppData\Roaming\npm\node_modules\svg-autocrop\fix.js:18:37)
    at main (C:\Users\35846\AppData\Roaming\npm\node_modules\svg-autocrop\fix.js:30:30)
    at Object.<anonymous> (C:\Users\35846\AppData\Roaming\npm\node_modules\svg-autocrop\fix.js:72:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47 {
  errno: -4058,
  syscall: 'scandir',
  code: 'ENOENT',
  path: 'input'
}

install issue

when I run npm install -g svg-autocrop I get npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules. So then I used sudo and got this error:

[~/Sites/svg/input]$ sudo npm install -g svg-autocrop
npm WARN deprecated [email protected]: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
/usr/local/bin/svg-autocrop -> /usr/local/lib/node_modules/svg-autocrop/fix.js

> [email protected] install /usr/local/lib/node_modules/svg-autocrop/node_modules/puppeteer
> node install.js

ERROR: Failed to download Chromium r686378! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
{ Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/svg-autocrop/node_modules/puppeteer/.local-chromium'
  -- ASYNC --
    at BrowserFetcher.<anonymous> (/usr/local/lib/node_modules/svg-autocrop/node_modules/puppeteer/lib/helper.js:111:15)
    at Object.<anonymous> (/usr/local/lib/node_modules/svg-autocrop/node_modules/puppeteer/install.js:64:16)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
  errno: -13,
  code: 'EACCES',
  syscall: 'mkdir',
  path:
   '/usr/local/lib/node_modules/svg-autocrop/node_modules/puppeteer/.local-chromium' }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/cjyabraham/.npm/_logs/2019-11-28T02_45_25_312Z-debug.log

Any ideas on how to resolve?

Instructions for how to use as npm module

Currently there's only some (to me) rather confusing instructions for how to use this on a Mac. Would it be possible to maybe add some instructions for how to use this via npm/npx/git directly?

Find a way to prohibit external references.

We should not allow any references to the external resources, but we can not block xlink:href because the use(#a) is a valid construction to reuse a part of an svg.

How to disable clean border?

I need to crop my files widthout any border, how can i do this?

How to use on command line (Linux)

I'm using Ubuntu 22.04.
I installed the package globally:
sudo npm install -g svg-autocrop

I'd like to convert a single .svg. How do I do that?
Is there a documentation for command line arguments?

Thanks,

Image conversion fails on clean SVG

Error received:

svg autocrop failed: Cannot read properties of undefined (reading 'each')

Use this as a fixture

Auto-cropping originally failed on https://raw.githubusercontent.com/MitocGroup/deep-framework/master/docs/logo.svg. Does it work now? Any idea why it had trouble before?

the wikipedia flag of guam does not render for the lfph landscape

the wikipedia flag of guam

https://upload.wikimedia.org/wikipedia/commons/0/07/Flag_of_Guam.svg

returns this error (attached)

can the autocrop be improved to handle that or shall we manually rebuild it and inform the maintainers of the wikipedia page that their svg is not good?

Smoooooshes text

All I know about SVG is that I can open it up in vim and it looks like HTML... and it stretches. Beyond that... I'm totally ignorant. But here's an image that should not have the smooshed subtitle text.

Deliverable_Logo_Horizontal_RATIO.zip

Thanks!

An in-range update of svgo is breaking the build 🚨

The dependency svgo was updated from `1.2.0` to `1.2.1`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

svgo is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

❌ ci/circleci: build: Your tests failed on CircleCI (Details).

Commits

The new version differs by 4 commits.

5969899 v1.2.1
593ea85 Merge pull request #1089 from eugestarr/master
bfae928 Bump up js-yaml version to fix DoS vulnerability
aa0df73 bump package-lock.json version

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Add Bloombase fixture

https://landscape.cncf.io/logos/bloombase.svg

Anchore logo doesn't have spacing at bottom after auto-crop

https://github.com/cncf/svg-autocrop/blob/master/fixtures/anchore.input.svg
https://github.com/cncf/svg-autocrop/blob/master/fixtures/anchore.output.svg

An in-range update of prettydiff is breaking the build 🚨

The dependency prettydiff was updated from `100.2.6` to `100.2.7`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

prettydiff is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details