Why svg over png?

These two file types couldn’t be more different — each is better suited for specific situations. They’re certainly not interchangeable in every aspect, but you may find that SVGs can perform specific tasks better than the standard PNG image.

Learn the difference between SVG and PNG and where best they’re applied on your website.

SVG stands for Scalable Vector Graphics, and it’s the most widely used vector file format on the web. Let’s break this down:

Vectors are pieces of code written in XML that represent shapes, lines, and colors to elaborate on how it works.

While creating an image with nothing but code is entirely possible, most people use a vector graphics editor like Inkscape or Adobe Illustrator. You can also convert PNGs or other raster images to SVG, but the results aren’t always great.

When the page loads, this code is converted into graphics, so you can’t immediately tell an SVG from a PNG. But because SVGs are simply lines of code converted to pixels, that means they can scale to any resolution — large or small — without losing quality.

SVG also supports animation and transparency, making it a versatile file format.

The only issue is that it’s not as widely used as more standard formats like PNG, so it’s less supported on older browsers and devices, and it’s not always the easiest to upload it to your site and get it to display correctly.

Wondering what makes SVG files different from PNGs? 🤔 This guide is here to help 💪Click to Tweet

Though still not as widely used as raster file types like PNG, vector graphics are growing fast in popularity. They do some essential tasks that raster images just can’t. Here’s why people love SVGs.

SVG has quite a bit on PNG, from being scalable to tinier in size, but it’s not better in every situation. Here’s the bad of vector file types.

While you definitely shouldn’t convert all your PNGs to SVGs, vector graphics can make an excellent replacement for some images.

SVG images work exceptionally for decorative website graphics, logos, icons, graphs and diagrams, and other simple images. See our homepage for an excellent example of vector artwork in action.

However, they don’t work as well with complex images involving many colors and shapes, such as screenshots, photography, and even detailed artwork. While it’s possible to convert any image to SVG, browsers don’t always handle complex vectors with hundreds of colors well since they have to be rendered when the page loads.

In addition, SVG artwork can be beautiful, but designing complex images requires a lot of time, effort, and proficiency in advanced editing tools. Keep it simple if you want to create your vector images.

If you have detailed images, definitely stick with PNG.

However, SVGs are better for responsive and retina-ready web design due to their scalability and lack of quality degradation. In addition, they support animation while PNG doesn’t, and raster file types that support animation like GIF, APNG, and WebP all have their issues.

For simple graphics that may require animation and are guaranteed to scale well on any screen size, use SVG.

PNG stands for Portable Network Graphics, and this name is reflected in how widespread this file type is. Anyone who’s ever used a computer has likely worked with PNGs, as it’s the most common file type on the internet next to JPEG.

PNG is a raster image file type, similar to most common image formats. That means that it consists of pixels, the same small dots displayed on your monitor or screen. While this makes it easy to display, it also means image quality is dependent on the resolution — how many pixels are in the image.

So if you scale a raster image up or down in size, the quality will be impacted. Sometimes the damage is negligible, especially when scaling down, and sometimes it can make an image blurry and completely unusable.

Still, the prevalence of PNG makes it a good candidate for general-purpose usage. This file type supports transparency, but not animation.

What makes PNG the most widely used image file format online? Here are the advantages:

On the other hand, the PNG format was created decades ago and has several notable flaws that haven’t been updated for the modern era.

PNG is the most common file type for a reason; it’s highly versatile and fits almost any situation. There are just a few flaws to consider when using it, like their large file size and lack of scalability.

PNGs are suitable for displaying detailed images, artwork, and photography — everything a vector image can’t handle. Anything with hundreds of colors and a large resolution should likely be a PNG.

That’s not to say you cannot use PNGs for more straightforward images like logos and decorative graphics, but SVGs would be better suited for the task.

When you’re not sure whether a platform will handle the newer, less supported SVG file type, PNG is the way to go — if only to be safe.

For instance, you can’t upload SVGs to most social media. And as some email clients may struggle with vectors, it’s usually recommended to stick with PNGs in email templates.

In general, PNGs work well with any complex, non-animated images, especially ones that require transparency. You can use it pretty much anywhere; it’s just that sometimes an SVG would be a better fit.

