# Animate Order

Create animated SVG preview file and show it in browser. Helps to quickly evaluate line order for cutting processes. Only applies for the complete Inkscape document.

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://videos.stadtfabrikanten.org/videos/embed/cb6ab83b-e598-4038-9434-8269357bdf95?loop=1&autoplay=1" width="560"></iframe>

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://videos.stadtfabrikanten.org/videos/embed/6768c45a-1c39-4fd9-a016-e6b0d140dc37?loop=1&autoplay=1" width="560"></iframe>

## Tips

- Do **not** use "-inkscape-stroke:hairline" attribute for your paths. It will not render. Your page might be blank!
- If multiple paths are animated simultaneously, break apart paths into sub paths. **Each sub path will start a new animation in parallel.**
- **start your browser indepently from Inkscape before running this extension**. Each call we open a new browser tab then. If your browser is closed initially, the Inkscape extension will call a new process window, but Inkscape is blocked until browser is closed again.

## Config / Troubleshooting

### Browser in path

Select your desired browser (must be installed and must exist in %PATH% variable). If this is not the case, configure it:

**Windows (Systemsteuerung\\Alle Systemsteuerungselemente\\System → Umgebungsvariablen)**

### Firefox adjustments

If SVG does not animate, check if file access is enabled

Visit **about:config** → set "**privacy.file\_unique\_origin**" to "**false**"

### Still no animation?

- break apart paths to sub paths
- Raise duration time to larger value

## More Info

- [https://github.com/maxwellito/vivus](https://github.com/maxwellito/vivus)
- [https://github.com/maxwellito/vivus-instant](https://github.com/maxwellito/vivus-instant)
- h[ttp://maxwellito.github.io/vivus](http://maxwellito.github.io/vivus/)
- [https://maxwellito.github.io/vivus-instan](https://maxwellito.github.io/vivus-instant/)t

See also [Line Animator](https://wiki.stadtfabrikanten.org/books/fablab-chemnitz/page/line-animator "Line Animator")

```
C:\Program Files\Mozilla Firefox\
```

## Convert animated SVG to Videos/GIFs

There are a lot of tools on the net but most do not work properly. Best is to use a screen capturing tool like [https://wiki.ubuntuusers.de/Kazam](https://wiki.ubuntuusers.de/Kazam/) to capture. This video can be converted to animated gif afterwards.

Install Kazam on Fedora:

```bash
sudo dnf install keybinder
sudo dnf install python3-xlib
wget https://raw.githubusercontent.com/rpmsphere/noarch/master/k/kazam-1.5.3-1.1.noarch.rpm
sudo rpm -Uvh kazam-1.5.3-1.1.noarch.rpm
```

<div class="code panel pdl conf-macro output-block" data-hasbody="true" data-macro-name="code" id="bkmrk--1" style="border-width: 1px;"><div class="codeContent panelContent pdl"><div><div class="syntaxhighlighter sh-confluence nogutter  java" id="bkmrk--2"></div></div></div></div>Install Kazam on Ubuntu:

```bash
sudo apt install kazam
```