Pros and Cons of using base64, SVG, PNG

Question

What are the Pros and Cons of using each of these?

For example, would it be possible to say which one loads the fastest?

Is one resolution, image quality better than the other?

data:image/svg+xml;base64

<img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg==''>

VS.

SVG

 <svg viewBox="0 0 1226 1481" >
  <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="#0059dd"/>
 </svg>

VS.

PNG

 <img src="https://i.imgur.com/Z3AgRDe.png"> 

Doublestop

Answer 1

One of the most issue with Base64 is size, increase almost 30% about the original image size.

Galyak

A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. Answers that are little more than a link may be deleted. – Phosphorate

Answer 2

SVG base 64

1. Excellent image resolution
2. 100% Vector Graphic
3. Save a request to the server
4. Size larger than normal SVG
5. You can change the color, borde, etc. appearance of the object after loaded
6. Base64 is generally larger (30%) than the original.
7. SVG can included inside. Scripts, animations, filters, Masks, Clipping, etc.

SVG

1. Excellent image resolution
2. 100% Vector Graphic
3. NOT Save a request to the server
4. You can change the color, borde, etc. appearance of the object after loaded
5. SVG can included inside. Scripts, animations, filters, Masks, Clipping, etc.

PNG

1. Optimum size, for a given resolution.
2. Loss of quality when being resized.
3. NOT Save a request to the server
4. You CAN NOT change the color, borde, etc. appearance of the object after loaded.
5. The most popular image format. Millions of images available.

I am a fan of SVG, in fact I am developing a web application that creates, edits and modifies SVGs. In fact, the image that I show is made on an SVG object. To which more objects are added (box, text, circles, etc.)

Aircool

You can't access style properties in svgs embedded via data URLs (whether it's base64 or escaped/url-encoded). Related question: Can SVG <use xlink> be used in a CSS background-image? – Diathermic