Replace base64 with plain body

[thekondrashov]

At the moment, badges with icons such as these:

… contain svg-logos in the base64-coded form in the attribute of <image /> tag:

<svg xmlns="...">
  <!-- some code -->
  <image xlink:href="data:image/svg+xml;base64,HUGE+DATA"/>
  <!-- some code -->
</svg>

But it is possible to embed one svg-image into another svg-image as plain body. For example:

<svg xmlns="...">
  <!-- some code -->
  <svg><!-- plain body of injected svg --></svg>
  <!-- some code -->
</svg>

Test it with the example in the wild: https://commons.wikimedia.org/wiki/File:English_language.svg
In this case, child svg inherits properties of parent svg, but you can override them:

<!-- now -->
<image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,HUGE+DATA"/>
<!-- will be -->
<svg x="5" y="3" width="14" height="14" viewBox="..."><!-- plain body --></svg>

You even can remove xmlns="http://www.w3.org/2000/svg" attribute from child svg!
Using this tip you can replace the huge base64 code with simple, short and readable plain code.
But of course, it breaks the current algorithm for generating the badges. What do you think?

[espadrine]

That's a very interesting option! We could special-case data:image/svg+xml to include the SVG inline.

[levithomason]

bump

[techtonik]

It is already possible to embed image into tag, just make sure to replace double quotes with single ones. Here I replace gitter logo with appveyor:

https://img.shields.io/gitter/room/nwjs/nw.js.svg?logo=data%3Aimage%2Fsvg%2Bxml%2C%3Csvg+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27+width%3D%2740%27+height%3D%2740%27+viewBox%3D%270+0+40+40%27%3E%3Cpath+fill%3D%27%23FFF%27+d%3D%27M20+0c11+0+20+9+20+20s-9+20-20+20S0+31+0+20+9+0+20+0zm4.9+23.9c2.2-2.8+1.9-6.8-.9-8.9-2.7-2.1-6.7-1.6-9+1.2-2.2+2.8-1.9+6.8.9+8.9+2.8+2.1+6.8+1.6+9-1.2zm-10.7+13c1.2.5+3.8+1+5.1+1L28+25.3c2.8-4.2+2.1-9.9-1.8-13-3.5-2.8-8.4-2.7-11.9+0L2.2+21.6c.3+3.2+1.2+4.8+1.2+4.9l6.9-7.5c-.5+3.3.7+6.7+3.5+8.8+2.4+1.9+5.3+2.4+8.1+1.8l-7.7+7.3z%27%2F%3E%3C%2Fsvg%3E

[techtonik]

More info here - https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

[espadrine]

Should I consider this bug fixed, @thekondrashov?

[paulmelnikow]

Feel free to reopen if you'd like to discuss further.

[MetalArend]

The image as mentioned by techtonik is not working, neither in chrome nor in safari. It shows an error error on line 1 at column 652: Unescaped '<' not allowed in attributes values. Is this a known issue, or was it introduced by a certain change?

[techtonik]

@MetalArend yes, it became broken after some Chrome version (or maybe GitHub?). See #507 (comment) for fixed examples.

[MetalArend]

Cool, thanks! :)