Embedding a diagram as SVG (made smaller)
Yesterday I showed a diagram embedded into the text. However, the svg description for this diagram contains a lot of content that might be unnecessary. Could I make it smaller?
To give you a taste, this is what the description looks like:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="460px" viewBox="-0.5 -0.5 460 180" style="max-width:100%;max-height:180px;">
<defs/>
<g>
<rect x="0" y="0" width="460" height="180" fill="none" stroke="none" pointer-events="all"/>
<rect x="170" y="10" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 40px; margin-left: 171px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: …
SVGOMG is an interesting tool to help you make the code smaller, but in the end I found the resulting size decrease (roughly 15%) not worth the time.
References
Why are the references not working?