XHTML とは eXtensible HyperText Markup Language のことで, XML(eXtensible Markup Language) の仕様を HTML の中で使えるように再定義したものです.
一つのマークアップ言語によって書かれたドキュメント内に別の企画のコードを記述するには新たな !DOCTYPE の宣言が必要です. もしも一つのドキュメント内に異なった言語の同じ名前のタグを記述すると衝突が起こり何らかのエラーが生じます. なので DTD(Document Type Definition) を正しく記述しなくてはなりません.
<?xml version="1.0"encoding="UTF-8"?> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/TR/xhtml1"xml:lang="ja"lang="ja"> です(1行目がXMLのバージョンと文字コードの指定). この宣言の次に書類内の記述に対する文字コードの指定も書きます. <meta http-equiv="content-type"content="text/html;charset=UTF-8"/>
<?xml version="1.0"encoding="UTF-8"?> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/TR/xhtml1"xml:lang="ja"lang="ja"> <head> <meta http-equiv="content-type"content="text/html;charset=UTF-8"/> <title>XHTMLの書類タイトル</title> </head> <body> <p>文字列〜</p> </body> </html>
<a> <animate> <animateMotion> <animateTransform> <circle> <clipPath> <color-profile> <defs> <desc> <discard> (en-US) <ellipse> <feBlend> (en-US) <feColorMatrix> <feComponentTransfer> (en-US) <feComposite> (en-US) <feConvolveMatrix> (en-US) <feDiffuseLighting> (en-US) <feDisplacementMap> (en-US) <feDistantLight> (en-US) <feDropShadow> <feFlood> (en-US) <feFuncA> (en-US) <feFuncB> (en-US) <feFuncG> (en-US) <feFuncR> (en-US) <feGaussianBlur> (en-US) <feImage> (en-US) <feMerge> (en-US) <feMergeNode> (en-US) <feMorphology> <feOffset> (en-US) <fePointLight> (en-US) <feSpecularLighting> (en-US) <feSpotLight> (en-US) <feTile> (en-US) <feTurbulence> (en-US) <filter> (en-US) <foreignObject> <g> <hatch> <hatchpath> <image> <line> <linearGradient> <marker> (en-US) <mask> <mesh> <meshgradient> <meshpatch> <meshrow> <metadata> <mpath> <path> <pattern> <polygon> <polyline> <radialGradient> <rect> <script> <set> <solidcolor> <stop> <style> (en-US) <svg> <switch> <symbol> (en-US) <text> <textPath> (en-US) <title> <tspan> <unknown> <use> <view> (en-US)
グラフィック / シェイプ <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>, <mesh>, アニメーション <animate>, <animateColor>, <animateMotion>, <animateTransform>, <discard> (en-US), <mpath>, <set> 構造 / コンテナ / コンテンツ <a>, <defs>, <g>, <marker> (en-US), <mask>, <missing-glyph> (en-US), <pattern>, <svg>, <switch>, <symbol> (en-US), <unknown> <desc>, <metadata>, <title> フィルター <feBlend> (en-US), <feColorMatrix>, <feComponentTransfer> (en-US), <feComposite> (en-US), <feConvolveMatrix> (en-US), <feDiffuseLighting> (en-US), <feDisplacementMap> (en-US), <feDropShadow>, <feFlood> (en-US),<feFuncA> (en-US), <feFuncB> (en-US), <feFuncG> (en-US), <feFuncR> (en-US),<feGaussianBlur> (en-US), <feImage> (en-US), <feMerge> (en-US), <feMergeNode> (en-US), <feMorphology>, <feOffset> (en-US), <feSpecularLighting> (en-US), <feTile> (en-US), <feTurbulence> (en-US) テキスト <altGlyph> (en-US), <textPath> (en-US), <tref> (en-US), <tspan> フォント <font> (en-US), <font-face> (en-US), <font-face-format> (en-US), <font-face-name> (en-US), <font-face-src> (en-US), <font-face-uri> (en-US), <hkern> (en-US), <vkern> (en-US) グラデーション <linearGradient>, <meshgradient>, <radialGradient>, <stop> 光源 <feDistantLight> (en-US), <fePointLight> (en-US), <feSpotLight> (en-US) 非表示 <clipPath>, <defs>, <hatch>, <linearGradient>, <marker> (en-US), <mask>, <meshgradient>, <metadata>, <pattern>, <radialGradient>, <script>, <style> (en-US), <symbol> (en-US), <title> ペイントサーバー <hatch>, <linearGradient>, <meshgradient>, <pattern>, <radialGradient>, <solidcolor> 描画可能要素 <a>, <circle>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol> (en-US), <text>, <textPath> (en-US), <tspan>, <unknown>, <use> 非推奨 / 廃止 <altGlyph> (en-US), <altGlyphDef> (en-US), <altGlyphItem> (en-US), <animateColor><cursor> (en-US), <font> (en-US), <font-face> (en-US), <font-face-format> (en-US), <font-face-name> (en-US), <font-face-src> (en-US), <font-face-uri> (en-US), <glyph> (en-US), <glyphRef> (en-US), <hkern> (en-US), <missing-glyph> (en-US), <tref> (en-US), <vkern> (en-US)
SVG (Scalable Vector Graphics) は XMLベースで記述するテキスト・ファイルで, HTML の中で図形を表示するときに使用します. PNG / JPG のような高解像度に対応した画像ファイルとして利用することも可能で, その特徴はあらゆる情報を画像や図形ではなくテキストとして保存すること(SVGファイルの拡張子は .svg)です.
画像はベクター形式なので Retina のような高解像度ディスプレイで極度に拡大しても鮮明な線と均質な色が保持され, ファイル・サイズは(含まれる画像データによって異なりますが, 通常は)他のファイル形式より小さくなります.
webサイトで直線や曲線を組み合わせて表示するボタン / アイコン / ロゴや, Tシャツなどの衣類プリント用としても利用されています. さらにブラウザで時計の文字盤(針)のような動くイラスト(SVGアニメーション)も表示可能です. SVGは透過やグラデーションにも対応しており, HTML の中で CSS やJavaScript と組み合わせることも可能です.
svg_1600_folder の中に1600種類のSVGファイルが入っていますが, これらは Illustrator などのドロー・ソフトで描いて SVG形式として出力し, そのパス・データを保存したものです(エンコーディングは utf-8 を選択し, Illustrator の編集機能を保持のチェックを外すこと). 単純な図形ならテキストを数行ほど記述することで SVGドキュメント を作成できるので, シェイプと座標 / パスの書き方を知っておくと便利です.
SVGを記述する場合, 最近のブラウザでは宣言を省略して直接 <svg> から書いても最近のブラウザは !DOCTYPE を補正してくれるので目的の図形を表示することが可能です.
SVG は HTML の Clickable Map よりも(shapeなどの)選択肢が増えています. circle: → 円 ellipse: → 楕円 rect: → 四角形 polygon: → 多角形 line: → 直線 polyline: → 連続する直線 path: → パス text: → テキスト image: → ラスタ画像 g: → グループ化 defs, useg: → グループ化の利用 SVGにCSSを適応させる場合 fill: → 塗り fill-opacity: → 塗りの透明度 stroke: → 線 stroke-width: → 線の幅 stroke-opacity: → 線の透明度 stroke-dasharray: → 破線の間隔 stroke-dashoffset: → 破線の開始位置 stroke-linecap: → 線の端 stroke-linejoin: → 線のつなぎ目
_______________
| |
| |
| ______ \ / |
| / \ \ / ___|___
| /_________\ \/ |
| \ /\ |
| \ / \ |
| \ ____/ / \ \__