FrameSVG Examples

These examples demonstrate the conversion of animated GIFs (left) to animated SVGs (right) using FrameSVG. Observe the scalability of the SVG output. SVGs, unlike GIFs, support network compression, often resulting in smaller file sizes for network transfer.

Coding Examples

Animated GIF showing code being written on Git

Original GIF (Loading...)

Animated SVG showing code being written on Git

Converted SVG (Loading...)

Animated GIF showing code being written on Github

Original GIF (Loading...)

Animated SVG showing code being written on Github

Converted SVG (Loading...)

Animated GIF showing code being written on VSCode

Original GIF (Loading...)

Animated SVG showing code being written on VSCode

Converted SVG (Loading...)

Animated GIF showing code being written on Sublime

Original GIF (Loading...)

Animated SVG showing code being written on Sublime

Converted SVG (Loading...)

More Examples

Animated GIF of Good Morning greeting

Original GIF (Loading...)

Animated SVG of Good Morning greeting

Converted SVG (Loading...)

Animated GIF of a loading icon

Original GIF (Loading...)

Animated SVG of a loading icon

Converted SVG (Loading...)

Animated GIF of hands doing a voila gesture

Original GIF (Loading...)

Animated SVG of hands doing a voila gesture

Converted SVG (Loading...)

Complex Examples (Transparent Backgrounds)

These examples use the binary color mode, where bright colors become transparent. They will appear best on light backgrounds.

Animated GIF of a black and white loop pattern

Original GIF (Loading...)

Animated SVG of a black and white loop pattern

Converted SVG (Loading...)

Animated GIF of another black and white loop pattern

Original GIF (Loading...)

Animated SVG of another black and white loop pattern

Converted SVG (Loading...)