www.tenman.info

SVG Memo

small logo
画像:SVG Samples より

SVG

あなたのブラウザから、この蝶が見えますか?

Adobe SVG プラグインがインストールされてると蝶が見えます。

SVGは、テキスト (XML形式)で、タグを使用して塗りつぶしや線などが記述出来るドローマークアップで、Jpegやgifファイルから比べると、人間でも理解が可能な記述になる。

UTF-8の文字コードを使えば、日本語も表現できる。
ブラウザ互換性に問題があったり、プラグインが必要だったり躊躇するが、「使えると良いなぁ、」とどこか隅っこのほうで記憶にとどまる手法。

部屋を整理していると、時々見つかる。「あぁっ、これこれ。」と言うヤツのように、何かの拍子で見つけると、そのディレクトリにしばし留まる。

page top

このドキュメントの目的

SVGを既に知っている人のために。

Adobeは、SVGビューア提供やめてしまうという話もありつつ、FireFoxやOperaなどでプラグインがなくても閲覧できるようになってきた。しかし、意外とコンパチブルじゃない。どのブラウザでも閲覧できるような記述の仕方を試してみた。

xhtmlへの直接埋め込みも試してみた。

SVGって何?という人のために。

文字で、画像を書いちゃう事のできる、すごい技の事。もちろん、文字も書くことが出来て、このやり方で書くと、ズームしたりドラッグできる文字が書けたりします。
このページ内にあるコードを実際に試す時には、windowsなら、スタート>全てのプログラム>アクセサリ>メモ帳を開いて、コードをコピペして、名前をつけて保存で、文字コードは、UTF-8で保存して欲しい。もちろんInternet ExplorerならAdobeSVGビューアをインストールしないと見えませんよ。

SVGは、閲覧の為にプラグインを必要とするものの、XML形式で表現可能な為、サーバスクリプトによる自動描画などを実行する時には、検討しやすい方法の一つであると言える。WEBサーバ上で、画像を作成したり、編集したりする方法は、GDなどもあるが、結果として、描画するものが同じでも、XMLで記述する点は、他の方法と大きく異なった性質と言える。

クライアントサイドの方法としては、ブラウザ特有の拡張タグ等を使って、文字列に、影をつけたり背景のグラデーションを作ったりといった方法もあるが、ここでは触れない。ただ、SVGは、サーバサイドのスクリプト連携だけでなく、javascriptも容易に連携できる。

どんな事ができて、どんな事ができないのか、「コレクションした、サンプルや散乱しているファイルを少しづつでも整理し始めることができるといいな。」と考えた。

現実に耐えうるように身につけようと思っても、ブラウザ依存を完全にぬぐう事はできそうもない。また、W3Cのような標準化団体の公開するドキュメントタイプや仕様書であっても、必ずしも全てのブラウザで実装された機能と言う事にならないので、トライアンドエラーで進めるしかない。この事をを忘れるとひどい目にあうこともある。

page top

とにかく書いてみる

よくきたね と書いてみる。

<svg width='200' height='50'>
<text x='40' y='40' style="font-family:'MS Pゴシック', Osaka, 'ヒラギノ角ゴ Pro W3';font-size:24;fill:#000000">よくきたね</text>
</svg>

さて、これでうまく行くだろうか?下のスナップショットを確認する。

svgをブラウザで表示したスナップショット
※ fontfamilyの指定ご注意ください。

サンプルのような記述をしていたら、Firefox2ブラウザで表示させようとすると、パースエラーになりました。

font-family="MS-Mincho"と指定でFirefox2ブラウザでも表示できるようになります。
但し、サンプルの記述では、Firefox2ブラウザは、SVGとして受け取っていないので、xmlとしてなら、受け入れてくれるけれど、SVGとしてならエラーを返してきます。
また、font-family="MS-Mincho"と指定をInternet Explorerと、Firefoxなどで比べて表示できれば、両方で見比べてみてください。 Firefox2ブラウザのほうでは、フォントスタイルが適用されていませんでした。

