css-sizing/sizing-ltr-tb.svg

<svg xmlns='http://www.w3.org/2000/svg' width="420" height="240">

<style>
:root { transform: translate(.5px, .5px); font-size: 18px; }
text,tspan { font-family: sans-serif; text-anchor: middle; fill: currentColor; }
.vertical > tspan { text-anchor: start; }
.text-end text, .text-end tspan { text-anchor: end; }
.text-start text, .text-start tspan { text-anchor: start; }
.size      { color: red; font-weight: bold; }
.direction { color: black; }
</style>

<defs>
	<linearGradient id="direction-hg" x1="0" x2="100%" y1="0" y2="0">
<stop stop-color="black" stop-opacity="1" offset="0" />
<stop stop-color="black" stop-opacity="1" offset=".1" />
<stop stop-color="black" stop-opacity=".2" offset=".25" />
<stop stop-color="black" stop-opacity=".2" offset=".75" />
<stop stop-color="black" stop-opacity="1" offset=".9" />
<stop stop-color="black" stop-opacity="1" offset="1" />
	</linearGradient>
</defs>

<rect fill="white" x="0" y="0" width="100%" height="100%" />

	<g transform="translate(40,60)">
<rect stroke="black" stroke-width="7" fill="#f3f3f3" width="300" height="150" />
		<g class="direction" transform="translate(45, 15)">
			<g>
<path d="M -15 10 h 235 m 1 1" stroke="url(#direction-hg)" stroke-width="3" />
<path d='M 220 10 v -5 l 10 5 l -10 5 v -5' fill="currentcolor" />
<text x="105" y="15">行内方向</text>
			</g>
			<g>
				<g transform="rotate(90)">
<path d="M 0 0 h 110 m 1 1" stroke="url(#direction-hg)" stroke-width="3" />
<path d='M 110 0 v -5 l 10 5 l -10 5 v -5' fill="currentcolor" />
				</g>
				<g>
<text y="60">ブロック</text>
<text y="80">方向</text>
				</g>
			</g>
		</g>


	<g style="color: #444; font-style: italic;" transform="translate(285, 135)" class="text-end">
<text>横組</text>
	</g>
	<g transform="translate(170, 85)">
<text style="font-size: 40px; font-weight: bold; color: #ccc;">English</text>
		</g>
		<g class="size">
			<g transform="translate(150, -30)">
<path d="M -150 18 v -10 h 300 v 10" stroke="currentcolor" stroke-width="3" fill="transparent" />
<text>横幅 = 行内サイズ</text>
			</g>
			<g transform="translate(330, 0)rotate(90)translate(75, 0)">
<path d="M -76 18 v -10 h 150 v 10" stroke="currentcolor" stroke-width="3" fill="transparent" />
<text>縦幅 = ブロックサイズ</text>
			</g>
		</g>
	</g>

</svg>