どうも！LSSです！！
このブログの「HTMLなど」カテゴリでは、HTML・CSS・JavaScriptについて色々試したり書いたりしてきました。
PHPなどサーバ側で使われる技術は別として、ブラウザ上で処理される技術としてはこの３つが三本柱だと認識しています。
ですが、それ以外にもブラウザ上で表現できる（かつテキストベースの）技術は他にも「SVG」や「WebGL」などがあります。
今回は、そのうち「SVG」にちょっとだけ手を出してみました。
初めて描いたSVG
青空、お日様、草原！
この程度ならCSSでも描けそう、というのは置いておいて、とりあえずできました^^
コード
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<circle cx="230" cy="70" r="40" fill="red"></circle>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
</svg>
このコードを、はてなブログのHTML編集画面に
コピペしても、表示されませんｗ
「え？なんで？」と思い、HTML編集画面に戻ると、貼り付けたコードがごっそり勝手に消されています^^;;;
んじゃ、どうするのかというと、
「コードの前後に［］を半角文字で挿入する」
事で、はてなブログの「勝手にコード削除」を回避する事ができます。
こういう感じですね。
ここは、はてなブログ特有の話になります。
なお、改行も勝手に詰められて一行になります。
コード解説
まず一行目。
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 320 400">
<svg>タグで全体を囲む事になります。
ここから最後の行の
</svg>
までが「ここからここまでが、SVGの記述ですよ」って事になります。
その一行目のうち、
xmlns="http://www.w3.org/2000/svg"
は、多分お作法的なものでしょう。
削ってもちゃんと表示されます。（初めてなので一応入れておきました）
width="300" height="400"
これは他のHTMLタグのオプションと同じですね。
「幅300ピクセル、高さ400ピクセル」の枠をSVG描画用に使う、という意味になります。
viewbox="0 0 300 400"
描画した画像のうち、「一番左上の座標（0 0）から一番右下の座標（300 400）までを切り出して表示します」という意味になります。
これ、後からJavaScriptとかで制御できたら、画像スクロールになりそうなところですね^^
次に２行目。
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
rect、はSVGで四角形を描く時に使います。
x="0" y="0"
で「四角形を書き始める座標(四角形の左上の角の位置)は右に0、下に0の位置」であるという宣言です。
そこから、
width="300" height="400"
「幅は300、高さは400」と指定しているので、これで四角形の位置・大きさが決まります。
最後、
fill="lightblue"
で「水色（lightblue）で塗りつぶす（fill）」と指定しています。
で、３行目。
<circle cx="230" cy="70" r="40" fill="red"></circle>
circle、はSVGで円を描く時に使用します。
cx="230" cy="70"
で、枠の左上から「右に230、下に70」の位置を円の中心に指定しています。
r="40"
円の半径を「40」に指定。
これで、円の位置・大きさが決まりますね。
fill="red"
rectの時と同様に「赤（red）で塗りつぶす（fill）」という指定になります。
ラスト、４行目。
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
は、２行目と同じ<rect>ですねｗ
今度は、位置を「右に0 下に300」を左上の角とし、「幅300 高さ100」の四角形を「黄緑（yellowgreen）」で塗りつぶす、という指定にしています。
まとめると
「300×400の枠」にまず「枠と同じサイズの水色四角」を描き、「右上に赤丸」を描き、「下の部分を横幅いっぱいの黄緑四角」を描く。
…という指定で、
↑こういう画像の完成となります^^
あとがき
CSSやJavaScriptも、HTMLの中に書く事もできれば別ファイルにして呼び出す事も出来ます。
今回の「SVG」もまた、こうしてHTMLの中にも書けますし、別ファイルにして呼び出す事もできます。
別ファイルにした場合、HTMLからは「画像ファイル」として扱えるのが面白いところですね^^
中身はテキスト（文字）なので、画像編集ソフトがなくても（内容をよく分かっていれば）テキストエディタでの修正も効きそうです。
…もちろん、今回のような簡単な画像だと容易ですが、何千・何万という文字数になるようなSVGファイルだと現実的じゃない話になりますがｗｗｗ
また、今回はごくごく簡単な機能のみ使用しましたが、他に直線を引いたり、曲線を描いたり、文字を入れたり、グラデーションを使ったり、といった機能もSVGは備えています。
そのあたりはCSSでもできそうですが、「曲線に沿って文字を配置」なんて事までできるらしく、そこまでいくと「SVGならではな領域」になってきますね。
今のところ、あまり深入りする予定ではないのですが、CSSやJavaScriptと連携できる、ってあたりが気になっていますｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
