読者です 読者をやめる 読者になる 読者になる

びったんびったん

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

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

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

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

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

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

対応策

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