Skip to main content

Animated pictures

A logo, a picture in a video's content, a presenter badge or a brand's background picture can be an animated SVG, and its animation plays in the finished video. Upload the file to the Media library as you would any picture and use it where you would use a still one. Nothing else needs switching on.

What plays, and how​

An SVG moves in two ways, and Reelwire plays both: animation written inside the file with SVG's own animation elements (animate, animateTransform, animateMotion, set), and animation written with CSS (@keyframes).

Each frame of the video is drawn with the SVG's clock set to that frame's moment in the video. So the animation is smooth, it is the same every time the video is made, and it starts when the picture appears on screen. A logo that spins in over its first second does so at the moment the template shows it.

Everything else is drawn as before. A PNG, JPEG, WebP or GIF, and an SVG that does not move, appear exactly as they always did, so no video you already have changes.

What is left out, and why​

An SVG is a small program, and Reelwire draws it inside the video's page, so it is cleaned first:

  • Scripts and anything that runs code are removed. Animation made by a script inside the file does not play. Use the file's own animation elements or CSS instead.
  • Links to other files and web addresses are removed. A picture inside the SVG must be embedded in it as a PNG, JPEG, WebP or GIF data address, which stays.
  • Frames, embedded pages and sound or video inside the SVG are removed.

If a file cannot be read at all, it is drawn as an ordinary picture, and a still SVG shows as it is.

Where it shows differently​

  • Fitting and focus. A picture in a frame fills it or fits whole inside it, like any picture. Where a template keeps a part of a picture in view when it crops, an SVG's focus is moved in three steps (left, middle, right and top, middle, bottom) rather than continuously.
  • Size. Give the SVG a viewBox, or a width and a height, so it knows its proportions.

Keeping the video quick to make​

How an SVG moves decides how long the video takes to make, much more than how detailed it is. Reelwire makes videos without a graphics card, so a visual effect (a blur, a glow, a drop shadow, a texture made from noise) that sits on something moving has to be drawn again on every frame. A detailed landscape whose effects stay still takes about as long as a plain one; the same landscape with a filter that moves through it can take ten times longer.

  • Slide whole groups. Wrap what moves in a group and animate that group's position, turn or size, rather than a shape that carries a filter.
  • Never animate a filter itself. Do not animate a blur's amount or the settings of a noise filter.
  • Fade with opacity on a group of its own rather than changing a filter.
  • Keep what changes shape apart. Put wings, waves or anything that morphs in a group of its own, so its changes do not make the picture under it be drawn again.
  • Loop without a seam. If the animation repeats, make it end exactly where it starts, so a video never catches the moment it starts over.