SnipSVG 2 adds a number of new elements that significantly expand its capabilities. You can now create dynamic, animated SVG-based images and icons with links and even video content. In addition to this, your images will be just a fraction of the size of comparable formats like GIF or video. This is because they do everything with simple CSS3 — no additional player, no video, just a tiny plain text SVG file and a couple of lines of CSS.

Animation goes wild

Animate anything, including imported SVG icons and images

The new animation controls can be applied to all the elements in your SnipSVG pictures. Anything that you create or use can be animated. But that's not all: You can also import static SVG icons and create animated versions of them.

Use animated elements         as triggers for other elements

In addition to animating individual SnipSVG elements, you can also apply an animation to one element to trigger an animation in another element. For example, an animated switch icon could show or hide a picture inside your image.

New elements

Animated elements and icons

You can now animate anything and everything in your SnipSVG images, including other imported SVG images. Among other things, this means you can create your own tiny animated SVG icons and use them anywhere where SVG is supported. See the Animations & Interactivity chapter for full details.

Web frames for video and more

In addition to animation, SnipSVG now also supports the inclusion of YouTube or Vimeo video and additional web content in your images. See Video & Web Frames.

Tables

If you've ever wanted to include tabular data in images, now you can. See Text & Tables.

Curved text

Why should text always follow a straight line? With SnipSVG, text can be as curvy as you like. Not something you want to use all the time, but now and again it can be pretty cool. See Text & Tables.

New element properties

Link target: Lightbox

SnipSVG has always been able to create links to external objects, but now you can display them in a "lightbox" inside the image. This technology allows you to display any web pages in a lightbox within the image. It is also used for the new YouTube and Vimeo video capabilities.

Cursor style for each element

When you add link capabilities to elements you can now also define the mouse cursor that is displayed when the mouse pointer is over the element.

Display: None

You can now make elements hidden by default so that you can then make them appear as part of your animations.