Vectors or PNGs?

PenguinManiac

New member
Joined
Jun 27, 2017
Messages
200
Points
0
What image file format is the most convenient between vectors (.svg) and standard images (.png) to design page elements for a website? I know that vector images can be cropped with no quality loss, but they're also harder to create, especially if your icons contain multiple colors or shading. I'm also not sure how well they can work with spritesheets, which I prefer because it's an easy way to cut down on loading times.
I'd expect to see bigger websites with professional designers use more .svg files, but most of them only use PNGs. Are they effectively the most convenient format?
 

luispas

New member
Joined
Jun 27, 2017
Messages
21
Points
0
I rather the PNG format and it's the one that I use the most, but I have to admit that the SVG of vector is really good because you can expand or reduce the images and it will always have a good quality, it's very flexible and it also allow you to extract the background, in other words, make a render.
It's hard to choose one, I just say what I normally use, and that's PNG.
 

Marc van Leeuwen

Premium Member
Joined
May 29, 2016
Messages
1,132
Points
63
What image file format is the most convenient between vectors (.svg) and standard images (.png) to design page elements for a website?
I almost used png for my websites because it supported transparent background
I don't know about .svg file and not sure websites can display this type of file or not?

I'd expect to see bigger websites with professional designers use more .svg files, but most of them only use PNGs. Are they effectively the most convenient format?
I see png format works better on websites because it can be used for your logo or where you need a transparent background, but you also should consider using jpg images if you are tending to use them for your websites because jpg can be better than png because its optimized and help you decrease file size pretty much.
 

PenguinManiac

New member
Joined
Jun 27, 2017
Messages
200
Points
0
PenguinManiac
I only use JPEG for backgrounds, pictures and all those images for which quality loss can be easily overlooked.
SVG does support transparent background, and they can also be manipulated with CSS (you can change their color, for instance, although I'm not sure if there's anything else that can be done). However, I'm coming to the conclusion that PNGs are the way to go, the difference in quality can be quite noticeable.

Oh, and thanks for the replies!
 

tim_cloudcone

New member
Joined
Jul 22, 2017
Messages
41
Points
0
I usually use PNG in almost all cases except for icons. PNGs have really good quality and the file sizes can be reduced to an acceptable amount with proper compression.

But I use SVG for icons as SVGs are created in XML, which is a markup language and the elements on an SVG can be easily manipulated with CSS. You can do things like changing colors when hovering over it or even using the CSS transform property to scale, rotate or change the position of it. This is so much useful when creating small animations for icons.

I'm not sure about sprite sheet support on SVG though. But a quick Google search showed that it's possible by defining all the SVG illustrations in a single .svg file by using multiple <defs> tags.

Edit: You can't have the SVG in a separate .svg file if you want to add CSS styling to it. You need to have the SVG code embedded into the HTML.
 

PenguinManiac

New member
Joined
Jun 27, 2017
Messages
200
Points
0
PenguinManiac
That would explain why I always had trouble to manipulate them (I knew you could, but I never used it myself), thanks! I also didn't know they were created in XML, I guess that explains what makes them so powerful compared to other image formats.
Even if you lose those transforming features while using a spritesheet, they could still be useful for logos, icons and whatnot. Still, I don't think .svg files take up so much space to justify the creation of a spritesheet (even though it's still better to avoid sudden loading artifacts).
 

tim_cloudcone

New member
Joined
Jul 22, 2017
Messages
41
Points
0
tim_cloudcone
True, most svg files won't take that much space unless it's a complex illustration.

But another reason why people use spritesheets is to reduce the number of requests sent to the web server and optimize the loading speed of the page. For an example let's say you have a 100 different svg files for 100 icons on your web page. Then, each time someone visits your web page, their web browser will have to request those 100 files one by one from the web server. If you have a lot of visitors on your website or if your web server is slow, it might take some time for your web page to completely load.

So ultimately, I think the front-end developer will have to make the decision whether to use spritesheets or use individual files. If you're working on a real website and if it has a lot of image files for icons and if you want to optimize it to load faster, go with a spritesheet. If not you can just use individual files.
 

PenguinManiac

New member
Joined
Jun 27, 2017
Messages
200
Points
0
PenguinManiac
Yup, that's what I was talking about. The only occurrences in which I'd go with individual images over spritesheet is for larger files (e.g. headers) or with images that require complex animations/special effects through image layering. It becomes kind of compilcated to keep track of the background-position values for every image in the long run, especially if you need to move it around for animation purposes. As for smaller icons strewn over the websites, there is no reason not to go with spritesheets.
 
Older threads
Replies
2
Views
4,861
Replies
22
Views
9,058
Replies
14
Views
4,598
Replies
0
Views
2,033
Newer threads
Replies
2
Views
2,426
Replies
2
Views
8,977
Replies
22
Views
5,604
Similar threads
Replies
2
Views
3,530

Referral contests

Referral link for :

Sponsors

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top