Bifalgorithm post

Why do some images become super blurry when you look closer while others stay perfectly sharp no matter how much you zoom in? Let's zoom in to how SVGs work. Most digital images like PNGs and JPEGs, they store the finished picture as a grid of colored pixels. So if you zoom into the image, the computer will run out of the original pixels and it has to create new ones based on the pixels that are already there. This is why they stretch and blend them to fill in the gaps and that's when the image starts to look blurry or like a bunch of little squares. An SVG though or a scalable vector graphic stores pictures differently. Instead of storing pixels, it stores the instructions for drawing that picture. So when you examine an SVG file, you may see these tags which are telling a computer what to do. Draw a blue circle here, make this line this thick or connect these points with a curve. So when you make the image bigger, the browser doesn't have to enlarge a fixed grid of pixels. It just redraws the shapes from scratch at the size needed. Your screen is still made of pixels, but the SVG waits until display time to decide which pixels it needs. And this is what makes SVG is perfect for things like logos, icons, diagrams, because they never run out of a solution and they will look good no matter what size. This is actually a pattern computers use everywhere of not storing a result, but storing the instructions to get to that result. Hope it helps. Follow for more closer looks into how the technology around you works. Bye!

Why do some images become super blurry when you look closer while others stay perfectly sharp no matter how much you zoom in? Let's zoom in to how SVGs work. M…