SVGSketch Learn

How to Convert SVG to MP4 or WebM Video

Turn SVG keyframes into a real video file, encoded locally, with the codec and bitrate you choose.

Open SVGSketch

Quick answer

Open the animated SVG in SVGSketch, open the Export panel (Ctrl+Shift+E), choose MP4 or WebM from the Video group of the Format dropdown, set the Codec, Bitrate or Quality preset and the Frame Rate, and click Download. Video export is part of SVGSketch Pro and runs entirely in your browser.

Steps at a glance

  1. Open the animated SVG

    Drag the .svg onto SVGSketch or use File > Open... (Ctrl+O); add keyframes on the Animation panel if the drawing is still.

  2. Choose MP4 or WebM

    In the Export panel (Ctrl+Shift+E), pick MP4 or WebM under Video in the Format dropdown.

  3. Set codec and quality

    Choose the Codec and a Quality preset, or set the Bitrate directly, in the Video section.

  4. Set frame rate

    Set Frame Rate and Duration in the Animation section; enable alpha for a transparent WebM.

  5. Download

    Click Download; the video is encoded locally in the browser.

Step 1: Open an animated SVG

Drag the .svg onto app.svgsketch.com or use File > Open... (Ctrl+O). If the file carries SMIL or CSS animation, the editor turns it into keyframes on the Animation panel; if it is still, add keyframes there first, as described in how to animate SVG. A video is only as long as the timeline it is rendered from.

Step 2: Choose MP4 or WebM

Open the Export panel (Ctrl+Shift+E) and pick MP4 or WebM under Video in the "Format" dropdown. MP4 is the safe choice for social platforms, slide decks and phones; WebM is smaller for the same quality and is the one to pick when you need a transparent background, since its VP9 codec carries an alpha channel.

Step 3: Set codec, bitrate and quality

The item's settings have a "Video" section with "Codec", "Bitrate" and a "Quality preset" from "Very low" to "Very high". The presets choose a bitrate for the frame size; set "Bitrate" yourself when a platform publishes a target. If the drawing contains video shapes, the exporter reads their frame rate and bitrate and offers to match them, so an embedded clip is not re-encoded to a worse setting than it arrived with.

A codec the current browser cannot encode is marked as unavailable; pick another rather than switching browsers.

Step 4: Set the frame rate and, if you need it, alpha

The "Animation" section sets "Frame Rate" and "Duration". 30 frames per second suits most motion graphics; 60 is worth it for fast easing. "Transparent background (alpha)" appears for codecs that support it and keeps the canvas background out of the file, so the video composites over whatever sits behind it.

Step 5: Download

Click Download. Every frame is rendered from the vector source and encoded in your browser, so the output is as sharp as the frame size you chose and the file never touches a server. Keep the SVG (File > Save, Ctrl+S) to re-render at another size or frame rate later.

FAQ

Which format should I choose, MP4 or WebM?

MP4 plays everywhere, including phones and slide software. WebM is smaller at the same quality and can carry a transparent background. When in doubt, export both; each is one more export item.

Can the video have a transparent background?

Yes, with a codec that supports alpha. Choose WebM, enable "Transparent background (alpha)" in the Video section, and the canvas background stays out of the file.

Does the SVG get uploaded?

No. Rendering and encoding happen in your browser, and the file is saved straight to your computer.

Do I need Pro?

Video export is part of SVGSketch Pro, which starts with a 14-day free trial. Animated SVG export and GIF export are Pro as well; SVG and PNG export are free.

Open your SVG in SVGSketch

Start with a blank canvas, import an SVG, or use the editor as a conversion and cleanup step.

Open SVGSketch