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.
Table of contents
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.