Neonatal Penguin March

    svgsus

    0.23.4 • Public • Published

    Svgsus Logo

    NPM version Build Status Build Status

    Install

    Command Line

    To use svgsus as a command line tool anywhere in your system you simply need to install globally it using npm.

    npm install -g svgsus
    

    Library

    Or if you want to use svgsus as a library in your project you also use npm but keep it local to your project to make it easier for your fellow developers.

    npm install --save svgsus
    

    App

    There's also the option of installing Svgsus as an App if you're on macOS (versions for Windows and Linux are planned).

    The app, besides providing a GUI for this tool, also has a few more features. Read all about them on our website and our medium post.

    Available on Mac App Store

    Usage

    Command Line

    Svgsus - Organize, clean and transform your SVGs
    
      Usage: svgsus <format> [options] [--] [<file>...]
    
        svgsus svg [--codeIndent=<indent> --compressed --output=<dir>] [--] [<file>...]
        svgsus svgsymbol [--codeIndent=<indent> --stripStyle --name=<name> --compressed --output=<dir>] [--] [<file>...]
        svgsus css [--codeIndent=<indent> --output=<dir>] [--] [<file>...]
        svgsus (pug|jade) [--codeIndent=<indent> --output=<dir>] [--] [<file>...]
        svgsus cashapelayer [--codeIndent=<indent> --codeType=<type> --output=<dir>] [--] [<file>...]
        svgsus uibeziershape [--codeType=<type> --output=<dir>] [--] [<file>...]
        svgsus vectordrawable [--codeIndent=<indent> --output=<dir>] [--] [<file>...]
        svgsus -h | --help
        svgsus --version
    
      Options:
        --stripStyle           whether to remove any style tags from the SVG so it's
                               stylable using CSS.
        --name=<name>          the id of the symbol in the sheet [default: svg-symbol]
        --compressed           whether the output should have whitespace stripped
        --codeIndent=<indent>  must be whitespace [default: "  "]
        --codeType=<type>      must be either "AppKit" or "UIKit" [default: UIKit]
        --output=<dir>         a directory to write converted files to, defaults to
                               current directory if any <file>s are specified
    

    If no files are specified svgsus expects an SVG to be piped in using stdin and the formatted output will be piped to stdout.

    Library

    Svgsus exports a few converters which each take an SVG and (an optional) options object as arguments.

    Example

    A quick example to demonstrate using svgsus as a library. It reads a an SVG file and generates a cleaned version of it.

    const fs = require('fs')
    const svgsus = require('svgsus')
    
    const svg = fs.readFileSync('example.svg', 'utf8')
    const options = {compressed: true}
    svgsus.svg(svg, options).then(cleanedSvg => fs.writeFileSync('example-cleaned.svg'))
    

    API

    svgsus.svg.convert(svg, options={})

    Optimizes an SVG using svgo.

    Options:

    • codeIndent - a string of whitespace to be used for indentation
    • compressed - whether the output should have its whitespace stripped

    svgsus.svgsymbol.convert(svg, options={})

    Generates a SVG symbol in a "Spritesheet". It can then easily be used in HTML documents using svg <use />-tags.

    Options:

    • name - the id of the symbol in the sheet
    • stripStyle - whether to remove any style tags from the SVG so it's stylable using CSS.
    • codeIndent - a string of whitespace to be used for indentation
    • compressed - whether the output should have its whitespace stripped

    svgsus.css.convert(svg, options={})

    Generates CSS class with a background using the SVG as a data-uri.

    Options:

    • codeIndent - a string of whitespace to be used for indentation

    svgsus.pug.convert(svg, options={}) or svgsus.jade(svg, options={})

    Renders the SVG as Pug (formerly known as Jade).

    Available Options:

    • codeIndent - a string of whitespace to be used for indentation

    svgsus.cashapelayer.convert(svg, options={})

    Renders the SVG as Swift code suitable for iOS (UIKit) or macOS (AppKit).

    Available Options:

    • codeIndent - a string of whitespace to be used for indentation
    • codeType - must be either "AppKit" or "UIKit"

    svgsus.uibeziershape.convert(svg, options={})

    Renders the SVG as a single merged UIBezierShape in Swift code suitable for iOS (UIKit) or macOS (AppKit).

    Available Options:

    • codeType - must be either "AppKit" or "UIKit"

    svgsus.vectordrawable.convert(svg, options={})

    Renders the SVG as XML code suitable for Android.

    Available Options:

    • codeIndent - a string of whitespace to be used for indentation

    svgsus.<format>.convertAll(inputs, options={})

    Every format also provides a convertAll()-function which accepts multiple inputs.

    The inputs-argument should be an array of {name, svg}-objects and the output will be an array of {name, code}-objects, for example:

    const inputs = [
      {name: 'trashcan', svg: fs.readFileSync('trashcan.svg', 'utf8')},
      {name: 'star', svg: fs.readFileSync('star.svg', 'utf8')}
    ]
    svgsus.svg.convertAll(inputs)
      .then(outputs =>
        outputs.forEach(({name, code}) =>
          fs.writeFileSync(name, code)
        )
      )
    

    The number of files in the outputs-array depends on the format.

    Currently the swift-based formats, cashapelayer and uibezierpath, generate a single .swift file with each input svg as separate variables.

    And the other formats output one output file per input file.

    The options are the same as the convert()-equivalent.

    Contribute

    Please have a look at our contribution guidelines.

    Credits

    A very special thanks to the all the developers of our beloved dependencies, and to svg2android for providing the inspiration and source of the Vector Drawable converter.

    With ❤️ by Department.

    Keywords

    Install

    npm i svgsus

    Homepage

    www.svgs.us

    DownloadsWeekly Downloads

    7

    Version

    0.23.4

    License

    MIT

    Last publish

    Collaborators

    • slaskis