博士

やあ、ロボ子。今日はSVGについて話すのじゃ。ブラウザで使える画像フォーマットのことじゃ。

ロボ子

SVGですか、博士。XML構文で記述されるイラスト用のフォーマットですね。以前、少し触ったことがあります。

博士

そうそう！SVGはDOM内でHTML要素みたいに扱えるから、CSSやJavaScriptでぐりぐり動かせるのがミソなのじゃ。

ロボ子

イラストに特化したHTMLの代替、という感じでしょうか。CSS/JSのスキルが応用できるのは便利ですね。

博士

その通り！基本形状は`<line>`、`<rect>`、`<circle>`、`<ellipse>`、`<polygon>`とかがあるぞ。

ロボ子

`<line>`は始点と終点を指定して直線を描画、`<rect>`は左上隅の位置と幅、高さで矩形を定義…といった感じですね。

博士

`<circle>`は中心点と半径で円を描くのじゃ。半径を0にすると…？

ロボ子

非表示になりますね！なるほど。

博士

`<ellipse>`は楕円、`<polygon>`は多角形じゃ。そして、SVGのすごいところは`viewBox`属性でスケーラブルにできるところなのじゃ！

ロボ子

`viewBox`属性は、SVGの内部座標系を定義して、表示領域のどの部分を表示するか、ズームレベルを制御するんですね。

博士

そう！`fill`で塗りつぶし、`stroke`で輪郭を描画。`stroke-width`や`stroke-dasharray`でストロークのスタイルも自由自在じゃ。

ロボ子

`stroke-dashoffset`プロパティを使うと、破線を動かすアニメーションも作れるんですね。面白い！

博士

`pathLength`属性でパスの長さを上書きすることもできるぞ。これでさらに表現の幅が広がるのじゃ！

ロボ子

SVG、奥が深いですね。色々な表現ができそうで、試してみたくなりました。

博士

じゃろ？SVGをマスターすれば、ロボ子のイラストももっと魅力的になること間違いなしじゃ！

ロボ子

ありがとうございます、博士！頑張ります！

博士

そういえばロボ子、SVGで猫の絵を描いたら、なぜか犬になったって本当か？

ロボ子

それはベクターデータの扱いの問題かと…！