SVG vs PNG Format For A Website

[Tube Agency]

Hey there!

Which is better, SVG or PNG format for a website? (or some other?)

My personal opinion is that SVG is far better than PNG. Why?
1. It's a vector based format which means I won't have blurry images If I maybe zoom in or something (unlike with PNG)
2. Small file size which means faster page load time

But I'm by no means an expert, so there might be people that disagree with me, and I wanna hear why and which format do you recommend, lets have a discussion down there

 

[Gogol]

SVG by all means. Unless you are trying to support ie 8 or something, I see no reason to keep using pngs.

 

[bartosimpsonio]

I'm totally ignorant on this. Didn't even know this was a choice.

So, does SVG substitute PNG for everything?

Back in the day vectors couldn't do high quality photos.

 

[Gogol]

I'm totally ignorant on this. Didn't even know this was a choice.

So, does SVG substitute PNG for everything?

Back in the day vectors couldn't do high quality photos.

Svg can show anything you want (and can even animate anything you want). For example, all of those logos and icons that are made in Adobe Illustrator can also be rendered as an svg instead of png (or other raster formats).

However, for things such as photos; there is a better format called webp (you might already know it because of the pagespeed results).

So, use svg for icons, logos and such stuffs. Use webp for photos and so on.

 

[Tube Agency]

SVG by all means. Unless you are trying to support ie 8 or something, I see no reason to keep using pngs.

That's what I thought.

I'm totally ignorant on this. Didn't even know this was a choice.

So, does SVG substitute PNG for everything?

Back in the day vectors couldn't do high quality photos.

I think SVG's are used for logos, graphics, icons and so on. For a camera photo, I think it's better to use something like WEBP, PNG or JPEG.

 

[bartosimpsonio]

Svg can show anything you want (and can even animate anything you want). For example, all of those logos and icons that are made in Adobe Illustrator can also be rendered as an svg instead of png (or other raster formats).

However, for things such as photos; there is a better format called webp (you might already know it because of the pagespeed results).

So, use svg for icons, logos and such stuffs. Use webp for photos and so on.

Thanks mate. Had no idea.

Tho I have noticed that wikipedia turns all svg into png or jpg IIRC? Why?

 

[Gogol]

Tho I have noticed that wikipedia turns all svg into png or jpg IIRC? Why?

Not sure, do they? I think very old people like wikipedia more then (like those still using win 98?) .

To add to this thread, bookmark the following site if you already haven't.

https://materialdesignicons.com/

Has all the icon svgs you will ever need.

 

[Tube Agency]

Not sure, do they? I think very old people like wikipedia more then (like those still using win 98?) .

To add to this thread, bookmark the following site if you already haven't.

https://materialdesignicons.com/

Has all the icon svgs you will ever need.

Thanks for the mentioned website, it will definitely help me out with creating a new website

 

[G]

so SVG is better?

 

[Gogol]

so SVG is better?

Yup coz your icons and logo look sharp in all resolutions including the 4k ones.

 

[ankur0535]

Obviously SVG does the job well, first they can be expand to a greater limit, plus they are small in comparison with PNG. PNG's have greater size while SVG are less. SVG icons remains crisp throughout the website while PNG are of specific size and can get blurred when page expands.

 

[sdc_]

Good old BMP gets my vote

 

[mystralious]

Svg is superior in file sizes and quality. But I have noticed that big wordpress themes are blocking svg for security reasons. There may be some backdoor?

 

[Gogol]

Svg is superior in file sizes and quality. But I have noticed that big wordpress themes are blocking svg for security reasons. There may be some backdoor?

User contributed svg may have XSS code. I don't recommend svg for user generated content. Use SVG for your website's appearance and disallow svg to be uploaded by the user. It's like the same as allowing the user to add html content. Your admin cookie can be hacked, for example.

However, the svg rendered in the clientside (svg is just a bunch of data stored as xml); by the browser itself. It cannot contain a backdoor for example.

 

[Tube Agency]

Svg is superior in file sizes and quality. But I have noticed that big wordpress themes are blocking svg for security reasons. There may be some backdoor?

You can use plugin named SVG Support and then you can use SVG in any Wordpress theme.
Also, I agree with everything @Gogol said.

 

[Luced]

SVG for better zoom. Means if someone opens your website on projector and zoom it, quality of image won't decrease.

 

[Digitly]

Svg for vector and png for pixels