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