Remember that you can always use PNG fallbacks if your SVG fails to load, so it’s usually safe to go with vectors even if a significant portion of your user base has stuck with older devices or browsers.

Neither file type is better or worse than the other; each has its limitations. Though SVG outperforms PNG in several areas, PNG is a lot better at handling certain things.

In general, though, you should stick to SVGs wherever appropriate and use PNGs in all other situations that vectors cannot handle. You may be technically able to use either in these cases, but SVG is preferable in a few specific areas.

While SVG supports animation, PNG does not. Raster file types like GIF and APNG can be considered alternatives. Still, there is no perfect animated raster format that’s widely supported, well known, high quality, and results in small file sizes. SVGs satisfy all these niches.

SVGs also scale perfectly to any screen size, making them responsive and retina-ready by default. PNGs will lose quality when resized, and getting them to scale well is a hassle — especially if you only have tiny images that won’t display well on large screens.

Finally, SVGs are generally smaller than PNGs, so they’re less taxing on your server despite needing to render on load.

Use them for simple, flat color artwork, logos, and decorative graphics on your site.

On the other hand, PNGs are suitable for displaying complex graphics at a large resolution, or pictures with thousands of colors. SVGs can’t handle that amount of colors and shapes at the moment.

These sort of complex images will often make up the majority of pictures on your site, so it’s not time to toss out PNG yet.

And PNGs are more widely supported on browsers and specific platforms like email clients. If you’re not sure whether an SVG will render properly, err on the side of caution and use a PNG.

SVGs and PNGs may sound similar but these two popular file types are suited for specific situations. 🤷‍♀️ Learn more right here ⬇️Click to Tweet

SVG and PNG are two very different file formats. In the end, it’s not a big deal whether you use PNGs or JPEGs on your site outside of very niche use cases, but picking between SVG and PNG is a much more important choice.

You’re far more likely to use PNGs as it’s a simpler, easier to access, and more versatile file format. Complex images such as screenshots and detailed illustrations should use PNG.

While SVGs are harder to create and edit, they have a variety of benefits over PNGs. Whenever it’s appropriate to use vector images, such as decorative graphics and logos, definitely use SVG.

In life, we’re constantly comparing one thing to another. You could say we have a critical eye. But it could also be said that we have an eye for quality. For example, apples and oranges are comparable. They may fit into the same fruit category, but they will appeal to different people based on their individual needs.

If you’re looking for a Vitamin C hit, you’ll probably want an orange on your plate. However, if you’d like more fiber in your diet, you’ll probably bite into a juicy apple. It doesn’t necessarily mean one is better than the other – it comes down to preference.

And the same thing can be said about SVG vs PNG formats.

In this article, we will be comparing the two formats when it comes to web and digital design.

SVG is an image file format created specifically for designing two-dimensional vector and vector-raster graphics for websites. SVG supports animation, transparency, gradients, and is easily scalable without losing quality. SVG is also the most widely used vector file format on the web.

It’s important to note that in Vectornator, you can export your document to a vector (SVG) format.

Let’s break this down:

Vectors are pieces of code written in XML that represent shapes, lines, and colors to elaborate on how it works. While creating an image with nothing but code is entirely possible, most people use a vector graphics editor. You can also convert PNGs or other raster format images to SVG, but the results aren’t always great.

SVG also supports animation and transparency, making it a versatile file format. The only issue is that it’s not as widely used as more standard formats like PNG, so it’s less supported on older browsers and devices. It’s also not always the easiest to upload it to your site and get it to display correctly.

Here’s why people enjoy SVGs:

SVG has quite a bit on PNG, from being scalable to tinier in size, but it’s not better in every situation. Let’s have a look at the downside of vector file types:

SVG is not intended for social media. Instead, SVG works best for web design when you’re exporting icons and illustrations for websites with responsive design and objects that should be displayed perfectly on screens. Use SVG when you want transparent images that can be easily zoomed or compressed, need lightweight animations, or plan to modify an image soon or frequently.

While you definitely shouldn’t convert all your PNGs to SVGs, vector graphics can make an excellent replacement for some images. SVG images also work exceptionally for decorative website graphics, logos, icons, graphs and diagrams, and other simple images.

