This happens because transparency in GIF images is binary. Here is a screenshot showing the problem (on the right): If you’re not reading this in the browser, the effect might not be visible to you because the figure styles might not be applied. The problem is evident as soon as you look at the two images: the GIF circle has grey fringes around its stroke. This is an issue that is most likely to emerge when using GIF icons (whether animated or not), since icons are usually created with transparent backgrounds.įor example, take the following circle with a stroke, created as both an SVG image (left) and a GIF with a transparent background (right). Perhaps the number one deal-breaker with GIFs is the way transparency is handled, especially when the image is displayed on a background other than a white background. SVG is scalable and resolution-independent, and will look crisp clear on any screen resolution. GIF, just like other image formats, are not resolution-independent, and will therefore look pixelated when scaled up or viewed on higher resolutions. You can create a small SVG and have it scale up as much as needed without sacrificing image clarity. With SVG, size is free, and clarity is a constant. Change the dimensions or zoom in and out of the page, and they’ll get pixelated. When you create GIF-animated icons or images, their dimensions are fixed. Also, using a high-resolution GIF and serving it at a smaller size for mobiles is bad for performance. With GIFs, the file size will end up ridiculously large but we’ll get to that in a minute. Of course, the higher the image resolution, the bigger the file size will be. To provide crisp images for high-resolution displays when you’re using a bitmap image format like GIF, you need to use or srcset and switch the images up for different contexts. Whereas if you check the SVG demo out and zoom into the page, the SVG content will remain crisp and clear no matter how much you zoom in. Zooming into the page a few times will cause the image to be pixelated and the edges and curves of the elements inside to become jagged, as you can see in the image below: Try zooming in a page that contains a GIF image and watch the GIF become pixelated and its contents blurred.įor example, the following GIF recording of an SVG animation looks fine at this small size:Ī GIF recording of the SVG Motion Trails demo by Chris Gannon. Whereas GIFs-a raster image format-do not. An SVG image will look super crisp on any screen resolution, no matter how much you scale it up. The first advantage to using SVG over GIFs-or any image format, for that matter-is, unsurprisingly, SVG’s number one feature: resolution-independence. So, here is why I think you should use SVG instead of GIFs whenever you can. And this applies to more than just animated icons. The ability to animate SVG images is what gives it this advantage and ability. SVGs can indeed replace GIFs in many places, just like they can replace other raster image formats for candidates like those mentioned above. The first thing that crossed my mind when I saw them was that they were perfect candidates for SVG and should be created as SVG images, not GIFs. However, last week, a link popped up in my Twitter timeline that linked to a set of icons that are animated as GIFs. And if you’re going to animate any of those, creating your animations by animating the SVG code is the sensible way to go. Generally speaking, the images listed above are usually perfect candidates for SVG. Not only should the image be a good candidate for SVG, but SVG should also be a good candidate for the image. If the image size is much less as a PNG, for example, then you should use PNG, and serve different versions/resolutions of that image using srcset, or, depending on what you’re working on and trying to achieve. Of course, if you have an image that is better suited for the raster format-such as a photograph or a very complex vector illustration (that would normally have a very big size as an SVG), then you should use a raster image format instead. non-complex, vector-based illustrations,.But this, of course, only applies to images that are good candidates for SVG, such as: They are one of many reasons that make SVG images better than raster images, including GIFs. Its animation capabilities are one of its most powerful features, giving it a distinctive advantage over all other image formats. SVG can do much more than display static images.
0 Comments
Leave a Reply. |