org-modeのHTML変換時のSVGのタグをimgにする

2020年2月6日木曜日

org-mode

t f B! P L
org-modeでSVG画像を埋め込んだテキストをHTMLに変換すると、SVGは通常objectタグで囲まれて出力されます。(確認したemacsのバージョンは26.3、org-modeのバージョンは9.1.9です。) 例えば次のorgファイルは、

#+TITLE: ドキュメントサンプル
#+AUTHOR: 磯野カツヲ
#+OPTIONS: toc:nil
#+OPTIONS: \n:t
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="css/org_mode.css" />

* SVG画像
SVGを表示する。
#+CAPTION: AND
[[./and2.svg]]
HTML出力(Ctrl-c Ctrl-e h o)で次のHTMLに変換されます。SVGはobjectタグのデータとしてHTMLに埋め込まれています。

<div class="figure">
<p><object type="image/svg+xml" data="./and2.svg" class="org-svg">
Sorry, your browser does not support SVG.</object><br />
</p>
<p><span class="figure-number">Figure 1: </span>AND</p>
</div>
SVG表示

imgタグで出力する

しかし、諸事情でSVGをimgタグで出力したい場合があります。このような場合は、"#+ATTR_HTML: :fallback SVGファイル名" をSVG箇所に追加するとimgタグで出力されるようです。

#+TITLE: ドキュメントサンプル
#+AUTHOR: 磯野カツヲ
#+OPTIONS: toc:nil
#+OPTIONS: \n:t
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="css/org_mode.css" />

* SVG画像
SVGを表示する。
#+CAPTION: AND
#+ATTR_HTML: :fallback ./and2.svg
[[./and2.svg]]
HTML出力で次のHTMLに変換されます。

<div class="figure">
<p><object type="image/svg+xml" data="./and2.svg" class="org-svg">
<img src="./and2.svg" class="org-svg" /></object><br />
</p>
<p><span class="figure-number">Figure 1: </span>AND</p>
</div>

正確には、objectタグは元のままで、objectタグの中に書かれていた"Sorry, your browser does not support SVG."という、ブラウザがSVG表示できない時の代替テキスト部分が、imgタグに変わります。でも、この方法はSVGごとにすべて#+ATTR_HTML:を追加する必要があるので、大量のSVGがある場合はorg-modeのHTML出力後に自作のフィルターでobjectタグをimgタグに変換した方が簡単かもしれません。

このブログを検索

ブログアーカイブ

QooQ