However, they don’t work as well with complex images involving many colors and shapes, such as screenshots, photography, and detailed artwork. While it’s possible to convert any image to SVG, browsers don’t always handle complex vectors with hundreds of colors well since they must be rendered when the page loads.

In addition, SVG artwork can be beautiful, but designing complex images requires a lot of time, effort, and proficiency in advanced editing tools. Keep it simple if you want to create your vector images. If you have detailed images, definitely stick with PNG.

However, SVGs are better for responsive and retina-ready web design due to their scalability and lack of quality degradation. In addition, they support animation while PNG doesn’t, and raster file types that support animation like GIF and APNG.

In a nutshell, for simple graphics that may require animation and are guaranteed to scale well on any screen size, use SVG.

PNG stands for Portable Network Graphics, and this name is reflected in how widespread this file type is. Anyone who’s ever used a computer has likely worked with PNGs, as it’s the most common file type on the internet next to JPEG.

PNG is a raster image file type, similar to most common image formats. That means it consists of pixels, the same small dots displayed on your monitor or screen. While this makes it easy to display, it also means image quality is dependent on the resolution – how many pixels are in the image.

So, if you enlarge a raster, the quality will be impacted. Sometimes, the damage is negligible, especially when scaling up, and sometimes it can make an image blurry and completely unusable. This is because when you stretch it, you lose the visual quality. This is why you must not upscale a PNG beyond its intended resolution.

Still, the prevalence of PNG makes it a good candidate for general-purpose usage. This file type supports transparency but not animation.

What makes PNG the most widely used image file format online?

On the other hand, the PNG format was created decades ago and has several notable flaws that haven’t been updated for the modern era:

If you're using high-quality images, detailed icons, or need to preserve transparency, SVG is the best choice. Use it for small static images, logos, navigation elements, prints, and other images with transparent backgrounds and robust edges.

When you’re not sure whether a platform will handle the newer, less supported SVG file type, PNG is the way to go. For instance, you can’t upload SVGs to most social media sites as they aren’t supported file types. And as some email templates may struggle with vectors, it’s usually recommended to stick with PNGs.

In general, PNGs work well with complex, non-animated images, especially ones that require transparency. You can use it pretty much anywhere – it’s just that sometimes an SVG would be a better fit.

Remember that you can always use PNG fallbacks if your SVG fails to load, so it’s usually safe to go with vectors, even if a significant portion of your user base has stuck with older devices or browsers.

To create an SVG file, you need to have a vector version of the logo or illustration. Vector art is defined in terms of 2D points connected by lines and curves to form polygons and other shapes with different properties.

A vector graphic is generated by creating nodes and joining these together with lines (known as paths) to build shapes. Moreover, vector art is used for multiple types of design projects. It's used for graphic design, illustration, and digital arts.

Vector software can be used for most forms of graphic design. It’s up to you, as the designer, to decide which type of software is most appropriate for your particular design project.

We happen to know a great vector software. Maybe you’ve heard of it? Vectornator is a design software that is free to use and perfect for creating vector graphics.

These are some of the main areas that use vector art and graphics to create high-quality, imaginative, scalable images:

It's a good idea to find out more about how to draw and work with vector art. You can also watch this tutorial video we made on how to easily create your own vectors using our top-notch software.

A transparent background for your PNG may seem like such a basic design element. But, more often than not, these simple design techniques turn out to be some of the most valuable and creative ways to make your image stand out.

Here are some design tips on using a transparent background in your PNG to your advantage:

If you’d like to get a step-by-step guide on how to achieve the above tips, you can check out our simple guide here.

SVG and PNG are two very different file formats, which is why picking between them is an important choice.

You’re far more likely to use PNGs as it’s a simpler, easier-to-access, and more versatile file format. Complex images, such as screenshots and detailed illustrations, should use PNG.

Whenever it’s appropriate to use vector images – such as decorative graphics and logos – definitely use SVG. This is because they are responsive and have smaller file sizes. Just remember that SVGs can only be used or stored as vectors.

So, are you team SVG or PNG? We’d love to hear from you to find out!

Are you team SVG or PNG? We’d love to hear from you to find out!

