https://github.com/math2001/live-svg
View your SVGs in the browser, and get them updated as soon as you save!
https://github.com/math2001/live-svg
live-preview svg
Last synced: about 1 year ago
JSON representation
View your SVGs in the browser, and get them updated as soon as you save!
- Host: GitHub
- URL: https://github.com/math2001/live-svg
- Owner: math2001
- License: mit
- Created: 2017-09-17T08:17:34.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-26T06:22:46.000Z (almost 9 years ago)
- Last Synced: 2025-04-23T08:08:33.664Z (about 1 year ago)
- Topics: live-preview, svg
- Language: JavaScript
- Homepage:
- Size: 266 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `live-svg`
`live-svg` is a simple script that will run a server to serve `.svg` files and
update them live as soon as you save.
It doesn't reload the entire page, it just updates the svg codes in the browser.
## Installation
```
$ npm install -g live-svg
```
Or
```
$ yarn global add live-svg
```
## Demo
The editor is VIM on wsltty. To increase/decrease numbers in VIM, just press
ctrl+a and ctrl+x.
## Usage
Start `live-svg` by just running it from your favorite terminal.
Open your browser at followed by the
relative path to the svg(s) you want to preview.
```
- root
- subdirectory
- mysvg.svg
```
So, if you run `live-svg` from root, you'll need to open
It'll automatically watch the files that are open, and reload them as soon as you
save.
It makes learning to write SVG by hand or simply editing one much easier.
There are different options:
#### `--port `
The port to run the server on. By default it's `6336`, because 336 because it's
the sum of the ASCII values of each letter in `svg`, and an extra 6 at the start
because [palindromes number][] are cool :smile:
#### `--cwd`
By default, it's the where you currently are. But, using the previous example, if
you ran: `live-svg --cwd subdirectory/`, you would've had to open
#### `--auto-exit`
Automatically exit as soon as every tab previewing svgs on the server created by
live-svg in every browser.
Basically, if you close the last svg in the browser, this program will exit.
#### The rest?
Every other arguments will be considered as file names, and will automatically be
open in the browser by default.
### Absolute live
If you want to get browser be updated as soon as you make one modification, that
means you have to *save* as soon as you make one modification.
Therefore, it depends on your editors, but it shouldn't be too hard.
#### Sublime Text
Just use the plugin [auto-save](https://packagecontrol.io/packages/auto-save).
#### Vim
```vim
:autocmd TextChanged,TextChangedI write
```
I recommend you bind it to a shortcut, for example
```vim
nnoremap l :autocmd TextChanged,TextChangedI write
```
(feel free to contribute to add your favorite editor)
[Palindromes number]: https://en.wikipedia.org/wiki/Palindromic_number