びったんびったん

ユーザビリティ・プログラミングについて。

インライン SVG がうまく表示されない

インライン SVG というのは HTML に直接記述できる SVG です。こんな感じ。

<body>
    <svg>
        <path />
    </svg>
</body>

そのインライン SVG が HTML 圧縮ツールのせいでうまく表示されませんでした。というのも input タグのような閉じタグのないタグは HTML ではスラッシュがいりません（あってもよい）。そのため HTML 圧縮ツールは文字数を減らすためスラッシュを消していました。

しかし SVG は XML であり XML はスラッシュが必須です。 HTML 圧縮ツールが SVG のスラッシュを消していてうまく表示されなかったのです。

対応策

HTML 圧縮ツールを使わない。
HTML 圧縮ツールにスラッシュを消させないようオプションを設定する。
SVG を外部ファイルにして読み込む。
CSS に SVG を記述する。