HTML TIPS&TRICK 2000/11 QUESTION 1

　今回は、Adobeを中心としたメンバーによって提案され、 W3Cによって国際規格となったベクトルデータの SVG 1.0です。
　SVGはXMLによって定義されたベクトルグラフィックデータ記述言語で、スプライン曲線などの高度な表現も可能となっています。XMLベースですから、当然ファイルはプレーンテキストです。よって、OSに付属しているような簡単なエディタでも充分作成可能です。
　XMLはHTMLとは違い、大文字と小文字を区別します。それと、基本的にはUNICODEで記述します。文字コードを記述しておくことで対応できることが望ましいとされてはいますが、あくまでも推薦です。期待はしないほうが良いでしょう。 UNICODEで保存できない場合は、コメントを含めて半角英数のみで記述するようにしてください。

　まずはSVGのソースを見てください。意味と埋め込む方法はその後で説明します。


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">

<svg>
    <defs>
    <!-- styles -->
    <style type="text/css">
    <![CDATA[
        text
        {
            fill:#FF5060;
            font-size:1cm;
            font-weight:bold;
        }

        rect
        {
            fill:#BBA0E0;
            stroke:#AA55AA;
            stroke-width:3;
        }

        ellipse
        {
            fill:#90FF90;
            stroke:orange;
            stroke-width:3;
        }
    ]]>
    </style>
    </defs>

    <rect x="2cm" y="0.5cm" rx="0.3cm" ry="0.3cm" width="4cm" height="2.5cm"/>
    <text x="4cm" y="2.4cm">SVG TIPS & TRICKS</text>
    <ellipse cx="6.5cm" cy="3.3cm" rx="2cm" ry="1cm"/>
</svg>

宣言

　1行目は、このファイルがXMLファイルである宣言です。"standalone"はSVG独自の属性で、純粋にSVGのみのときはno、他のXML言語を含む場合は"yes"になるようです。規格書のサンプルでは、yesのときにはエレメントに対して名前空間"svg"を使用しています。 "no"のときには名前空間はデフォルトで"svg"になるようです。

　2行目はSVGの文書型宣言です。ルートエレメントが"svg"であり、公式の規格であり（PUBLIC）、SVGであり（-//W3C//DTD SVG 20000802//EN）、対応する文書定義ファイルがどこにあるか（http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd）を示しています。

SVG

　4行目の<svg>から最終行の</svg>までが、実際のSVG本体です。この間に表示する図形などのの記述をします。属性として、幅（width）と高さ（height）を指定することも出来ますが、この値はHTMLに埋め込むときの"EMBED"エレメントの属性が優先されます。

参照定義

　5行目の<defs>から29行目の</defs>までは、参照する情報を記述するようです。今回はスタイルの定義のみです。なお、スタイル定義はHTMLのように外部ファイルを指定したり、開始タグに"style"属性として指定することも出来ます。
　8行目に"<![CDATA["という見慣れない記述がありますが、これは27行目の"]]>"と対になっていて、ここにはスタイルやスクリプトなどの記述をします。ここに記述した内容は通常の文字データとして扱われ、XMLとしては特殊な意味になる文字も使用することができます。
　6行目にあるのはコメントです。

図形の記述

　32行目から34行目までが表示する図形の定義です。ここでの順番は、図形が重なったときの順番に影響します。早く定義するほど下になります。では、それぞれ説明していきましょう。

rect

　長方形です。角を丸くすることも出来ます。属性はx, y, width, height, rx, ry の6つです。
　開始タグと終了タグがあるのですが、今回は要素となるものがなかったため、終了タグを簡略した記述にしています。

text

　テキストです。要素の文字列に影響します。属性は、x, y, textLength, lengthAdjust の4つです。

ellipse

　楕円です。属性は、cx, cy, rx, ry の4つです。rectと同様、終了タグを簡略した表記です。

補足

　塗りつぶしの色や枠線の色や幅の指定は、すべてスタイルシートによって設定してあります。今回はCSSによって行いましたが、 XSLでも可能なようです。

HTMLへの埋め込み

　HTMLに埋め込むには、EMBEDエレメントを使って、次のようにします。


<EMBED width="幅" height="高さ" src="埋め込むSVGファイル">

　今回はスタイルシートで設定したので、widthとheightは省略しました。

HTML TIPS & TRICKS 2000/11
SVGの初歩を制する

QUESTION 1　図形と文字を描画せよ！

宣言

SVG

参照定義

図形の記述

rect

text

ellipse

補足

HTMLへの埋め込み

HTML TIPS & TRICKS 2000/11SVGの初歩を制する

QUESTION 1 図形と文字を描画せよ！

宣言

SVG

参照定義

図形の記述

rect

text

ellipse

補足

HTMLへの埋め込み

HTML TIPS & TRICKS 2000/11
SVGの初歩を制する

QUESTION 1　図形と文字を描画せよ！