As the creator of the stackoverflow-readme-profile project, I dedicated extensive time and effort to crafting a personalized Stackoverflow profile in the form of an SVG image. Utilizing "native svg tags," I meticulously constructed elements such as:
<svg version="1.1" baseProfile="full" width="300" height="86" viewBox="0 0 300 86" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" style="overflow: visible;">
<rect width="300" height="80" rx="5" ry="5" fill="orange"></rect>
<rect width="140" height="40" x="10" y="20" fill="yellow"></rect>
<rect width="140" height="40" x="150" y="20" fill="blue"></rect>
</svg>➜ JSFiddle
Additionally, by incorporating the <foreignObject> tag, I explored the use of convenient CSS properties such as flexbox for alignment:
<svg version="1.1" baseProfile="full" width="300" height="86" viewBox="0 0 300 86" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" style="overflow: visible;">
<foreignObject width="300" height="80">
<div style="width: 100%; height:100%; border-radius: 5px; background: orange; display: flex; padding: 20px 10px; box-sizing: border-box;">
<div style="width: 100%; background: yellow;"></div>
<div style="width: 100%; background: blue;"></div>
</div>
</foreignObject>
</svg>➜ JSFiddle
This raises the question: is there a significant advantage to using "native" SVG, or was my time investment ultimately misplaced?