https://github.com/terotests/evg
Elastic View Graphics
https://github.com/terotests/evg
javascript node pdf svg xml
Last synced: 4 months ago
JSON representation
Elastic View Graphics
- Host: GitHub
- URL: https://github.com/terotests/evg
- Owner: terotests
- Created: 2018-05-19T14:35:01.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2025-12-13T00:13:28.000Z (7 months ago)
- Last Synced: 2025-12-26T22:53:17.414Z (6 months ago)
- Topics: javascript, node, pdf, svg, xml
- Language: TypeScript
- Size: 7.27 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# EVG
Layout engine to create vector graphics (like PDF) using JavaScript and XML based declarative markup.
```s
npm i -g evg
```
Example of markup:
```html
Here is your personal QR code
```
See `hello.xml` and `hello.pdf` to get started quickly.
The engine supports following commands (and more):
- `div`, `img` and `path` for common layout elements
- `color`, `background-color`, `border-color`, `opacity`
- `border-width`, `border-radius`
- basic `padding`, `margin`, `margin-top` etc. supported
- units `px`, `%` (%of available width) or `hp` (% of height)
- width, height as `50%` or `50` or `50px`, `
- text can be added like `
Hello World`
- `font-size`, `font-family` can be used to specify TTF fonts used (or `fonts/` dir for CLI)
- horizontal align `align=center`, `align=left`, `align=right`
- absolute positioning `top` and `left`, `bottom`, `right`
- flag `overflow="hidden"` for View and Path elements
Extra features include:
- support for QR codes using ``
- `page-break` to change pages
- `footer` and `header` to specify page header and footer
- `` to declare re-usable components
- `id="content"` to hold component contents
- `` elements which can contain SVG path are scaled automatically to fit viewport
## Command line
Running from command line
```
evg hello.xml hello.pdf
```
Subdirectories:
- `fonts/` can include TTF files
- `components/` can include XML components which are used in the file.
Components can use `id="content"` to indicate place for child nodes.
The .git reposity has example directory `testfiles/` where is example XML file.
## Using as library
Elastic View Graphics
```javascript
import {EVG} from 'evg'
// you have to install some fonts...
EVG.installFont('candal', '../evg/fonts/Candal/Candal.ttf')
// create a text element component....
EVG.installComponent('t', ``)
// create node and render it to PDF
const node = new EVG(`
`)
EVG.renderToFile('./out.pdf', 600,800, node)
// or render to stream
const fs = require('fs')
EVG.renderToStream(fs.createWriteStream('fileName.pdf'), 600,800, node)
```
## Creating own components using inline XML
You can define own components, which receive the child elements under a certain tag.
To define your own custom `
Hello
` component as inline XML like this
```html
```
The `id="content"` marks the spot where component children are to be inserted.
## License
MIT