scriptex / svgo-viewbox

Add viewBox attribute to your SVGs and then optimize them with SVGO

svgo-viewBox

Add viewBox to SVG files using SVGO

Node JS script which uses SVGO and a custom plugin in order to add viewBox attribute to all SVG files in a folder or to a single SVG file.

Dependencies

1. NodeJS
2. NPM or Yarn
3. SVGO installed and configured - you should have a svgo.config.js file. If you don't, the default config file will be used.
4. Some SVG files which have width and height attribute but lack the viewBox attribute.

Usage

svgo-viewbox --help

#   Usage
#       $ svgo-viewbox --arg1 --arg2
#
#   Options
#       --input, -i         path to folder which contains SVG files or a single svg file, defaults to current working directory
#       --svgo-file, -f     path to SVGO configuration file in JS format (https://github.com/svg/svgo#configuration), defaults to the built-in SVGO configuration
#
#   Examples
#       $ svgo-viewbox --input ./assets/images/svg --svgo-file ./svgo.config.js
#       $ svgo-viewbox -i ./assets/images/svg
#       $ svgo-viewbox -i ./assets/images/svg/file.svg
#       $ svgo-viewbox

As an NPM script

First install the module as a development dependency

npm i svgo-viewbox --save-dev

# or

yarn add svgo-viewbox -D

then add a new NPM script in your package.json file:

{
	"scripts": {
		"svgo-viewbox": "svgo-viewbox -i ./assets/images/svg -f ./svgo.config.js"
	}
}

From the command line

First install the module globally

npm i -g svgo-viewbox

# or

yarn global add svgo-viewbox

then use it in your terminal

svgo-viewbox -i ./assets/images/svg -f ./svgo.config.js

Without installing

npx svgo-viewbox -i ./assets/images/svg -f ./svgo.config.js

LICENSE

MIT

---

Connect with me:

                     

---

Support and sponsor my work:

svgo-viewbox's Issues

CVE-2021-23362 (Medium) detected in hosted-git-info-2.8.8.tgz

CVE-2021-23362 - Medium Severity Vulnerability

Vulnerable Library - hosted-git-info-2.8.8.tgz

Provides metadata and conversions from repository urls for Github, Bitbucket and Gitlab

Library home page: https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz

Path to dependency file: svgo-viewbox/package.json

Path to vulnerable library: svgo-viewbox/node_modules/read-pkg/node_modules/hosted-git-info/package.json

Dependency Hierarchy:

• meow-9.0.0.tgz (Root Library)
  • read-pkg-up-7.0.1.tgz
    • read-pkg-5.2.0.tgz
      • normalize-package-data-2.5.0.tgz
        • ❌ hosted-git-info-2.8.8.tgz (Vulnerable Library)

Found in HEAD commit: fac6c8d03bc094627a51422bd6ab466ce6508bcd

Vulnerability Details

The package hosted-git-info before 3.0.8 are vulnerable to Regular Expression Denial of Service (ReDoS) via shortcutMatch in fromUrl().

Publish Date: 2021-03-23

URL: CVE-2021-23362

CVSS 3 Score Details (5.3)

Base Score Metrics:

• Exploitability Metrics:
  • Attack Vector: Network
  • Attack Complexity: Low
  • Privileges Required: None
  • User Interaction: None
  • Scope: Unchanged
• Impact Metrics:
  • Confidentiality Impact: None
  • Integrity Impact: None
  • Availability Impact: Low

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://github.com/npm/hosted-git-info/releases/tag/v3.0.8

Release Date: 2021-03-23

Fix Resolution: hosted-git-info - 3.0.8

---

Step up your Open Source Security Game with WhiteSource here

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update dependency meow to v10

---

• Check this box to trigger a request for Renovate to run again on this repository

CVE-2022-25883 (Medium) detected in semver-5.7.1.tgz, semver-7.5.0.tgz

CVE-2022-25883 - Medium Severity Vulnerability

Vulnerable Libraries - semver-5.7.1.tgz, semver-7.5.0.tgz

semver-5.7.1.tgz

The semantic version parser used by npm.

Library home page: https://registry.npmjs.org/semver/-/semver-5.7.1.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/semver/package.json

Dependency Hierarchy:

• meow-9.0.0.tgz (Root Library)
  • read-pkg-up-7.0.1.tgz
    • read-pkg-5.2.0.tgz
      • normalize-package-data-2.5.0.tgz
        • ❌ semver-5.7.1.tgz (Vulnerable Library)

semver-7.5.0.tgz

Library home page: https://registry.npmjs.org/semver/-/semver-7.5.0.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/semver/package.json

Dependency Hierarchy:

• meow-9.0.0.tgz (Root Library)
  • normalize-package-data-3.0.3.tgz
    • ❌ semver-7.5.0.tgz (Vulnerable Library)

Found in HEAD commit: f9601918b7e922bdfdf21beb528cab1d9c5b8cdd

