手書きで SVG を書いてみる実験。以下を参考にしました。
SVG 1.1 (第2版)8 パス
SVG 1.1 (第2版)9 基本図形
コード
<svg width="100px" height="100px"> <rect x="0" y="0" width="100" height="100" fill="none" stroke="Green" stroke-width="2" /> <circle cx="50" cy="50" r="45" fill="yellow" stroke="blue" stroke-width="2" /> <path d="M 50,10 L 84,70 L 16,70 z" fill="red" stroke="Black" stroke-width=3" /> </svg>
結果
手描きは座標を頭で把握しつつ図形を描画…ということになるので、さすがに現実的な作業ではないですが、ちょっとした図形であれば描けそうです。昔の BASIC の LINE 文や CIRCLE 文のノリに近いですね。
Path のメタ言語は xaml の Path.Data に設定するメタ言語と同じ(*1)であるようなので、Blend for Visual Studio で描いて、そのデータを持ち込んでもよいかもしれません。(*2)
(*1) すべて同じかどうかは調べていません。
(*2) ほかに良いエディタはないものか…
あと、Wordpress に持ち込む場合、改行位置に <p> タグや <br> タグが自動付与されて svg として評価されなくなってしまいます。これを回避するために、この記事では svg のデータを <pre> タグで囲んでいます。(もっと良い方法はないのか…?)