• SVG images can be created and edited with any text editor.
• SVG images can be searched, indexed, scripted, and compressed.
• SVG images are scalable.
• SVG images can be printed with high quality at any resolution.
• SVG images are zoomable.
• SVG graphics do NOT lose any quality if they are zoomed or resized.

For some reason, we’re still seeing plenty of PNGs (raster graphics file format) on the web, even on spanking new websites built in 2016! Things like logos and icons seem to be the main culprits. I suppose the question is why? Why do we still use them? Unless you’re using them as a fallback on ancient browsers, your time is up.

We’ve put together 5 key reasons to use SVGs over PNGs. SVGs if you don’t know are Scalable Vector Graphics, an XML-based image format for two-dimensional graphics. SVG is supported in all browsers, except IE 9 and lower and old Android (V3).

Right, now that we know the difference, let’s get through the reasons you should be using SVGs.

In a nutshell:

Carry on reading for an in-depth look at each point.

It doesn’t matter about your screen size, zoom level, resolution or whether or not you have a ‘retina’ display. SVG is vector based, paths, shapes and fills. This allows for infinite resolution, much like when creating artwork for print and using shapes, the same principles apply!

Using PNGs means you are restricted to pixels, urghh, that’s so 2001. Also, a lot of the time you need to cater for ‘retina’ devices, meaning you have two PNGs, one with almost always an absurd file size too.

These two icons below can demonstrate resolution problems, zoom in (cntrl/cmd + ‘+’) and take a look yourself, or just right click and open each item in a new tab. If you can’t do either of those, have a little play of the video below where I zoom in…

Touched on above, PNGs can weigh in at large file sizes, usually when catering for HDPI displays. As you know, the larger the file size, the slower it is to render/load. People tend to use PNGs when they require transparency in their images, transparency in an image = stupid file size. Stupid file size = Longer loading times. SVGs are just code, which means very small file sizes. There are instances when SVGs can take a life time to load, for example, if you’ve made the Eiffel Tower as a vector graphic with a million paths and fills, best to use a JPEG… or PNG.

HTTP requests: Using traditional PNGs means that, unless you base64 encode, the images have to be referenced as external resources. All those PNGs means an increase in http requests and thus a slower site. SVGs are not only smaller in filesize, but the XML can be embedded inline to your HTML, eliminating http requests and speeding up your site.

SVGs can be animated and styled with CSS. Animations (transformation/transition) that you use on HTML elements can also be used on an SVG element. There are instances where you can’t use CSS to animate SVGs but these instances can usually be covered with JavaScript, have a look at snap.svg (The JavaScript SVG library for the modern web.)

This opens up a whole world of creativity when it comes to the web, I’ve popped in an example of a SVG animation to give you an idea of what’s possible:

There are many ways SVGs can be used on the web, from displaying logos to full on physics engine in browser madness. I’m in the former camp, my needs are generally needing logos, icons and simple animations in SVG format.

Logos: Logos are usually vector based, and rightly so. Give someone from a print background a raster based logo and just watch their face melt. The beauty here is, you could define an SVG document as your logo and then use it wherever you like without worrying about size, resolution or load times. The same factors apply for icons too. Also, creating responsive logos: See our article on modern logo requirements here to find out more about responsive logos: Modern Logo Requirements

Graphs: Yes, graphs… SVGs are great at vector shapes, lending itself to things like infographics and graphs very well indeed.

Animations: See point 3

Cool stuff: Ok, not so practical, but there are some cool things you can do with SVG, check out this video below with a masking effect using an SVG:

Google index’s SVGs, which is good news. SVG content whether it is in a standalone file or embedded directly in HTML is indexed.

In the interest of fairness, here are a couple of points to consider when using SVGs.

You’ll have problems with trying to use SVGs with old browsers, having said that, you can have a fallback in place such as PNG replacements.

Complicated artwork with thousands of nodes is probably best suited to JPEGs, browsers trying to render complicated SVGs can have a meltdown.

While PNGs are capable of handling very high resolutions, they're not infinitely expandable. On the other hand, SVG files are vector-based — built from a complex mathematical network of lines, dots, shapes and algorithms. They can expand to any size without losing their resolution.