Found in base branch: master

Vulnerability Details

Versions of the package semver before 7.5.2 are vulnerable to Regular Expression Denial of Service (ReDoS) via the function new Range, when untrusted user data is provided as a range.

Publish Date: 2023-06-21

URL: CVE-2022-25883

CVSS 3 Score Details (5.3)

Base Score Metrics:

• Exploitability Metrics:
  • Attack Vector: Network
  • Attack Complexity: Low
  • Privileges Required: None
  • User Interaction: None
  • Scope: Unchanged
• Impact Metrics:
  • Confidentiality Impact: None
  • Integrity Impact: None
  • Availability Impact: Low

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Release Date: 2023-06-21

Fix Resolution: semver - 7.5.2

---

Step up your Open Source Security Game with Mend here

[Feat]Deal with single file

Sometimes, I just need to deal with a file instead of a folder.

This module crop the files?

Can this module remove the white space around the document?
Svg-autocrop can do this, but it saves small white space arond.

Integrated into the lint-staged workflow

I'm going to integrate svgo-viewbox into the lint-staged workflow. But if I enter it this way, it only works for one file. I'm not sure what's wrong.

"lint-staged": {
  "*.{vue,js,jsx,ts,tsx}": [
    "prettier --write",
    "eslint --fix"
  ],
  "*.{css,scss,md,json}": "prettier --write",
  "*.{png,jpg,jpeg}": "tiny-files --key ***",
  "*.svg": "svgo-viewbox -i"
}

Can we consider a default input and output like svgo? svg/svgo#691

svgo <input> <output>

We can also use it quickly without typing '-i'. Thanks for your contribution!

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

CVE-2021-33587 (High) detected in css-what-4.0.0.tgz

CVE-2021-33587 - High Severity Vulnerability

Vulnerable Library - css-what-4.0.0.tgz

a CSS selector parser

Library home page: https://registry.npmjs.org/css-what/-/css-what-4.0.0.tgz

Path to dependency file: svgo-viewbox/package.json

Path to vulnerable library: svgo-viewbox/node_modules/css-what

Dependency Hierarchy:

• svgo-2.3.0.tgz (Root Library)
  • css-select-3.1.2.tgz
    • ❌ css-what-4.0.0.tgz (Vulnerable Library)

Found in HEAD commit: e786f552b7291fadb3f30e23b38f778adc5feeb1

Found in base branch: master

Vulnerability Details

The css-what package before 5.0.1 for Node.js does not ensure that attribute parsing has Linear Time Complexity relative to the size of the input.

Publish Date: 2021-05-28

URL: CVE-2021-33587

CVSS 3 Score Details (7.5)

Base Score Metrics:

• Exploitability Metrics:
  • Attack Vector: Network
  • Attack Complexity: Low
  • Privileges Required: None
  • User Interaction: None
  • Scope: Unchanged
• Impact Metrics:
  • Confidentiality Impact: None
  • Integrity Impact: None
  • Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-33587

Release Date: 2021-05-28

Fix Resolution: css-what - 5.0.1

---

Step up your Open Source Security Game with WhiteSource here

Use SVGO v2

1. Actually migrate to v2
2. Switch to json config instead of yml
3. Publish a new major version

CVE-2021-23343 (Medium) detected in path-parse-1.0.6.tgz

CVE-2021-23343 - Medium Severity Vulnerability

Vulnerable Library - path-parse-1.0.6.tgz

Node.js path.parse() ponyfill

Library home page: https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz

Path to dependency file: svgo-viewbox/package.json

Path to vulnerable library: svgo-viewbox/node_modules/path-parse/package.json

Dependency Hierarchy:

• tape-5.2.2.tgz (Root Library)
  • resolve-2.0.0-next.3.tgz
    • ❌ path-parse-1.0.6.tgz (Vulnerable Library)

Found in HEAD commit: 70832b83865f16e154f3bb464a44536752cd4bcd

Vulnerability Details

All versions of package path-parse are vulnerable to Regular Expression Denial of Service (ReDoS) via splitDeviceRe, splitTailRe, and splitPathRe regular expressions. ReDoS exhibits polynomial worst-case time complexity.

Publish Date: 2021-05-04

URL: CVE-2021-23343

CVSS 3 Score Details (5.3)

Base Score Metrics:

• Exploitability Metrics:
  • Attack Vector: Network
  • Attack Complexity: Low
  • Privileges Required: None
  • User Interaction: None
  • Scope: Unchanged
• Impact Metrics:
  • Confidentiality Impact: None
  • Integrity Impact: None
  • Availability Impact: Low

For more information on CVSS3 Scores, click here.

---

Step up your Open Source Security Game with WhiteSource here

Change "CleanupIDs" plugin config

The prefix option of the CleanupIDs plugin should look like this:

prefix: {
	toString() {
		this.counter = this.counter || 0;

		return `svgo-viewbox-id-${this.counter++}`
	}
}