コードを描いてお絵描きできるテキストエディタ

SVGをちょこっと試すのに便利なオンラインエディタ

以前に「SVGはCSSを凌駕する可能性を秘めたものだ。ここで叩かねば我が国は敗北を期すことになる。」と言った戯言は言っていたような気がしますが、確認したところそんなことは一言も言っていませんでした。

まあ、そんな話はどうでもいいです。SVGを試すのに便利なオンラインエディタでも紹介しようと思います。

こちらになります
SVG viewer & editor online

はてなはSVGに対応しているっぽいのでそのまま作ったものを貼り付けるだけで、このように画像を載せられます。

ソースコード

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" version="1.1">
   <rect width="500" height="300" x="10" y="10"stroke="black" fill="black"/>
   <rect width="500" height="300" stroke="black" fill="green"/> 
</svg>

これで絵心がなくても絵が描けるね（ない）。
line、rect、circle、ellipseなどの図形を組み合わせて君だけの最強のイラストを描こう。

ちなみにSVGタグには以下のようにな付加情報をつけられるそうですよ。

width	キャンバス幅
height	キャンバス高さ
xmlns	svgの名前空間
viewbox	図形の表示範囲
zoomAndPan	ズーム操作の可否
version	バージョン

もっと複雑なものを描きたいとき

実際、このようにSVGに直接描きこむやり方だと、複雑な図形やイラストを描くのが辛くなってしまうので、こんなやりかたもあるんだよという感じに捉えていただけるといいかもしれません。複雑な図形やイラストを書きたくなったらどうするか？どうしましょうかね……。

次回はそんな解決策について考えたりしていこうと思います。