jcrushsvg


JCrush SVG
==========

Deduplicates and compresses SVG files using Javascript.

> It creates Javascript files that provide the SVG code.

- Works best on groups of SVG files that have already been compressed with a regular SVG compressor. (For the use-case this was created for it resulted in 83% compression)
- Uses JCrush. See that project for more info (and an in-built plugin for
deduplicating Javascript code).
- You should merge, minify, and reprocess the main output file produced with
this module using JCrush for further optimization.
- If you don't want deduplication and just need something to optimize SVG/HTML DOM code (more than
minifiers), see HyperCrush.

Installation

This is a Node.JS module available from the Node Package Manager (NPM).

https://www.npmjs.com/package/jcrushsvg

Here's the command to download and install from NPM:

npm install jcrushsvg -S

or with Yarn:

yarn add jcrushsvg

Setup Instructions

1. Place all relevant SVG files in one directory:
- Example: /src/svg

2. Choose a processing method:
- Decide whether to use the terminal, a custom script, or Gulp to process the directory with this module.
- Refer to the Usage section below for further instructions.

3. Modify your Javascript code:
- Instead of using the SVG images in an tag, call a function with the file's basename (slug).
- The usage differs based on the bundle option:
- If bundle is false (default):
- The functionality is asynchronous. To load the SVG code into a DOM element, use:
``js
svg('main-logo', document.getElementById("logo"))
`
- Note: This will replace whatever is already inside the #logo element, so plan your code accordingly.
- If bundle is true:
- The SVG code is stored in the main JS file. The function will return the SVG code like so:
`js
var svgCode = svg('main-logo')
`

4. Include the main Javascript outFile in your HTML:
- Or, use some automation to merge it into your scripts.
- Note: There's no need to include each individual image's corresponding JS file.

5. Merge/minify/compress the main outFile:
- You should merge, minify, or compress the main outFile as you would with your own code.
- Note: This module leaves that file in a human-readable state.

Usage

$3

It may be sufficient to just run:

node node_modules/jcrushsvg --inDir="/src/svg" --outDir="/svg" --outFile="svg.js"

...once and you're done.

$3

Create a file svgTask.js with the contents:

`javascript
import jcrushSVG from 'jcrushsvg';
let opts = { inDir: '/src/svg', outDir: '/svg', outFile: 'svg.js', processSVG:(filePath, svgContent) => {
// Check there is no version or it's v1.1... that's the cool one.
if (svgContent.includes('version=') && !svgContent.includes('version="1.1"')) {
throw new Error(SVG in ${filePath} does not have version="1.1". Ensure you set "SVG Profile: SVG 1.1" in save-as dialogue of Adobe Illustrator.);
}
// Check for style tags, not on my watch.
if (svgContent.match(/]>[\s\S]?<\/style>/g)) {
throw new Error(SVG in ${filePath} contains