Possible to make an .svg spritesheet/image sequence?

Like many on the forum I’m interested in creating some animations that result in small file sizes. I’ve got a copy of Moho (formerly ‘Anime Studio’) and it allows you to export vector animations as .svg image sequences. After importing a single frame I think it appears as an uneditable vector graphic in Hype (which is fine). Is there a way to import an .svg image sequence? It didn’t seem to want to do it as a sprite sheet.

Kind regards.

Files available here.

You can probably use TexturePacker to create the sprite sheet.

Hi - looks like a great program but it doesn’t seem to export or import SVGs.
My objective isn’t really making a good sprite sheet. Moho can export PNG (etc) image sequences as well which can be imported as a ‘sprite sheet’ in Hype pretty easily.

I’d like to use the SVG image sequences that Moho can create (with transparent background) and I would like to be able to play these images in sequence somehow in Hype as SVGs. I’ve read about Lottie (etc) but I thought that it would be nice to do it in a simple way and use some software that I’ve already got.

This seems like a great use case for Hype’s built in morphing, but I agree that there’s a number of additional SVG-support blindspots in Hype!

vector.hype.zip (24.8 KB)

Hey thanks for the response. I agree that the example I used would lend itself to the morphing feature.
I was hoping to be able to use Moho’s bone tools and animation rigging system though.

I’m guessing AE/Lottie/Body Movin’ is probably a good solution.

BTW I’ve started reading Sarah Drasner’s book on SVG animation and she describes a way of animating a SVG spreadsheet using CSS. The example she uses can be found on her CodePen. Is this something that could be integrated with Hype?

Hype’s sprite sheet feature is more-or-less the same as how she’s animating in CSS.

Looking at the codepen, the water drop is this SVG image, already arranged in a sheet form:


Hype can import that as a sprite sheet, you will just need to manually setup where the frames are located. Based on the CSS code it appears a setup like this would work:

(the 106 value for the bottom is the svg height of 3955 minus her value of 3848 in code)

Here’s the codeless Hype document:

SpriteSheet.hype.zip (76.2 KB)


Hey that’s great.
So I guess the issue was that the SVGs would not load into the sprite sheet feature as an SVG image sequence - but I just tried it your way it successfully loaded into the feature as a pre-made sprite sheet SVG.

Thanks for the speedy reply :slight_smile:

1 Like

Correct; we don’t properly bring them in when doing a sequence, but if it is a single .svg file meant to be used as a sheet then that will be handled properly.