Posted on June 30, 2022 in Technology

Scalable Vector Vs. PNG

What is a scalable vector image, and why is it preferable to PNGs for advertising? Scalable vectors are just what they sound like – vector graphics, which retain their information by referencing polygons and attaching them to each other proportionally using a plane of space. If the vector image says square 1 is always X distance from square 2 in relation to the size of the image, then the image will always be recreated exactly the same. This prevents the common issue of graininess or over-sharpness in resized images.

If you’ve ever sent off a picture for printing only to get something blurry and unreadable back, that’s because PNGs and JPGs follow different rules than vectors do! PNGs and JPGs are raster based – they store information via pixels, not planes, and as such can’t be endlessly scaled up and down. If an image has 300 pixels, and you scale it to 1200, 900 more pixels have to come from somewhere! The software you’re using is instead doing its best to duplicate the right colors in the right areas, thus leading to that 300 pixel image becoming very blurry and grainy as it increases in size. On top of this, SVGs are also much smaller than PNGs and JPGs are by default.

Scalable Vectors – Downsides

Scalable vectors are not all pro, no con though – many programs struggle with them! Mailchimp, a popular mailing software program, can’t handle scalable vectors, and neither can most art programs because they aren’t rastered images. This means that to make or edit one, you’d have to download a specialty program. That’s not necessarily a dealbreaker if you really need a product that can be up- and downscaled near infinitely, but it can get annoying. It also means that most people will have to take a screenshot or otherwise change the formatting of the image if they ever need to print it. While this is still miles easier than ‘fixing’ a low-quality image in a photo-editing application, doing that becomes infeasible for poster-sized logos. If the printmaker can’t help, then the average person, who may have purchased this SVG from a designer, has to find a printing service that can. If the person with the SVG just needs a PNG and doesn’t have an end service that can help them, well – off to Google they go, with mixed results.

Another problem is that the format itself keeps the pictures simple. While they’re smaller than PNGs, they also rely on different mechanisms to create the actual image. That’s that non-rasterization mentioned above, instead of painting with pixels, you’re painting with shapes. You can still create a slow-to-load SVG if the image itself is too complex, because every time you resize it, it’s calculating out where pieces go based on other pieces, not on the preexisting map of pixels a PNG would have. In that same vein, any lossless product can DDoS a printer accidentally, but some are easier than others – SVGs, which are simultaneously simpler and more technologically complex, may create the illusion that the product is smaller than it is. While they are almost always less storage space than PNGs… that doesn’t mean they can’t take up a lot of space by themselves!

In Short

SVGs are a cool specialty file type that’s good for logos, great for logos on websites, fast-loading, and generally pretty easy to use, given you have the programs necessary to convert or alter them. If you don’t, then a PNG might be a better bet – most art programs can churn out PNGs by default!