SVG vs PNG Format For A Website

Which one is better?

  • .SVG file format

  • .PNG file format

Results are only viewable after voting.
Tube Agency

Tube Agency

Junior Member
Joined
Mar 8, 2019
Messages
163
Reaction score
134
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 :cool:
 
Advertise on BHW
SVG by all means. Unless you are trying to support ie 8 or something, I see no reason to keep using pngs.
 
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.
 
bartosimpsonio said:
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.
Click to expand...
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. :)
 
Gogol said:
SVG by all means. Unless you are trying to support ie 8 or something, I see no reason to keep using pngs.
Click to expand...

That's what I thought. ;)

bartosimpsonio said:
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.
Click to expand...

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.
 
Gogol said:
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. :)
Click to expand...

Thanks mate. Had no idea.

Tho I have noticed that wikipedia turns all svg into png or jpg IIRC? Why?
 
bartosimpsonio said:
Tho I have noticed that wikipedia turns all svg into png or jpg IIRC? Why?
Click to expand...
Not sure, do they? I think very old people like wikipedia more then (like those still using win 98?) . :D

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

Code: 
https://materialdesignicons.com/

Has all the icon svgs you will ever need.
 
Gogol said:
Not sure, do they? I think very old people like wikipedia more then (like those still using win 98?) . :D

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

Code: 
https://materialdesignicons.com/

Has all the icon svgs you will ever need.
Click to expand...

Thanks for the mentioned website, it will definitely help me out with creating a new website ;)
 
so SVG is better?
 
XY said:
so SVG is better?
Click to expand...
Yup coz your icons and logo look sharp in all resolutions including the 4k ones.
 
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.
 
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?
 
mystralious said:
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?
Click to expand...
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.
 
mystralious said:
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?
Click to expand...

You can use plugin named SVG Support and then you can use SVG in any Wordpress theme. :D
Also, I agree with everything @Gogol said.
 
SVG for better zoom. Means if someone opens your website on projector and zoom it, quality of image won't decrease.
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top