いいよ
i01.svg<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g>
<style type="text/css">
#tx01{
fill: white;
stroke: #333;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
font-weight:900;
}
#f01{
stroke: #333;
stroke-width: 3;
fill-opacity: 0;
}
#f02{
stroke: white;
stroke-width: 2;
fill-opacity: 0;
}
@media (prefers-color-scheme: light) { /* */
/*@media (prefers-color-scheme: dark) { /* */
#tx01{
fill:#333;
stroke:white;
}
#f01{
stroke: #333;
}
#f02{
stroke: white;
}
}
</style>
<rect id="f01" x="5" y="5" width="90" height="90" rx="12" ry="12" />
<rect id="f02" x="7" y="7" width="86" height="86" rx="10" ry="10" />
<text id="tx01" x="8" y="42" font-size="45" letter-spacing="0" word-spacing="0" >
い
</text>
<text id="tx01" x="33" y="70" font-size="40" letter-spacing="0" word-spacing="0" >
い
</text>
<text id="tx01" x="55" y="90" font-size="40" letter-spacing="0" word-spacing="0" >
よ
</text>
}
</g>
</svg>