#+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タグに変換した方が簡単かもしれません。