PNGs (Portable Network Graphics) are raster-based files. They feature high resolutions, lossless compression, transparency and the ability to handle 16 million colours. This makes them an excellent choice for graphics, logos, charts and illustrations — as well as very detailed photographs. Due to the large file sizes associated with PNG files, they’re not ideal for online photos.

Learn more about PNG files

Scalable Vector Graphics (SVGs) work well for logos and graphics because you can scale them up or down for different purposes. They’re also a popular choice in web design because search engines like Google can read their XML programming language. This helps with SEO and website rankings.

Unlike PNGs, SVGs are vector-based. This means that they use mathematical algorithms to display images, which you can then scale to any size without negatively affecting their quality.

Learn more about SVG files

There’s a lot of crossover between PNG and SVG. Find out what sets them apart.

Perhaps the most fundamental difference between PNG and SVG is that one is a raster file type and the other is vector.

A PNG is a raster — that is, pixel-based — image format. If you scale up a raster image too far, it becomes grainy and pixelated. Similarly, if the image is too small, it can become indistinct. While PNGs are capable of handling very high resolutions, they’re not infinitely expandable.

On the other hand, SVG files are vector-based — built from a complex mathematical network of lines, dots, shapes and algorithms. They can expand to any size without losing their resolution.

Find out more about raster vs. vector

PNG file sizes are often large so that they can handle high resolutions. Their size means they can take longer to process, share, save and open. It can also slow down page loading times — which is why JPEGs are more common for online photography. There is, however, a smaller 8-Bit PNG variant, but it can only support 256 colours.

SVGs are far smaller in size than PNGs and aren’t likely to slow down your computer or website. (However, very detailed designs may slow down an SVG.) Because they’re a vector file format, you can scale SVGs up or down without any loss in quality.

SVGs offer lossless compression — which means they’re compressible to smaller file sizes at no cost to their definition, detail or quality.

PNGs also benefit from lossless compression of 5-20%, which can help to make up for their large file size. However, they’re still likely to be larger than an SVG.

PNG files aren’t a common choice for web photos, as discussed above. However, they can handle very detailed, high-quality digital photos for print, editing and other purposes. They’re a common file format in Adobe Photoshop.

SVGs, on the other hand, don’t use pixels — so they struggle to display photography at a high standard.

Both PNG and SVG files can display intricate levels of detail for web graphics, illustrations, logos, infographics and tables.

However, SVG has a key advantage with its XML programming language. This means that each SVG file on display is written in text, rather than code. As a result, screen readers and search engines can analyse them — so they’re great for accessibility and SEO purposes.

SVG files are also usually smaller, which makes them quicker to load on a page. Page loading times are another critical element of search engine rankings.

PNG also supports some text-based graphics — but not to the same extent.

SVGs are considered a more advanced file type than PNGs, but they’re not actually compatible with every browser and operating system. Additionally, their programming language and vector-based composition can be unfamiliar and intimidating to new users.

PNGs, on the other hand, are a standard online format that receives wide support from web browsers and operating systems.

PNG files don’t support animation — unlike a similar raster-based image file, the GIF.

SVG files do support animation, but not as readily as other file types like the AI Adobe Illustrator native format.

Learn more about AI files

PNGs and SVGs support transparency — so they’re both excellent choices for online logos and graphics.

It’s worth noting that PNGs are one of the best choices for a raster-based transparent file. If you’re working with pixels and transparency, PNGs are a better option than SVGs.

To convert a standard raster image file like a JPEG or PNG to a vector-based SVG, follow these simple steps:

Follow these simple steps to convert your SVG file to PNG using Adobe Photoshop:

There are several excellent vector files for print use, so your choice depends on the document. PDFs are the most versatile vector format for everyday print use. For large-scale print jobs, you might choose an SVG or AI.

JPEG’s lossy compression and 24-Bit colour set it apart as the go-to image file for web photos. However, JPEGs aren’t as detailed as PNGs when it comes to printing. Also, JPEGs don’t have the same scalability or definition — so they’re not the best choice for logos and graphics.

While they’re both standard raster file formats across the web, a PNG is essentially the next-generation version of a GIF. Yet there are still several differences between them For example, PNGs don’t support animation.