トップ頁
先頭
最後
ご質問

図を書け図を!

と、よく言われました。で、今は、言う方に回りました。年功序列です(^_^;。

確かに、ページ一面を文字で埋め尽くされたドキュメントを見せられると、ちょっとげんなりします。

ExcelやWordなら、ドキュメントに図を埋めるのも簡単ですが、今時のIT業界でExcelやWordでドキュメントを作成するなんてことありえないでしょうから(ゴメンナサイ、嘘言いました)、HTMLに図を入れることを考えなければいけません。

このコンテンツでは、下記のような図をHTMLに埋め込む方法について、簡単に解説します。最近流行りのSVGに関する、さわりみたいなものです(^_^)

図1. 一般的なシングルサインオンのシーケンス

HTMLとSVGを融合させる

随分と前になりますが、「HTMLとSVGを融合させる」というコンテンツを作成しました。SVGがここまでメジャーになるとは思わない頃です(なったらいいなあと思っていた頃でもあります)。

最近は、随分メジャーになったので、これを発展させて見ました。

まずは、簡単にSVGを表示してみる

まずは、普通にSVGでなにか描いてみます。以前はXHTMLを使う必要があったので、少々敷居が高かったのですが、HTML5で標準タグとしてサポートされたので、少しだけ簡単になりました。

HTMLにインラインでSVGを埋め込み表示させるには、以下のようにします。

HTMLに直接描画するためのインラインSVG
SVGの要素に指定するCSS

別ファイルとして読み込む場合は、以下のようにします。

外部ファイルによるSVG

外部ファイルのSVGを埋め込むためのHTML

左側の図はimg要素、右側の図はobject要素を使用しています。

実は、SVGにはJavascriptを埋め込めたりするのですが、これが使えるのはobject要素で表示した場合だけのようです。

object要素がどうしても使えないケース以外では、object要素での表示がお勧めです。

外部ファイルのSVG(arrow.svg)

外部ファイルにした場合、HTML内のスタイルは反映されないので(まあ、当たり前ですね)、それぞれの要素にスタイルを指定する必要があります。