調べてみたところ、SVGで日本語を表示できるフォントがこれだけ見つかりました。きっともっとあるんだと思いますが、、、BatangやGulimを使うと、日本語が表現でき、また、Firefox2ブラウザ Internet Explorer両方で字体が反映するようです。
未検証:Arial Unicode MS LucidaSansUnicode も使えそうだ。ユニコードフォントを使えばいいのかも、、、とりあえずリンクWAZU JAPAN's Gallery of Unicode Fonts
※SVGファイルを直接表示する時、Internet Explorerは、SVGのサイズが大きい場合でもスクロールバーが表示されません。
windows:altキーを押しながら、ドラッグしてください。svgファイル上で右クリックで表示されるコンテキストメニューからズームインやズームアウトすることも出来ます。
※adobeSVG
Internationalization

To put characters other than ISO-8859-1 into an SVG graphic, you need to use the correct Unicode character values. They can be entered directly, using a Unicode-enabled editor or they can be typed as numeric character references. For example: ᄢ (This is a Korean character.) The Adobe SVG viewer supports US-ASCII, ISO-8859-1, UTF-16, and UTF-8 encodings. For example:

SVGグラフィックにISO-8859-1以外の文字を入れるために、あなたは、正しいユニコード文字指定をする必要があります。 ユニコードが使えるエディタを使用して、直接入力、または数値文字参照としてそれらをタイプすることができます。 例えば: #x1122(これはハングル文字です。)

AdobeのSVGビューアーは米国-ASCII、ISO-8859-1、UTF-16、およびUTF-8 encodingsをサポートします。

2007 3 5 発掘

webmaster

page top

正しく表示させるのは簡単ではなさそうだ。

ブラウザの違いから、キャンバス(ディスプレイ)への表示が全く異なると、閲覧するのに大きな支障になるので、使えない。これは記述方法で、回避可能なものなのだろうか?あるいは、基本的な記述に間違いがあって、汎用性にかけるものになっているのか確認してみる事にする。

ごく標準的な知識をまず身につけていたいので、W3CというWEB標準化団体の、Scalable Vector Graphics (SVG) 1.1 Specification 仕様書の邦訳で学ぶ事にする。

StandAlone01.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Four separate rectangles </desc>
<rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
<rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
<rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
<rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>


<!-- Show outline of canvas using 'rect' element -->
<rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
fill="none" stroke="blue" stroke-width=".02cm" />


</svg>

文書構造 上記のソースは、このURLからコピーしたもの。

  • L1:xml宣言
  • L2:文書型宣言
  • L3:svgタグ xhtmlなら、htmlと言うタグが記述されるところだが、記述はhtmlによく似ている。
  • L4descタグ desc要素は、htmlのdescriptionにあたる。このソースには、記述されていないが、title要素も使う事ができるようだ。svgは、描画をする。文書を作るhtmlとは、異なり、描画の断片等にタイトルやdescが直接表示されるようなことはなく、ツールチップのような形で表現されるような要素のようだ。
  • rectタグ 四角という意味なのだろう。 xy width height アトリビュートhtmlを書く人なら、感覚的にわかるだろう。
  • コメントもhtmlと同じでいける。
  • 更に外枠と思われる。四角を描画する。
  • svgの終了タグで、文書は終了する。

このようにみて見ると、大雑把には、xhtmlとよく似ている。

page top

手を抜かず正しく書くようにして試してみる。

Internet Explorer Firefox2ブラウザ 手元にあるこのブラウザで正常な表示の得られる表現を探した。

xml宣言を行い文書型宣言を行い。礼儀正しいSVGを作成してどうなるかを見てみた。

よくきたね2 と書いてみる。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width='200' height='50'>
<text x='40' y='40' style="font-size:24px;fill:#000000" >よくきたね</text>
<!--font-family:'MS Pゴシック', Osaka, 'ヒラギノ角ゴ Pro W3';と指定するとFirefox2ブラウザは、白紙の画面を正常なソースつきで表示する-->
</svg>

スタイルの指定が、影響している。xml宣言を行わなかった時には、Firefox2ブラウザは、単純なxml文書としてしか見ていなかったのが、
やっとこれで、Firefoxはsvgと言う目で見ることになったと思われる。
スタイルの記述に誤りがあったのかどうかは、更に、svgとして適切な指定なのかどうかを、前出の文献に当たって調べてみようと思う。
しかし、大雑把に見ると、ブラウザ間で隔たりがあることがわかる。

