CODEWITHSUNDEEP
svgbase64png
user8859973
user8859973

Reputation:

Pros and Cons of using base64, SVG, PNG

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">

Upvotes: 9

Views: 3624

Answers (2)

Muisca
Muisca

Reputation: 153

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.)

enter image description here

Upvotes: 0

Pierre Abreu
Pierre Abreu

Reputation: 1

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

Upvotes: 0

Related Questions