Sophisticate the SVG outputs of vector graphic editors.

Outputs from vector graphic editor can be messy and require significant hand-made changes to become animatable and interactive. Sophisticate automates these changes.

⚠️ Until Sophisticate reaches 1.0.0, the configuration file syntax and the command line interface may change.

Table of contents

• Installation
• Usage
• Configuration file
  • Sophistication rules
  • SVGO
• License

Getting started

Install

Install the package from npm.

$ npm install -g sophisticate

Usage

The utility bundles three commands. The config file argument is always optional. If omitted, Sophisticate will look for a file named .sophisticate.yml in the current directory.

svg

Use the rules defined in <config-file> to sophisticate <svg> and output the result in <output-directory>.

$ sophisticate svg -o <output-directory> [-c <config-file>] <svg>...

html

Use the rules defined in <config-file> to sophisticate <svg> and output a generated HTML file based on <template> in <output-directory>. Optionally, specifying the -s flag will process and merge together all specified <svg> according to <template>.

$ sophisticate html -o <output-directory> [-c <config-file>] \
                    [-t <template>] [-s [<base-name>]] <svg>...

When using the -s flag, make sure you provide a template expecting an array of SVGs. See examples/template-multiple.ejs

match

Test the configuration specified by <config-file> against the given <svg>. This command is useful to debug XPath queries.

$ sophisticate match -c <config-file> <svg>

Configuration File

The configuration file is an array of rulesets, with each rulesets defining rules to apply on nodes matching the provided XPath queries. The file is YAML-based. and an example can be found in example/.

Since each ruleset is applied on the previously sophisticated document, the order in which you define the rulesets is important.

Each ruleset contains a single XPath query.

Sophistication rules

For each ruleset, you can specify one or more rules to apply on the given XPath query. Similarly, rules are applied one after another, on the transformed output. The order in which you define the rules is important.

addAttribute

Add an attribute to the given nodes matching the specified XPath query.

For instance, the following rule will add the class="outfit" and data-wool="super150s" to all <g id="tuxedo"></g>.

sophisticate:
  - xpath: "//xmlns:g[@id = 'tuxedo']"
    rules:
      - type: addAttribute
        append: true
        attributes:
          - class: outfit
          - "data-wool": super150s

The append parameter is optional; when set to true, the specified value of the attribute will be appended to pre-existing ones, rather than replace them altogether.

For instance,

<g id="tuxedo" class="sophisticated"></g>

will become :

<g id="tuxedo"
   class="sophisticated outfit"
   data-wool="super150s"></g>

removeAttribute

Remove an attribute from the given nodes matching the specified XPath query.

For instance, the following rule will remove the style attribute from all <g id="tuxedo"></g>.

- xpath: "//xmlns:*[@style]"
  rules:
    - type: removeAttribute
      attributes:
        - style

renameAttribute

Rename an attribute from the given nodes matching the specified XPath query.

For instance, the following rule will rename the id attribute to the class attribute, while keeping the value, for all <g id="tuxedo"></g>

- xpath: "//xmlns:g[@id = 'tuxedo']"
  rules:
    - type: renameAttribute
      attributes:
        - id: class

The following tag,

<g id="tuxedo"></g>

will become :

<g class="tuxedo"></g>

copyAttribute

Copy an attribute from the given nodes matching the specified XPath query.

For instance, the following rule will copy the id attribute into the class attribute, for all <g id="tuxedo"></g>

- xpath: "//xmlns:g[@id = 'tuxedo']"
  rules:
    - type: copyAttribute
      attributes:
        - id: class

The following tag,

<g id="tuxedo"></g>

will become :

<g id="tuxedo" class="tuxedo"></g>

removeTag

Remove all tags matching the specified XPath query.

For instance, the following rule will remove any tag having class="patchedShirt".

- xpath: "//xmlns:*[@class = 'patchedShirt']"
  rules:
    - type: removeTag

SVGO

In addition to the transformations, sophisticate will run the output through SVGO.

You can configure the rules used by SVGO by adding them under the optional svgo: item in your configuration file. If svgo: is not specified, the default configuration will be used.

License

Instructions is released under the MIT license. See LICENSE for details.