page top

xhtmlドキュメントへ埋め込んで、Internet Explorer Firefox2ブラウザで表示できる方法を探す。

意外と手間がかかるSVGの現実的な魅力はどこにあるのだろうか?

xhtmlの中に、文字列を記述するように、グラデーションや、画像や図表を、同時に記述できれば、htmlドキュメントとは別に、画像を管理する必要もなく、また、スクリプトによる動的な表現と、その編集の自動化がとても簡単になるだろうと思う。

iframe object tagを使ったhtmlへの埋め込み

htmlにiframeなどのタグを使って埋め込む方法は、簡単で、実用的な方法。
はやく、背景スタイルなどに、SVGを使う事ができるようになるといいですね

xhtmlに直接svgファイルを埋め込み。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="base.css" media="all" />


<title>SVG embedded inline in XHTML</title>
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" urn="http://www.w3.org/2000/svg" implementation="#AdobeSVG"?>
</head>
<body>
<svg:svg width="400px" height="300px" version="1.1"
xmlns = 'http://www.w3.org/2000/svg'>
<svg:defs>
<style type="text/css">
<![CDATA[
@font-face {
font-family: 'Super Sans';
font-weight: normal;
font-style: italic;
src: url("myfont.svg#Font2") format(svg)
}
]]>
</style>
</svg:defs>
<svg:text x="100" y="100"
style="font-family: 'Super Sans'; font-weight:normal;
font-style: italic">Text using referenced font</svg:text>


</svg:svg>
</body>
</html>

PHPでSVGを作ってみる。

PHP SVG

Zend Sample SVG Pie Chart Zend

svg graph

※ Firefox2ブラウザで表示させた場合ここに、蝶が表示されているかもしれませんが、なぜなのか、勉強不足の私にはわかりません。本当は、グラフを表示するつもりだったのですが、、、。

 PEAR::Image_GraphライブラリでSVG
page top

Another Way

PHP イメージ関数を使う

画像を作ったり、グラフを描画する方法は、多くの種類がある。配列を読み込んで、Flashで表示するグラフや、PHPスクリプトで、画像を出力する事もできる。データの読み込みが、xmlであったとしても、パスしてやればいいという観点から、PHP+GDの組み合わせによる簡単なサンプルを、表示する。

※ GDは、jpg,png,gif等の画像を生成したり合成したり出来るが、画像内にリンクを張ったりする事はできません。

PHP イメージ関数

円グラフ

スマイル

Flashで読み込む

xmlファイルを用意しておいて、そのファイルを読み込んで、フラッシュの挙動を変更する方法は広く使われている。

配列を読み込んだグラフ

上記のFlashグラフは、以下の配列を読み込んで表示しているといる例です。

$chart[ 'axis_category' ] = array ( 'size'=>10, 'color'=>"FFFFFF", 'alpha'=>75, 'font'=>"arial", 'bold'=>true, 'skip'=>0 ,'orientation'=>"diagonal_up" );
$chart[ 'axis_ticks' ] = array ( 'value_ticks'=>true, 'category_ticks'=>true );
$chart[ 'axis_value' ] = array ( 'alpha'=>90, 'orientation'=>"horizontal" );

