Animated Logo with artefacts/steps

Forum|Forum|3 years ago
April 17, 2022
3 replies
385 views

Hello guys,

I'm creating a new homepage and I want to have my vector-logo (*.svg) to be animated at some time.

The static image of my logo is sharp and crisp when I convert it to PNG and upload it to wordpress.

The animated logo instead (*.gif) shows some artefacts/steps on the sharp edges when uploading it. We already tried it in different pixelsizes, but didnt help either.

Can you help out what we doing wrong, or do you know an other solution? Im really frustrated. Is it an export problem?

Thats my homepage:

https://bavariandronedude.com/lol1/

left is the GIF, right is the static picture.

Hope you can help me out.

This topic has been closed for replies.

Mylenium

Legend

Wordpress accepts SVGs as regular images. HTML canvas objects can only be inserted via the Blocks editor or by messing around with the source code in a template. If you don't have full control over your WP install, the latter may not be an option, since many hosted sites don't allow full admin access. That aside you have a general misunderstanding. Even a two-color pixel image technically never has only two colors when it uses antialaising. The smooth curves and such produce inbetween steps and gradations in the color and need to be accounted for. That's why even a GIF like yours would and should effectively be saved with 16 or 32 color at least. 256 would of course be excessive, but wouldn't be an issue, since RLE compression as used by GIFs in this case doesn't bloat the file size. It's sort of self-optimizing due to the math.

Mylenium

B

Bastian5E0FAuthor

Known Participant

Thanks again for the answer.

Am i something misunderstanding? A *.svg-File can NOT be annimated - at least I always thought that? You mean, we should export it as an animated *.svg-file?

Mylenium

Legend

As already pointed out by Mohammad, this is a limitation in the file format since it technically can only have exactly one transparent color. That and of course AE not being great at even outputting GIFs. If at all, you may want to reconsider your strategy and export a regular clip or imagte sequence from AE and optimize it in Photoshop or one of the gazillion online GIF converters. Otherwise you may have to create an animated SVG and export it with Bodymovin'/ Lottie from AE or create it in Animate in the first place. Certainly your logo isn't impossible to create in a pristine quality, but you need to change your workflow.

Mylenium

B

Bastian5E0FAuthor

Known Participant

Hey you both.

thanks for the comment. But I even dont need 256 colors - it has exactly 2 colors. transparent and white/black. 😉 If you took a look at the Homepage, the logo itself is very simple.

Do you guys know whether i can upload a lottie file (or sth else) into wordpress and keep the sharp edges? It is really necessary.