https://github.com/ephread/sophisticate
Sophisticate SVG editors outputs to display them within interactive web pages.
https://github.com/ephread/sophisticate
converter preprocessor svg transformer
Last synced: 8 months ago
JSON representation
Sophisticate SVG editors outputs to display them within interactive web pages.
- Host: GitHub
- URL: https://github.com/ephread/sophisticate
- Owner: ephread
- License: mit
- Created: 2017-03-20T15:28:51.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-07-16T22:54:41.000Z (almost 6 years ago)
- Last Synced: 2025-10-11T20:16:40.323Z (8 months ago)
- Topics: converter, preprocessor, svg, transformer
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/sophisticate
- Size: 332 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 
[](https://travis-ci.org/ephread/sophisticate)
[](https://codebeat.co/projects/github-com-ephread-sophisticate-master)
[](https://codecov.io/gh/sophisticate)
[](https://www.npmjs.com/package/sophisticate)
[](https://packagephobia.now.sh/result?p=sophisticate)
[](https://david-dm.org/ephread/sophisticate)
[](https://github.com/ephread/sophisticate/blob/master/LICENSE)
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 without notice.**
## Table of contents
* [Installation](#installation)
* [Usage](#usage)
* [Configuration file](#configuration-file)
* [Sophistication rules](#sophistication-rules)
* [SVGO](#svgo)
* [License](#license)
## Getting started
### Install
Install the package from [npm].
```shell
$ npm install -g sophisticate
```
[npm]: https://npmjs.com/release
## 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 `` to sophisticate `` and output the result in ``.
```shell
$ sophisticate svg -o [-c ] ...
```
### `html`
Use the rules defined in `` to sophisticate `` and output a generated HTML file based on `` in ``. Optionally,
specifying the `-s` flag will process and merge together all specified `` according to ``.
```shell
$ sophisticate html -o [-c ] \
[-t ] [-s []] ...
```
When using the `-s` flag, make sure you provide a template expecting an array of SVGs. See [`examples/template-multiple.ejs`]
[`examples/template-multiple.ejs`]: https://github.com/ephread/Sophisticate/blob/master/examples/template-multiple.ejs
### `match`
Test the configuration specified by `` against the given ``. This command is useful to debug XPath queries.
```shell
$ sophisticate match -c
```
## 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/`].
[`example/`]: https://github.com/ephread/Sophisticate/blob/master/examples/sophisticate-world-map.yml
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 ``.
```yaml
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,
```xml
```
will become :
```xml
```
#### `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 ``.
```yaml
- 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 ``
```yaml
- xpath: "//xmlns:g[@id = 'tuxedo']"
rules:
- type: renameAttribute
attributes:
- id: class
```
The following tag,
```xml
```
will become :
```xml
```
#### `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 ``
```yaml
- xpath: "//xmlns:g[@id = 'tuxedo']"
rules:
- type: copyAttribute
attributes:
- id: class
```
The following tag,
```xml
```
will become :
```xml
```
#### `removeTag`
Remove all tags matching the specified XPath query.
For instance, the following rule will remove any tag having `class="patchedShirt"`.
```yaml
- 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.
[default configuration]: https://github.com/ephread/Sophisticate/blob/master/config/svgo.yml
## License
Instructions is released under the MIT license. See LICENSE for details.