$chart[ 'chart_border' ] = array ( 'top_thickness'=>0, 'bottom_thickness'=>3, 'left_thickness'=>3, 'right_thickness'=>0 );
$chart[ 'chart_data' ] = array ( array ( "","9","10","11","12","13","14","15","16","17","18","19","20","21","22" )
, array ( "H15 6",25000, 57000, 64000, 63000, 70000, 80000, 81000, 67000, 57000, 64000, 60000, 50000, 32000, 15000 )
, array ( "H16 6",25000, 57000, 64000, 71000, 72000, 80000, 75000, 63000, 55000, 54000, 52000, 50000, 25000, 15000 )
, array ( "H17 6",20000, 40000, 50000, 60000, 70000, 70000, 73000, 70000, 70000, 71000, 74000, 70000, 35000, 15000 )
, array ( "H18 6",25000, 55000, 72000, 70000, 72000, 75000, 75000, 72000, 72000, 72000, 65000, 50000, 30000, 20000)
, array ( "H15 7",25000, 42000, 56000, 61000, 63000, 65000, 65000, 60000, 52000, 54000, 55000, 50000, 35000, 20000)
, array ( "H16 7",25000, 50000, 70000, 70000, 75000, 75000, 72000, 70000, 70000, 65000, 60000, 50000, 35000, 20000)
, array ( "H17 7",25000, 50000, 70000, 70000, 75000, 75000, 72000, 70000, 70000, 65000, 60000, 50000, 35000, 20000)
, array ( "H18 7",20000, 40000, 55000, 60000, 70000, 70000, 65000, 60000, 55000, 60000, 51000, 41000, 30000, 10000)
, array ( "H15 8",20000, 40000, 58000, 65000, 62000, 67000, 65000, 62000, 51000, 53000, 55000, 50000, 35000, 15000)
, array ( "H16 8",20000, 45000, 63000, 57000, 63000, 63000, 74000, 66000, 55000, 57000, 54000, 46000, 34000, 20000)
, array ( "H17 8",25000, 50000, 55000, 65000, 62000, 62000, 70000, 65000, 60000, 50000, 46000, 40000, 25000, 10000)
, array ( "H18 8",15000, 40000, 45000, 55000, 65000, 65000, 60000, 56000, 55000, 60000, 50000, 32000, 20000, 10000)
);
$chart[ 'chart_grid_h' ] = array ( 'thickness'=>1, 'color'=>"000000", 'alpha'=>20 );
$chart[ 'chart_grid_v' ] = array ( 'thickness'=>1, 'color'=>"000000", 'alpha'=>20 );
$chart[ 'chart_rect' ] = array ( 'x'=>15, 'y'=>-65, 'width'=>425, 'height'=>300, 'positive_alpha'=>20 );
$chart[ 'chart_pref' ] = array ( 'rotation_x'=>20, 'rotation_y'=>40 );
$chart[ 'chart_transition' ] = array ( 'type'=>"blink", 'delay'=>.5, 'duration'=>1, 'order'=>"series" );
$chart[ 'chart_type' ] = "parallel 3d column" ;
$chart[ 'chart_value' ] = array ( 'color'=>"000000", 'background_color'=>"ffff00", 'alpha'=>90, 'size'=>12, 'position'=>"cursor" );

$chart[ 'legend_label' ] = array ( 'layout'=>"horizontal", 'font'=>"arial", 'bold'=>true, 'size'=>12, 'color'=>"000000", 'alpha'=>50 );
$chart[ 'legend_rect' ] = array ( 'x'=>25, 'y'=>250, 'width'=>350, 'height'=>50, 'margin'=>20, 'fill_color'=>"000000", 'fill_alpha'=>7, 'line_color'=>"000000", 'line_alpha'=>0, 'line_thickness'=>0 );

$chart[ 'series_color' ] = array ("ff8844","88ff00" );
$chart[ 'series_gap' ] = array ( 'bar_gap'=>50, 'set_gap'=>50) ;

SendChartData ( $chart );
		

MIME Type 許容判定

VMLで我慢しておく

GoogleMaps APIで、ポリラインを引く説明には、VMLが登場しますね。

ベクトルマークアップ言語(VML)邦訳

VML Sample

とほほのVML入門

VML 脆弱性 2007年1月18日

リンク
PDFにする

一昔前なら、自分でPDFの書き方を勉強して、、、

PDF作成 APIサービスも提供される時代になりました。

TRYNT PDF Web Service

tenman.infoでは、実験的にこのTRYNT PDF Web Serviceサービスを使ってみています。

YouTube API TESTのPDFという文書がこのサービスで作成した文書です。

最近は、ブログ等WEB上で編集を完了してしまうケースが多いと思います。サーバ上で編集した時に、編集完了に合わせてPDFを更新という作業が、PDFの仕様を知らなくても簡単に書けるので、便利です。ただ、レスポンスが悪かったり、他人の管理するサイトなので、いつ終わるかわからないといった事もあります。事前に想定した上で使う必要があると思います。