svj

SVJ - CLI to optimize and convert SVGs to a JSON resource

Installation

npm i -D svj

Usage

npx svj -i <svg-folder-path> -d <dist-folder> -r

Adapter

React	@svjson/react

Motivations

Importing SVGs as images has a runtime cost, inline unused SVGs has bundle size cost and using a loader to create SVG components, has both bundle size and build time costs.

In order to manipulate SVG assets without a loader, keeping the gains of tree shaking algorithms, and using a familiar simple syntax, I'd decided to use JSON.

I'd found a lib that converts SVG to JSON, but, for support reasons, theirs parsing result was too verbose for my needs. Also the SVG wasn't being optimized, so in addition to simplifying the JSON output, I'd added SVGO as an option to create a smaller result.

Options:

Option	Description
-v, --version	current version
-r, --recommended	use recommended options
-i, --input [input]	input file
-d, --dist [dist]	dist file
-s, --suffix	use nested folders name to add suffix
--svgo	use svgo optmizer
--esm	use ECMAScript Modules
--ts	use TypeScript
-h, --help	display help for command

Example:

Input SVG file

<!-- lightbulb.svg -->
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:cc="http://creativecommons.org/ns#"
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentColor"
  version="1.1"
  id="svg4"
  sodipodi:docname="lightbulb.svg"
  inkscape:version="1.0.2 (394de47547, 2021-03-26)"
>
  <metadata id="metadata10">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs id="defs8" />
  <sodipodi:namedview
    pagecolor="#ffffff"
    bordercolor="#666666"
    borderopacity="1"
    objecttolerance="10"
    gridtolerance="10"
    guidetolerance="10"
    inkscape:pageopacity="0"
    inkscape:pageshadow="2"
    inkscape:window-width="1920"
    inkscape:window-height="1019"
    id="namedview6"
    showgrid="false"
    inkscape:zoom="15.3125"
    inkscape:cx="-2.9892135"
    inkscape:cy="15.736825"
    inkscape:window-x="0"
    inkscape:window-y="25"
    inkscape:window-maximized="1"
    inkscape:current-layer="svg4"
  />
  <path
    id="path873"
    style="stroke-width:1.56909"
    d="m 8.9253156,21.224052 c 0,0.512444 0.4099595,1.024893 1.0248945,1.024893 h 4.0995779 c 0.614937,0 1.024895,-0.512449 1.024895,-1.024893 V 20.199155 H 8.9253156 Z M 12,1.7510548 c -3.9970888,0 -7.1742615,3.1771731 -7.1742615,7.1742618 0,2.4597474 1.2298733,4.6120254 3.0746835,5.8419004 v 2.357255 c 0,0.512447 0.4099579,1.024895 1.0248938,1.024895 h 6.1493672 c 0.614937,0 1.024894,-0.512448 1.024894,-1.024895 v -2.357255 c 1.844812,-1.332365 3.074685,-3.484642 3.074685,-5.8419004 0,-3.9970887 -3.177173,-7.1742618 -7.174262,-7.1742618 z"
  />
</svg>

Output JSON file

export const lightbulb = {
  tag: 'svg',
  props: {
    xmlns: 'http://www.w3.org/2000/svg',
    fill: 'currentColor',
    version: '1.1',
    viewBox: '0 0 24 24',
  },
  children: [
    {
      tag: 'path',
      props: {
        strokeWidth: '1.569',
        d: 'M8.925 21.224c0 .512.41 1.025 1.025 1.025h4.1c.615 0 1.025-.513 1.025-1.025V20.2h-6.15ZM12 1.751a7.13 7.13 0 0 0-7.174 7.174c0 2.46 1.23 4.612 3.074 5.842v2.357c0 .513.41 1.025 1.025 1.025h6.15c.615 0 1.025-.512 1.025-1.025v-2.357c1.844-1.332 3.074-3.484 3.074-5.842A7.13 7.13 0 0 0 12 1.751z',
      },
    },
  ],
};