@svgsketch/cli

Command-line interface for working with SVGSketch .svgs documents.

Install

npm install -g @svgsketch/cli

Commands

svgsketch import <input.svg|.ai|.pdf|.eps> -o <output.svgs>
svgsketch convert <input.svg|.ai|.pdf|.eps|.svgs> -o <output.svg>
svgsketch validate <input>
svgsketch render <input> -o <output.svg>
svgsketch info <input>
svgsketch vars <input>
svgsketch codegen <input> -f <svg|react|vue|d3|css>

Examples

# Import foreign SVG into the native document format
svgsketch import artwork.svg -o artwork.svgs

# Import an Illustrator file, keeping text editable, with a JSON report
svgsketch import poster.ai -o poster.svgs --report poster-report.json

# Import pages 1 and 3 of a PDF with text converted to outlines
svgsketch import brochure.pdf -o brochure.svgs --artboards 1,3 --text outline

# Convert an Illustrator file straight to plain SVG
svgsketch convert poster.ai -o poster.svg --background white

# Validate a document
svgsketch validate design.svgs

# Render to SVG
svgsketch render design.svgs -o out.svg --background white

# Generate React component
svgsketch codegen icon.svgs -f react -o Icon.tsx --name Icon --typescript

# Generate CSS+SVG markup
svgsketch codegen design.svgs -f css -o design-snippet.svg

Illustrator, PDF and EPS input

import and convert read the first bytes of the input to decide its format. The file extension is never trusted: a PDF saved as .svg is imported as a PDF, and a note on stderr says so. Raster images are rejected, and import rejects .svgs input because it is already native.

An Illustrator file saved with "Create PDF Compatible File" carries a PDF rendition and its private Illustrator source. The rendition provides the appearance and the source provides artboard names, layer names, lock state and hidden state. Plain PDF files import their pages as artboards and their optional-content groups as layers. A file saved without PDF content, or a PostScript-era .ai or .eps file, is refused with a message that says how to save it again.

| Option | Meaning | | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | --artboards <1,3\|all> | Artboards (pages) to import, 1-based. Default all. Several artboards become one document with a <view> per artboard. | | --text <editable\|outline> | Keep text editable (default) or convert every glyph to outlines. | | --hidden-layers <import\|skip> | Import hidden layers as hidden (default) or leave them out. | | --report <file.json> | Write the import report: what was preserved, approximated, rasterized or dropped, the fonts the document needs, and the timings. |

Transcoder diagnostics print to stderr as severity: pdf:code: message and severity: illustrator:code: message lines beside the ingest diagnostics. --fail-on-warnings counts them along with the ingest warnings.

Render diagnostics

import, convert, render, and codegen report machine-readable diagnostics as warning: / error: lines on stderr. Import diagnostics also include their stable diagnostic code. Malformed SVG never produces a partial .svgs file.

Render diagnostics include cases such as an unsupported shape type that was dropped from the output. The output is still written and the exit status stays 0. Pass --fail-on-warnings to these commands to exit with a nonzero status when a warning is reported - useful in CI.

svgsketch import artwork.svg -o artwork.svgs --fail-on-warnings
svgsketch convert poster.ai -o poster.svg --fail-on-warnings
svgsketch render design.svgs -o out.svg --fail-on-warnings
svgsketch codegen design.svgs -f react -o Icon.tsx --fail-on-warnings