@avocode/svg-exporter v1.2.33
SVG Exporter
Install
npm install @avocode/svg-exporter
Features
Based on Octopus 2.0 format, SVG Exporter currently is able to process the following features:
- Bitmap layers
- Group layers
- Shape layers
- Text layers experimental support
SVG Exporter also supports the following effects:
- Drop shadow
- Color fill
- Gradient fill (including linear and radial)
- Inner shadow
- Strokes (including inside, outside and centered)
Usage
Just import SVGExporter function from the index.js
:
import SVGExporter from 'svg-exporter'
Then run this function with the following arguments:
SVGExporter(octopusLayers, options)
The first argument (octopusLayers
) describes an array of Octopus 2.0 layer objects. Next argument (options
) is an object containing all the global options of the SVG Exporter. At the current moment there aren't many options, but it's designed to be able to setup the process of converting with options.
Currently supported options:
bitmaps
- describes an object where key isid
of bitmap layer and value isHTMLImageElement
,Image
,HTMLCanvasElement
orCanvas
object.postprocess
- describes an object where key is name of SVG postprocessor (check list of postprocessors below) and value is object representing arguments of postprocessor. Current version of SVG Exporter doesn't have any postprocessors requiring arguments, so, it's okay to set the value ofundefined
for every postprocessor.env
- the object specifies some environment descriptors, like Raven instance and so on. Passing Raven instance is possible throughoptions.env.Raven
property.scale
- by default1
, the scale of the result SVG document.blendings
- iftrue
, then result SVG document will containmix-blend-mode
property on different kind of layers and effects. It's not enabled by default because blending modes aren't as exact and consistent in browser (usingmix-blend-mode
style property) as Sketch or PS.
Postprocessors list. All of the following are enabled by default. If there is postprocess
key in the options of SVG Exporter, then only postprocessors listed in these options will be used.
set-image-xlink
- required to modify SVG output of SVGJS to make it correctly support imagesremove-svgjs-helpers
- removes useless trash generated by SVGJS (happens only sometimes)remove-svgjs-ids-prefixes
- removesSVGJS
prefixes of elements' idsreplace-xmlns
- replaces:svgjs
xml namespace with:avocode
namespaceshape-detect
- attempts to replace<path>
elements of known shapes, such as rectangles with more semantic-friendly elements such as<rect>
; currently supports only detection of rectangle
Internals
The structure of the package is divided to three processing phases:
1. octopus-preprocess
2. octopus-process
3. svg-postprocess
Octopus-preprocess
The directory ./octopus-preprocess/
contains preprocessors and its manager (./octopus-preprocess/index.js
). Preprocessors are used to modify and prepare input layers before SVG creation. Preprocessors doesn't depend on options of SVG Exporter. Order of preprocessors and the list of currently used ones is available at preprocessors manager (./octopus-preprocess/index.js
). At the moment, the only one preprocessor is used - remove-blank-layers
(it removes blank layers from input).
Octopus-process
The directory ./octopus-process/
contains all the core features of the SVG Exporter, like layer processing, effects processing and its configuration. Layers processors are separated by the layer type of Octopus 2.0 and are located at:
./octopus-process/process-layer/process-layer-bitmap/
./octopus-process/process-layer/process-layer-group/
./octopus-process/process-layer/process-layer-shape/
./octopus-process/process-layer/process-layer-text/
Effects are divided by groups. Groups are necessary for order of effects processing. The configuration of effects processing is located at ./octopus-process/config/effects-processing.js
. The file contains object effectsMap
describing groups of effects and responsible functions. Furthermore, effectsGroupsByLayer
object represents map of effects related to the layer types and its order. Order of effects processing is set by the order of elements in array groups
of each layer type and the key targetIndex
which value describes the index of the target element (for example, shape). So, there are the following groups of effects:
./octopus-process/process-effects/process-effectgroup-drop-shadow
./octopus-process/process-effects/process-effectgroup-fills
./octopus-process/process-effects/process-effectgroup-inner-shadow
./octopus-process/process-effects/process-effectgroup-stroke
Each of these groups contains group processor (index.js
) and files responsible for every single effect of a group.
Svg-postprocess
The directory ./svg-postprocess/
contains postprocessors of the SVG document (as a string) and its manager (./svg-postprocess/index.js
). Postprocessors can be set up by options' value postprocess
.
Error reporting
Error are sent to the Sentry server, it's enough to run exporter with proper environment flag in Node:
SENTRY_DSN=https://sentry-dsn-here/ node anything.js
or pass Raven instance through options.env.Raven
Tests
npm run test
- lint & unit testsnpm run test-only
- only unit tests
Notes
Since SVG Exporter uses SVG.js as dependency, it modifies global object (both browser's window and node's global).
Dependencies
package.json fragment:
"jsdom": "^10.1.0", // for tests only
"lodash": "^4.13.1", // used everywhere
"canvas": "^1.6.5", // when using on node, polyfill for window.Canvas
"paper": "^0.10.3", // mainly for computing shape's paths
"raven": "^1.2.1", // error reporting
"svg.js": "^2.5.1", // the SVG document assembler
"svg.filter.js": "^2.0.2", // SVG document filters
"svgdom": "^0.0.6" // when using on node, polyfill for DOM
Environment
SVG Exporter can work in both browser and node.js environments.
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago