• Animated SVG vs GIF [CAGEMATCH]
  • The Nuggets translation Project
  • Translator: Yusheng
  • Proofread by: Ychow

SVG is not just for displaying still images; the ability to render animations is just one of its powerful features compared to other image formats. This is one of the many reasons SVG is superior to other bitmap formats, including GIF. Of course, this advantage only applies to applications suitable for SVG, such as:

  • Logo,
  • Uncomplicated vector diagrams,
  • UI components,
  • Information chart,
  • Icon.

Of course, if your images are better suited to bitmap format — such as photos or very complex vector graphics (which often results in very large SVG files), then you should still use bitmaps. Not only should images be considered in SVG format, but also if SVG is appropriate for the current image. For example, if the image size is smaller in PNG format, then you should use PNG format, depending on the version, the resolution can be controlled by the SRCset attribute, or find another reasonable solution depending on the work goal.

Not only should images be considered in SVG format, but also if SVG is appropriate for the current image.

In general, the images listed above are suitable for SVG format. If you want to animate them, it makes sense to modify the SVG code to animate them.

Last week, however, a link to a dynamic icon showing some GIFs appeared on my Twitter timeline.

My first thought when I looked at these ICONS was that they were perfectly suited to render in SVG and should be rendered in SVG instead of GIF.

The SVG format can indeed replace the GIF format in many places, just as it can replace other bitmap formats in the application scenarios mentioned above. SVG’s ability to animate gives it such advantages and capabilities, and it’s not just about making animated ICONS.

Here’s why I think you should use SVG instead of GIF whenever possible.

Image quality

Not surprisingly, SVG’s first advantage over GIF (or any other image format) is also the primary feature of SVG: resolution independence. SVG images look sharp on any screen resolution, no matter how much you zoom in. Bitmap formats like GIF do not. Try zooming in on a page with a GIF image and you can see that the GIF becomes pixelated and the content becomes blurred.

For example, the following GIF from recording an SVG animation looks fine at a smaller size:

A GIF recording of the SVG Motion Trails demo by Chris Gannon.

Enlarging the page a few times will cause the image to become pixelated and the edges and curves of the inner elements to appear jagged, as in this image below:

However, when you view an SVG demo and zoom in on the page, the content of an SVG image remains clear no matter how many times you zoom in.

To render a sharp bitmap image, such as a GIF, on a high-resolution monitor, you need to enlarge the image with the SRCset property, depending on the context.

Of course, the higher the resolution of the image, the larger the image file. As we’ll see in a moment, file sizes can get surprisingly large if you use THE GIF format. In addition, rendering small sizes in high-resolution GIFs on mobile phones can hurt page performance. Don’t do that.

When you create animated GIFs, ICONS or images are fixed in size, and page zooming or size changes can cause pixelation. SVG is free in size and fixed in sharpness. You can create a small SVG and zoom in arbitrarily without losing sharpness.

Conclusion:

GIF Animated SVG
GIF, like other image formats, cannot be adapted to a variety of resolutions, and pixelation can occur when magnified or on high-resolution monitors. SVG is scalable and self-adaptive, rendering cleanly on screens of any resolution.

Color and transparency

Transparency is probably the number one thing that destroys the GIF market, especially if the image is on a colored background.

This is the most likely problem when using GIF ICONS (animated or not), as the background is usually transparent.

Take the circle with stroke on the transparent background below, in SVG format on the left and GIF format on the right. You can immediately see the problem by looking at the image below: the circles in the GIF have grayed edges outside the stroke.



If you’re not reading this in a browser, you may not be able to see it above, but here’s a screenshot (right, GIF in question) :

This is because transparency in GIF images is achieved through binarization. This means that each pixel can only be on or off: either completely transparent or completely opaque. This means that there is no excessive smoothing between the foreground and background colors in the image, resulting in such edge artifacts, often called jagged, due to inadequate sampling frequency.

When a line is not perfectly straight, it causes some pixels (near the edge) to be partly transparent and partly opaque, and the software rendering the image must know what color to use for those pixels. The Halo effect “is when all pixels greater than 50% transparent become completely opaque and carry the background color to be rasterized” (Chris Lilley). This effect is usually caused by the pixel color mixing with the background color when the image editing software is created/saved.

Usually we counteract aliasing by anti-aliasing, but it’s not so easy if transparency is binary.

There is a serious interaction between antialiasing and binary transparency. Because the background color of the image is mixed with the foreground color, simply changing one background color to another color does not simulate transparency very well. This will create a bunch of shadows mixed with background colors and foreground colors […] . If the original image is antialiased on a white background, a white halo is created around the object. – Chris Lilley (Source)

The solution to this problem is to adopt quantitative transparency, commonly known as the Alpha channel. The Alpha channel allows for varying degrees of transparency that smoothes the transition between the foreground and background colors, something you can’t do in GIFs; An image with a halo effect looks best on a white background; any other high-contrast background color will make the edge artifacts visible.

I’m not sure there’s a solution to this problem, but I’ve never seen a GIF with a transparent background that doesn’t have this problem with curved edges, and I’ve even seen rectangles with this problem.

If you want to use your image/icon on a non-white background, such as a black footer background, this alone will allow you to veto giFs. However, there are other reasons why SVG is better than GIF, as we’ll see in a later section.

Note: If you can’t see the serrated effect in the first image in your browser, try zooming in.

Why don’t you see zigzags at smaller sizes? This is because the browser smoothes out the jagged edges as it resizes the image. Does that mean you can get rid of the serrations and continue using GIFs? Yes, you can. But to do that you have to use giFs that are much bigger than you want them to be, and then zoom out. This also means that your users will need to download larger image files from your servers, which will take up more bandwidth on their phones and affect the overall page size and performance. Please don’t do this.

Conclusion:

GIF Animated SVG
GIF can only represent transparency in binaries. This results in an artifact, known as the _ halo effect, when an image or icon is used on a non-white background. The higher the contrast between the background color and the image, the greater the halo effect, making the icon almost unusable. SVG includes an alpha channel, so you don’t have these problems on any color background.

Animation technology and animation performance

You can animate SVG using CSS, JavaScript, or SMIL, and they all allow you to animate elements in SVG in different ways with different levels of control.

There is no such thing as animation technology for GIF images. They animate a sequence of images (one image per frame) in a fixed manner and pace. Sure, you can create an icon by “recording” an animation and converting it to A GIF, but how good is it going to look? And how much control do you have over the timing of the animation once it’s recorded? Not at all.

Unless you can be sure that the GIF you’re creating is at least 60 frames (60 images per second), it’s hard to make the animation look smooth. SVG takes advantage of browser optimizations, making it much easier to animate smoothly.

GIF files are much larger in size than PNG or JPEG, and the longer the animation, the bigger the file. Imagine if your animation had to last five or six seconds. What if it lasts longer?

The result is predictable.

Let’s look at a small concrete example. Here are two images: an SVG animation on the left and a GIF on the right. The rectangles in the image all change color within 6 seconds.

The following points need to be noted:

  • GIF animations may look smoother, but if you look more closely you’ll notice that the rectangle in SVG has a wider range of color changes, since it changes continuously from the start of the color to the end of the color. The maximum number of color changes in a GIF is the number of frames. The GIF in the image above contains 60 frames, or 60 colors, while SVG traverses the entire color spectrum from pink to green.
  • For this kind of looping animation, it’s generally best to avoid sharp color jumps. When animating, it is desirable that the end of the color change transition smoothly to the original pink, so that the second animation continues without a noticeable color jump. With CSS, you can leveragealternateProperty to set the direction of the SVG animation. But with GIFs, you’ll need to work on the number of frames, and you’ll probably need to double the number of frames, which will also increase the size of the image file.

The size comparison of the two pictures above:

  • GIF image: 21.23KB
  • SVG image: 0.355KB

This is not an insignificant difference. Of course, we all know how to optimize images, so let’s give it a try.

SVGO can optimize SVG files to 0.249KB.

There are many online tools to optimize GIFs. I optimized the image using ezgif.com (other tools include gifsicle) to compress the file to 19.91KB.

There are many options to choose from when optimizing giFs. I optimized the image above by keeping the frame count constant and using lossy compression, which reduces the file size by 30-50% at the expense of some jitter/noise.

You can also optimize by removing one frame in every n frames; This will further reduce the file size, but will result in a less fluid animation. In the current animation, for example, removing certain frames will cause color changes to be more “jumpy” and more noticeable.

Other optimizations include reducing the number of colors (this doesn’t work for our color-dependent animations) and reducing transparency. You can learn more about these options at ezgif.com’s optimization page.

A quick summary: If you want your GIFs to be smoother, you need a higher frame rate, which leads to an increase in file size. With SVG, the files you need to maintain are much smaller. This is just a simple little example, and I’m sure there are many better examples, but I’m just trying to highlight the differences between the two formats.

Even if you use JavaScript or even a JavaScript framework (since Internet Explorer doesn’t support SVG animation) to generate the above animation, the total SVG file size is still smaller or at most as large as GIF with frame files included. In GreenSock’s TweenLite, for example, the SVG file containing the library file is less than 13KB (still much smaller than GIF), while TweenLite itself is 12KB compressed. Even if you end up with the same file size as GIF, SVG has other advantages over GIF, and we’ll see more of them later.

Other JavaScript libraries focus only on certain animation effects and therefore have smaller files (< 5KB), such as segments used to create line-drawing effects. The Segment is only 2.72KB compressed. Not too bad, is it?

There may be exceptions, of course, so you need to test your decision. But given the nature of GIF and how it works, you’ll find that SVG is a better choice in most cases.

Note: SVG performance is not optimal today and is expected to improve in the future. IE/MS Edge renders SVG with the best performance of any browser today. Beyond that, SVG animations still look better than GIF animations, especially when dealing with longer animations. Because assuming a 60fps GIF, the file size will slow down the performance of the entire page. Libraries like GreenSock also provide good performance support.

Conclusion:

GIF Animated SVG
1. GIF images are generally larger than SVG images. The more complex the animation, the longer it takes, and the more frames required, the larger the file, and the greater the performance impact. 2. Unless gifs hit 60fps, the animation might not look smooth enough. However, higher frame rates, especially for longer animations, will result in larger files. ** Result: ** Performance needs to be compromised. Either increasing the overall page size affects performance to keep the GIF animation smooth, or using fewer frames affects animation performance. There is always a form of performance that suffers. SVG takes advantage of browser optimizations and its own animation elements to maintain better animation without compromising page performance, even if current browser performance is not at optimal levels. SVG files are reasonably sized, if not very small, compared to GIFs, even with animation libraries that include some cross-browser support.

Maintain and modify animations

… It’s very painful for giFs. You’ll need to use an image editor like Photoshop, Illustrator, or After Effects, and if you’re not familiar with the editors themselves, you’ll feel more comfortable modifying code directly than using an image editor.

Above is a screenshot of an animated GIF timeline created in Photoshop. Each frame of the animation is shown at the bottom of the image. The more complex the animation, the more frames it needs, and don’t forget the complex layers palette. Small > Thanks to my designer friend Stephanie Walter for her advice on photoshop animation

Imagine if you wanted to change the timing of the animation? What if you want to change the time function of one or more elements in your image at the same time? Or do you want to change the direction in which the element moves? What if you want to change the overall effect so that the elements in the image behave completely differently?

You’ll need to redraw the image or icon from scratch. Any changes will require you to reopen the image editor and make changes for each frame. This can be torture for developers and “mission impossible” for those not familiar with the editor.

With SVG, any animation changes are just a few lines of code.

Summary (from a developer’s perspective) :

GIF Animated SVG
Maintaining and modifying GIFs requires recreating images or rearranging each frame through an image editor, which can be a big problem for developers unfamiliar with design. SVG animations can be controlled and modified directly in SVG code, usually with just a few lines of code.

File size, page load time, and performance

In the previous section we looked at the performance of the animation itself, but in this section I want to focus on the overall performance of the page and how the image format you choose can affect it.

Fact: The larger the file, the greater the negative impact on page load time and performance. With that in mind, let’s look at a more practical, real-life example of how replacing GIF with SVG can optimize the overall page load time.

In my first SVG talk 18 months ago, I talked about how TO use SVG to replace GIFs and get an overall page performance boost. In that talk, I used a real-world web page as an example of how to take advantage of SVG: the Sprout homepage.

The two animated images on the Sprout homepage were originally presented in GIFs. Two years ago Mike Fortress wrote a blog post on Oak explaining how to recreate the original GIF animation with SVG animation, specifically the diagram animation shown below:

The SVG version of the chart used on the Sprout homepage and written about on the Oak article. (All rights reserved by their owners.)

Note that this animation was created using SMIL and is not visible if you are using Internet Explorer.

In his post, Mike shares some interesting results about the performance of their new page after switching to SVG:

This graphic, along with another animation on the Sprout page, was originally in GIF format. When we switched to SVG our pages were reduced from 1.6MB to 389KB and the page load time was reduced from 8.75s to 412ms. That’s a huge difference. — Mike Fortress, “Animated SVGs: Custom Easing and Timing”

It’s a huge difference.

The graphic on the Sprout front page is perfect for SVG. If SVG has so many advantages there is no reason to record it as a GIF.

Jake Archibald also realized the power of SVG animation and used it for the interactive illustration section of his article. His Offline Cookbook is a great example (and a great article). Can he do it in giFs? B: Sure. However, considering the number of images he uses, GIFs can easily increase the size of their entire page to a few megabytes, since each GIF requires at least a few hundred KB; While the overall size of the entire page is only 128KB with _ all _SVG embedded, because you can reuse elements in SVG, any repeating element will not only make gZIP better for the entire page, but also make the overall size of all SVG smaller for each page.

That’s a hell of a lot.

So much for page loading and performance. It is important to note that there are still possible exceptions, and while in most cases you will find SVG to be better than GIF, it is best to test it out.

Conclusion:

GIF Animated SVG
GIF animated images are generally larger than SVG, which can negatively impact the overall page, load time, and performance. SVG can be reused, gzip compresses better, and makes it smaller overall than GIF, thus optimizing page load times and performance.

Browser support

The only absolute advantage that GIF has over SVG is probably browser support. GIF works pretty well everywhere, whereas SVG’s support is relatively incomplete. While we have a number of fallbacks for browsers that don’t support SVG, and should not be a reason to discourage anyone from using SVG in today’s browsers, alternative images in PNG or JPG format will become static and unanimated.

Of course, you could use GIF as a backup to SVG, but you have to consider all the concerns and drawbacks mentioned above.

Conclusion:

GIF Animated SVG
GIF can be used anywhere. SVG browsers are not fully supported, but there are plenty of fallbacks for browsers that don’t.

Controllability considerations

Moving something on the page or anywhere, for that matter, creates an immediate distractor – sure to grab the user’s attention immediately when it starts moving. That’s how the human brain works. This is one of the reasons that banners are so dedicated to animation, and why animated banners are extremely annoying. They distract you when you need to focus on a task, such as reading an article.

Imagine a page with a bunch of animated ICONS (or pictures) that move around no matter what you do. I’m not talking about one or two animated images on the front page or article, but elements and controls in the UI and small ICONS that repeat themselves in many different places. Unless your icon is designed to animate in an infinite loop, such as a spinner during a user interaction wait, it becomes annoying, not a “good” thing.

In fact, it may be more than annoying for some people, the constant animation may be uncomfortable for others.

In Val Head’s article, “Designing Safer Web Animation For Motion Sensitivity,” the designer and Web Animation consultant discusses how overuse of Animation on the Web can affect people with visually-induced vestibular disorder:

It’s no secret that people find scrolljacking and parallax effects annoying and overused. But did it ever occur to you that these animations might not only annoy you but also make you sick? This is already true for patients with vision-induced vestibular disorder. As animated interactions become more common, more and more people are noticing that large-scale on-screen animations can cause them dizziness, nausea, headaches or worse. For some, the symptoms can last long after the animation ends. Yikes.

Now imagine if those animations never stopped… Yikes + 1.

Val’s article explains this in more detail, as she collected feedback from two real patients about their experiences when they saw different animations.

One solution to avoid these problems is to provide users with a way to control these animations so they can stop them when they feel disturbed.

With SVG, you have complete control over these animations. If you really want to play it as soon as the user enters the page, you can play it once or twice after the page loads. You can then use just a few lines of CSS or JavaScript to have the user trigger them again via the hover action. You don’t need hundreds or thousands of lines of CSS or JavaScript to animate your icon, unless your icon is a very complex scene with a lot of animation in it. If so, I think it’s not an “icon” anymore, it’s a regular image.

You can even control the playback, the speed of each Tween animation, and more if you control it in JavaScript.

Or you can add a toggle button that lets the user stop the looping animation at any time. But you can’t do that with giFs… Unless your toggle action is to replace the original GIF with a still image.

One might think that you can show a static image of an animated image, such as PNG, and then replace it with a GIF when the user hover action. But there are some problems with this:

  • If the images are embedded, you need to replace them with JavaScript. This action does not require any JavaScript in SVG.
  • If images are foreground images (embedded in HTML) and you need to replace them, then double the HTTP requests per image. If the image is embedded as a background image in the style sheet (which is not recommended), the image (especially GIF) size will accumulate in the style file, blocking the rendering time of the entire page.
  • If you replace the image address with the user hover, a slow connection will result in a noticeable flicker between the images before and after. My network connection is quite slow, sometimes I use 3G network, I see two pictures switch in hover or viewport change, and I can’t remember which one didn’t blink. This happens when the second hover (loading GIF) is large and the flash is followed by a slow-loading and shoddy animation. It’s not really attractive.

So, of course, you can control the animation by switching images, but you can’t control the GIF precisely enough to affect the user’s EXPERIENCE with the UI.

You can also control how many times a GIF animation is played (cool), but that means the animation can only be played n times. If you need to replay based on user behavior, you still need to apply the techniques outlined above to multiple images.

Maintain multiple images, multiple HTTP requests, and use non-optimized hacky solutions to solve problems that are easy to solve in SVG:

  • Embed an SVG image in the page.
  • Create animations wherever you need them (or create animations before embedding images)
  • Animation playback, pause and other control; Let the user also can control.

No additional HTTP requests to load, no complex animation timelines to maintain in the image editor, no controllability concerns, and just a few lines of code.

Conclusion:

GIF Animated SVG
GIF does not allow the user to stop playing the animation without an additional HTTP request to load the image. Even this way, you can’t have complete control over the animation. SVG is fully customizable, allowing the user to enable, disable, and so on in a normal way.

Content controllability

GIF Animated SVG
GIF can only be described using the ‘Alt’ attribute like PNG and JPEG formats. The content of the image cannot be recognized or manipulated directly by means outside the overall description of the image. SVG content and semantic structure are directly controllable. Content in SVG that is used to generate animation can also be rendered via SVG’s built-in manipulable elements as well as the screen manipulation of ARIA rules and properties. (available from [here] (http://www.sitepoint.com/tips-accessible-svg/) to learn more knowledge about SVG controllable).

interactive

Elements inside SVG can be interacted during, before, and after animation, and there is nothing else to say, which is impossible in GIFs. Therefore, if you use GIF, you lose any control beyond triggering and stopping the animation, even though these aren’t really implemented inside GIF, as we just saw, by replacing GIFs with static images. Even changing the colors of GIF interior elements requires the help of additional images. This is another advantage of SVG over GIF.

Conclusion:

GIF Animated SVG
Animations defined in GIF cannot be interacted with. You can’t interact with or create links to individual elements within the GIF. The content of SVG is fully interactive. You can make internal elements respond to user actions such as hover and click.

Responsive and adaptive animation

The ability to control SVG animations and their diverse properties directly from code gives SVG another advantage over GIF: no additional HTTP requests are required, and responsive, adaptive, and high-performance animations can be created with just a few lines of code and very small files.

Sarah Drasner has written an article for Smashing Magazine showing different ways to generate animation from SVG sprites. One is inside the SVG to create multiple “scene”, through the CSS to create animation, and then by changing the [] viewBox attributes ((sarasoueidan.com/blog/svg-co…). To change the “view” of SVG, rendering one scene at a time based on the current window size and available screen area.

If you want to create the same GIF animation, you lose control of the animation and need multiple images to do so, which are much larger than one SVG image.

If you don’t want to deal with SVG animation code, you can create SVG sprites and animate them just like any other image format, using the Steps () method and a few lines of CSS. Sarah also discusses this technique in her article. SVG animation does not require a very sophisticated approach to achieve high performance.

Conclusion:

GIF Animated SVG
Since the contents of giFs cannot be controlled by code, to make the animation automatically respond to changes in the window or context, you need to organize multiple images separately. Because SVG generates animation directly from code, its content and animation can automatically respond to or adapt to changes in window size and context, without the need to manipulate other resources.

conclusion

GIF has very good browser support, but SVG beats GIF in every other respect. Of course there are exceptions, you can still use GIF or any other image format to compensate for SVG, you can even use video or HTML5 Canvas or whatever.

SVG offers performance advantages over other image formats, especially GIF.

Therefore, based on all of the above, I recommend avoiding GIFs wherever SVG animation can be used. You can certainly ignore my advice, but you’re giving up many of the advantages SVG offers.

Unless GIF offers more advantages than SVG in terms of browser support for IE 8 or later, I think SVG is the right choice.

The following links can help you get started with SVG animation:

  • The State of SVG Animation
  • A Few Different Ways to Use SVG Sprites in Animation
  • Creating Cel Animations with SVG
  • GreenSock has a bunch of very useful articles on animating SVGs
  • Snap. SVG, also known as “The jQuery of SVG”
  • SVG Animations Using CSS and Snap.SVG
  • Styling and Animating SVGs with CSS
  • Animated Line Drawing in SVG

Hope this article has been helpful.

Thank you for reading.

Thanks to Jake Archibald for reviewing this article and Chris Lilley for his feedback on the transparency section of GIFs. Without their feedback, this article could not have been so brief and comprehensive