Replace holder.js with inline SVG data URI

Created by: m5o

Hey 👋

After starting discussions in #27395 (closed) and #27491 this is a POC to test the possibilities to replace holder.js library with a pure SVG solution which doesn't require a 3rd party library.

I've tried to create a minimal XML markup, with a background cover and centered text. After studying Optimizing SVGs in data URIs the output is the plalceholder.svg jekyll include in this PR. What's your opinion?

Proposal optimized minimum XML markup

<svg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 200 150'>
  <rect fill='#777' width='100%' height='100%' />
  <text fill='#ddd' x='50%' y='50%' font-family='Helvetica,monospace' font-size='13' dominant-baseline='central' text-anchor='middle'>Placeholder Text</text>
</svg>

💡 The SVG markup was improved after inspiration and tipps from @MartijnCuppens

previous XML markup generated by `holder.js`

<svg width="640" height="250" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 250" preserveAspectRatio="none">
  <defs>
    <style type="text/css">#holder_1670738e3a9 text { fill:rgba(255,255,255,.75);font-weight:normal;font-family:Helvetica, monospace;font-size:32pt } </style>
  </defs>
  <g id="holder_1670738e3a9">
    <rect width="640" height="250" fill="#777"></rect>
    <g>
      <text x="238.15625" y="139.85">640x250</text>
    </g>
  </g>
</svg>

⌨️ Tasks

• use jekyll includes to create inline SVG with data URI
• replace data-src="holder.js/" with jekyll holder.html include
• remove holder.js workaround in example.html

📖 References

• https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
• https://codepen.io/jakob-e/pen/doMoML
• https://css-tricks.com/probably-dont-base64-svg/

🔗 Discussions

• https://github.com/twbs/bootstrap/pull/27491 – Revert "Remove custom example plugin."
• https://github.com/twbs/bootstrap/issues/27395 – example.html doesn't replace the whole holder.js line

---

Fixes #27395 (closed), closes #27491