About SVG

SVG is a text format and in most cases it will be compressed before network transfer, so do any comparision after gzip (see above).

I advice to choose SVG in most cases bacause of its vector nature. It scales well on any device.

You can insert SVG in DOM, as an image using IMG or place it on background in CSS. When an image is small and is used as decoration it is better to place it in CSS background property as data:uri (https://en.wikipedia.org/wiki/Data_URI_scheme) using URLEncode method (https://en.wikipedia.org/wiki/Percent-encoding).

I use SVGO (https://github.com/svg/svgo) to optimize my images with such parameters:

svgo \-p 2 \-\-multipass \-\-enable=removeDesc \-\-enable=removeTitle \-\-enable=sortAttrs \-\-enable=removeViewBox \-\-enable=removeStyleElement

Typically it is enough.

But if you want to fine-tune SVG image and achieve minimal image size you need "to go deeper". In some cases it is better to "draw" an image in text editor instead of visual one. So I suggest to learn SVG internals, e.g. using this tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

And one more rarery used thing about SVG optimization. Usually SVG has the same dimentions as will be used on web page. In such case vector coordinates may be fractional and it can increase file size. You may scale image to place vector points on pixel grid.

Example:

https://yastatic.net/web4/_/BM4YHAtH2zfvUiPvyhZHMkaXw4w.svg

BTW, you may find an example of xlink usage there but that's not always the best way. Sometimes gzip works better than symbol.

Wikipedia

data URI scheme

Web page in-line data scheme

When you optimizing size keep in mind that final result will be gziped before network transfer. Every comparision must be done after compression.

Let's see an example.

This is a function to detect if browser has SVG support or not:

(function(d,n){d.documentElement.className="ua_svg_"+(d[n]&&d[n]("http://www.w3.org/2000/svg","svg").createSVGRect?"yes":"no")})(document,"createElementNS")

At first look you may consider that this is optimal solution and there is nothing to improve there. We used function, passed repeated parts as one letter params.

We can do better! The code below is bigger (161 bytes versus 157), but after gzip it is smaller (126 bytes versus 154):

document.documentElement.className=document.createElementNS&&document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect?"ua_svg_yes":"ua_svg_no"

And it is easier to read IMHO.

The same for the code which detects retina display:

(function(w,e,s,c,x,l,p,d){c="className";x="deviceXDPI";l="logicalXDPI";p="devicePixelRatio";d=x in s&&l in s&&s[x]/s[l]||p in w&&w[p];d>1&&(e[c]+=" i\-ua_retina_yes")})(window,document.documentElement,screen)

After "de-optimizing" it is smaller and easier to read (191 byte versus 125):

(screen.deviceXDPI&&screen.logicalXDPI&&screen.deviceXDPI/screen.logicalXDPI||window.devicePixelRatio)>1&&(document.documentElement+=" i\-ua_retina_yes")

Notes about web site optimizations, based on my tasks on optimizing Yandex search result page.