指定しない場合 → 1px が自動適用される
SVG の仕様で、線幅はスケールに影響されません

width/height を変えても stroke-width は変わらない
viewBox を使っても stroke-width は変わらない
transform="scale()" を使っても stroke-width は変わらない
SVG の線幅は常に「画面上のピクセル基準」で描かれる

<line> を <rect> で代用すること自体は技術的には可能で、実際に UI デザインやアイコン制作の現場でも「線を太くしたい」「スケールに応じて線幅も変わってほしい」という理由で使われることがあります。

・viewBox と実際の width/height の比率が違うと、自然にセンタリングされたように見える

・挙動は preserveAspectRatio で自由に変更できる

<link rel="icon" href="data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='red'/></svg>" type="image/svg+xml">

<link rel="icon" href="data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='%23ff0000'/></svg>" type="image/svg+xml">

ポイント：
# → %23
" → %22（属性値の中で使うなら ' で囲むとエスケープ不要になることも）
スペース → %20（気をつけるべきは「属性値の中」と「テキストノードの中」のスペース。それ以外の構文上のスペースは、そのままで大丈夫。）

なので、viewBox='0 0 100 100' の中のスペース
0 0 100 100 → 0%200%20100%20100 にするのが安全！

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 60" style="width:60%; height:auto;"> <rect x="1" y="1" rx="10" ry="10" width="466" height="58" stroke="black" stroke-width="2" fill="khaki"/> <text x="10" y="30" fill="black" font-size="16">ここにテキスト</text> </svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 60" style="width:60%; height:auto;"> <rect x="1" y="1" rx="10" ry="10" width="466" height="58" stroke="black" stroke-width="2" fill="khaki"/> <text x="50%" y="30" text-anchor="middle" fill="black" font-size="18">水平中央テキスト</text> </svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 60" style="width:60%; height:auto;"> <rect x="1" y="1" rx="10" ry="10" width="466" height="58" stroke="black" stroke-width="2" fill="khaki"/> <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="18" fill="black"> 上下中央テキスト </text> </svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 60" style="width:60%; height:auto;"> <rect x="1" y="1" rx="10" ry="10" width="466" height="58" stroke="black" stroke-width="2" fill="khaki"/> <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="18" fill="#222" font-family="Noto Sans JP, sans-serif" font-weight="600"> サンプルテキスト </text> </svg>

<svg xmlns="http://www.w3.org/2000/svg" style="width: 250px; height:auto;" viewBox="0 0 700 370">

「style=」で「height:auto;」を指定。

これは SVG ではありません。「href="data:image/png;base64,～"」は「データURLスキーム」と呼ばれるもので、画像データを直接HTMLやCSSに埋め込むための形式です。

この形式では、「data:」の後にメディアタイプ（この場合は「image/png」）、次にデータのエンコーディング（この場合は「base64」）、そして実際のエンコードされたデータ（この場合は「～」）が続きます。

したがって、このデータURLはPNG画像を表しています。SVGとは異なり、PNGはラスターグラフィックス形式で、ピクセルデータを直接エンコードします。一方、SVGはベクターグラフィックス形式で、画像を数学的な形状とパスで記述します。

移動(translate)
縮尺(scale)
回転(rotate)
傾斜(skew)

/* transformの複数指定の方法 */
transform: scale(0.5, 0.5) rotate(-45deg) translate(-256px,500px);

これ、svgに使えて便利。

/* 左右に反転 */
transform: scale(-1, 1);
/* 上下に反転 */
transform: scale(1, -1);