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:
left is the GIF, right is the static picture.
Hope you can help me out.
Due to Gif limitations, you will never get a sharp reslut with GIF as it supports only 256 colors
oh well, thanks. thanks for providing a solution ;).....
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.
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.
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.
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?
We tried an animated, but the logo itself "BDD" is not rendering when genarating an animated svg...