google
cowbell.svg includes a lot of unnecessary stuff
This is an interesting project, but to make a better case against the size of SVG, your cowbell.svg example should probably be more representative of how it should be used for final-form delivery.
For example, it has the following style attribute on a path element:
color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none;text-decoration-style:solid
I'm not even sure what tool would put those there - text properties on a path?? But also I think each of them is the default value anyway.
Many of the elements have an unnecessary id attribute.
The file also defines the rdf namespace, the creative commons namespace, and the dc namespace - none of which are used in the content.
Maybe it should be run through some optimisation tool before being used as an example?
(Side note: the actual transfer size of the SVG is about 2.7Kb)
e.g. removing the unnecessary stuff and putting it through https://jakearchibald.github.io/svgomg/ the SVG gets to about 1.5Kb.
Note: I do think a simplified vector format is really useful, and I'm not defending SVG here. I just think your comparison is a bit misleading.
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 48 48"><defs><radialGradient id="b" cx="71.06" cy="5.83" r="17.48" gradientTransform="matrix(.34064 .17827 -.52334 1 0 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#edd400"/><stop offset="1" stop-color="#fce94f"/></radialGradient><radialGradient id="a" cx="42.37" cy="26.1" r="17.3" gradientTransform="matrix(.38415 .04762 -.1234 1 0 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#edd400"/><stop offset="1" stop-color="#fce94f"/></radialGradient><linearGradient id="c" x1="32.26" x2="29.69" y1="39.5" y2="29.58" gradientUnits="userSpaceOnUse"><stop stop-color="#392100"/><stop offset="1" stop-color="#0f0800"/></linearGradient></defs><path fill="url(#a)" d="m5.67 17.97.26-4.4L19.4 33.33l.3 8.3z"/><path fill="url(#b)" d="M19.3 33.48 5.68 13.8l3.84-2.68.1-2.12 4.7-2.26 2.99 1.12 4.56-1.42L42.59 22.7z"/><path fill="#fdee747f" d="M19.29 32.85 5.69 13.77l4-2.84.17-2.03 1.91-.87L30.6 27z"/><path fill="#c4a000" d="M19.21 40.06s-.2-2.3-.2-3.63v-2.4l-2.5-3.77S5.06 13.05 6.84 15.5c.32.45 1.7 2.12 2.18 2.66.5.53 1.36 1.7 1.92 2.6 2.28 3.61 8.23 12.05 8.4 12.05.1 0 10.4-5.32 11.3-5.67.89-.36 11.25-4.55 11.45-4.35.5.51 1.26 7.47.76 8.08-.4.48-5.06 3.68-10.26 6.13s-11.98 4.26-12.6 4.26c-.41 0-.63-.33-.78-1.22"/><path fill="url(#c)" d="M19.83 33.65c.42-.68 10.1-5.36 10.99-5.76s9.88-4.12 10.46-4c.52.1.85 6.01.55 6.7-.23.52-8.44 4.98-9.52 5.52-1.22.62-11.64 4.7-12.14 4.37-.55-.37-.7-6.25-.34-6.83"/><path d="m21.98 5.88-4.86 1.46-2.56-1.2-5.33 2.58-.02.3-.1 1.86-4.18 2.74.37 4.6.05.1s3.24 5.8 6.59 11.65c1.67 2.93 3.36 5.86 4.69 8.1a104 104 0 0 0 2.22 3.55l.2.26c.07.07.08.13.27.22.27.13.39.07.55.05l.55-.1c.42-.11.96-.28 1.58-.48 1.25-.4 2.83-.98 4.4-1.56 3.11-1.16 6.14-2.36 6.14-2.36l.03-.01.02-.02s2.54-1.35 5.13-2.8c1.29-.72 2.59-1.46 3.6-2.07a28 28 0 0 0 1.68-1.1c.1-.1.2-.14.3-.33.16-.29.14-.48.15-.79s.02-.68 0-1.1c-.02-.86-.09-1.92-.17-2.95-.16-2.07-.37-4.04-.37-4.04l-.02-.21zm-.2 1.1 20.16 15.77c.02.19.2 1.86.35 3.8.08 1.03.14 2.08.17 2.9v1.03c-.02.26-.1.48-.04.36.06-.1.02-.03-.05.04s-.2.14-.35.25l-1.21.76c-1 .6-2.3 1.34-3.58 2.06a402 402 0 0 1-5.09 2.78 249 249 0 0 1-10.45 3.89 24 24 0 0 1-1.93.54l-.1-.13-.52-.77s-.99-1.6-1.65-2.7a565 565 0 0 1-4.69-8.08S6.33 18 6.28 17.92l-.3-3.79 4.1-2.69.12-2.08 4.37-2.1 2.47 1.14z"/></svg>
Relatively optimized. 2337 bytes (gzip: 1127 bytes). IconVG is still 43% of the size raw and 83% of the size gzipped.
