Export to animated SVG

Feature Requests
1

  1. What do you want to see in Hype?
    I would like to see hype export movies to animated SVG

  2. Have you found a workaround for this problem? use Keyshape.

  3. Are there examples of other apps with this feature? Or, have you seen examples of this elsewhere on the web? (Please include a URL)

  4. How high of a priority is this for you?

[ ] Nice to Have
[ 1 ] Important
[ ] Can't use Hype without it

2 Likes
2

That would be awesome!

3

Thanks for the request!

I'm curious where you plan to place the SVG (as in, if there are contexts where only a .svg will work, but html code wouldn't?).

4

Probably not, but there are contexts where svg may be easier to use than html, as someone who is not interested in coding, and uses a wsiwig web site generator.
I have used hype for a number of years to replace flash, because of its nice interface, but I guess ‘key shape’ does much the same thing but will output to svg, which suites me.

1 Like
5

Yes please! I make a lot of flow diagrams with animated dashed lines. A front end gui would be awesome.

7

I am looking for a method to put svg animation Logo into header of wordpress site.

8

Wouldn't HTML work there too?

9

Hi Jonathan,

No, there is no way to set Html to wordpress Logo.

Wordpress support image logo including SVG format, and here is example:

Basic Animations.zip (13.0 KB)

I upload it my wordpress site at https://cdn.lovcour.com/cdn/2025/04/basic-animations.svg

You might note the animation work independently, but the animation will not work if I set it as logo:

微信图片_20250416100210
微信图片_20250416100210561×736 25.3 KB

So, I just suppose the animiation will work if it is SVG Code format?

微信图片_20250416094039
微信图片_20250416094039522×571 15.8 KB

But, how can we export the Hype project as SVG format please?

Thanks

1 Like
10

Ah, interesting. Thanks for clarifying.

(I would also assume you could override this in your wordpress theme with some more work)

Anyhow, there's not a way for Hype to export SVG, as its output uses HTML as the rendering engine. You could do an animated GIF, but that would probably be the only image format to go there.

11

Thanks.

The following code snippet support overwrite the wordpress default logo:

add_action('wp_head', 'replace_header_logo_with_animated');
function replace_header_logo_with_animated() {
    // 1. hide wordpress default Logo
    echo '<style>.header-logo > a img, .header-logo > a svg { display:none !important; }</style>';
    
    // 2. output SVG logo（copy and paste svg code）
    echo '<div class="header-logo">';
    echo '<a href="'.esc_url(home_url('/')).'">';
    echo '<!-- copy and paste svg code（include animation tags） -->';
    echo '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
            <path fill="#FF0000">
              <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
            </path>
          </svg>';
    echo '</a></div>';
}

However, anyway to convert Hype project to be SVG code please?

Thanks

12

You could try this instead of the SVG part in your PHP code:

echo '<div class="hype-wrapper" style="width: 200px; height: 50px;">';
echo do_shortcode('[hype_animation id="example"]');
echo '</div>';

Just replace example with the actual Hype animation ID.

I haven’t tested it myself, but it should work in theory.

Just a hint for your own research … I’m not offering support here, but maybe you can build a solution from this on your own.

13

Thanks.

@jonathan

Anyway, it would be great if Hype support output or export SMIL SVG.

it's a way to animate SVG directly inside the .svg file using special tags like:

  • <animate>
  • <animateTransform>
  • <animateMotion>

These tags define how SVG elements move or change over time, like color, position, scale, rotation — all without JavaScript or external CSS.

Difference from Other Animation Methods:

Animation Type Animation Location Needs JS/CSS? Portable SVG? Common Use
SMIL (Pure SVG) Inside <svg> file :x: No :white_check_mark: Yes Logo, icons
CSS-based <style> tag or external CSS :x:/:white_check_mark: :white_check_mark: Yes Text effects, hover
JavaScript (Snap.svg, GSAP) Separate JS file :white_check_mark: Yes :x: No (depends on JS) Interactive animations
Lottie JSON + JS :white_check_mark: Yes :x: No Mobile UI, apps
Adobe Animate export Separate JS runtime :white_check_mark: Yes :x: No Rich web banners, games
1 Like