SVGのtext-anchor問題に61箇所対応して挫折し、Beautiful Mermaidに移行した話

朝9時にSVG図の修正を始めて、夕方5時にSVGを全削除した。8時間かけて辿り着いた結論が「捨てる」だった日の記録。

Googlebot 2MB HTML制限の記事を書いた

2026年3月31日、GoogleのGary Illyesが公式ブログで「Inside Googlebot: demystifying crawling, fetching, and the bytes we process」を公開した。Googlebotがクロールするファイルサイズに明確な上限があることを、Google自身が初めて体系的に語った記事だ。

HTMLは非圧縮で最初の2MBまでしか取得されない。2MBを超えた部分はインデックスされない。

この情報を受けて、自サイト全記事のHTMLサイズを調査した。結果、2MB超えの記事はゼロ。現時点では問題なしと確認できた。ただし、長大な記事を書く場合は意識する必要がある。

詳細はGooglebot 2MB制限の記事にまとめた。

Claude Codeソースコード流出事件の調査

3月31日に発生したClaude Codeのソースコード流出事件を追った。複数のメディアが報道しており、npm publishのミスで内部コードが一時的に公開状態になったとされている。Claude Codeの内部プロンプトやアーキテクチャの一部が露出した。

ユーザーとして利用している以上、何が漏れて何が影響するのかは把握しておく必要がある。調査結果から、直接的なセキュリティリスクは限定的と判断した。

CPE研修記事の作成

会計士向けの倫理研修の内容を記事化した。Google Docsに残っていた文字起こしデータを読み取り、7つのテーマに構造化して1本の記事に仕上げた。

作業の流れは以下の通り。

Google Docsから文字起こしデータを取得
話の流れを整理し、7テーマに分割（マインドセット、NOCLAR、独立性、テクノロジー、タックスプランニング、サステナビリティ、グループ監査）
各テーマにテーブルと図を配置
SVG図を6枚作成 ← ここで地獄が始まる

詳細はCPE研修の記事にまとめた。

SVG図の試行錯誤と挫折

CPE記事にフロー図やタイムラインを入れるため、インラインSVGで図を作り始めた。ここから泥沼に嵌まった。

問題1: text-anchor属性がMDXパーサーに消される

MDXのパーサーがSVGのtext-anchor属性を認識せず、レンダリング時に属性ごと消えた。text-anchor="middle"が効かないので、テキストの中央揃えが全く機能しない。

<!-- MDXパーサーが text-anchor を消す -->
<text x="100" y="50" text-anchor="middle">テーマ1</text>
<!-- ↓ レンダリング結果: text-anchor が消えて左寄せになる -->

問題2: 日本語テキストがviewBoxの幅を超える

英語フォントの幅で設計したviewBoxに日本語テキストを入れると、文字が右端からはみ出す。viewBoxを広げると今度はレイアウト全体が崩れる。

61箇所修正して、まだ溢れる

text-anchorの問題を回避するため、各テキスト要素のx座標を手動で計算し直した。修正箇所は61箇所。1つずつ座標を調整して、ブラウザで確認して、また直して。

61箇所を直し終えて画面を確認した。まだ溢れていた。日本語テキストの幅がフォントによって変わるため、別の環境では再び崩れる。根本的に解決していない。

SVG全削除を決断

8時間格闘した末、インラインSVGでの図表管理はMDX環境では現実的でないと判断した。全SVGファイルを削除するコミットを書いた。

捨てる判断が一番難しかった。「61箇所も直したのだから」というサンクコストが頭にちらついた。だが壊れた基盤の上に積み上げても、次の記事でまた同じ問題が再発する。

Beautiful Mermaidへの移行

SVGを捨てた後、代替手段としてBeautiful Mermaidを導入した。Mermaid記法で図を定義し、事前にSVGファイルを生成して、記事からは画像として参照する方式だ。

仕組み

Mermaid定義（テキスト）
  → beautiful-mermaid（CLIツール）
    → SVGファイル生成
      → 記事から ![alt](./diagram.svg) で参照

ポイントは事前生成であること。MDXのパーサーを通さずに済むので、text-anchor問題は発生しない。生成されたSVGは静的ファイルとして配置するだけ。

6つの図を移行

CPE研修記事の図を全てMermaid定義に書き直し、SVGを再生成した。

タイムライン図（研修テーマの適用状況）
基準策定フロー（IESBA → JICPA → 会員）
NOCLAR対応フロー
独立性の変遷
タックスプランニングの分類
全体サマリー

各図はdiv style="text-align:center"で中央寄せして配置した。

<div style="text-align:center">

![研修テーマの適用状況](./timeline.svg)

</div>

学んだこと

MDX環境でインラインSVGを使うと、パーサーとの相性問題が避けられない
事前生成方式なら、SVGの中身をパーサーが触らないので安全
Mermaid記法はテキストベースなので、Gitでの差分管理も効く
「直す」より「仕組みを変える」方が速いケースがある