コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

きっと何者にもなれない僕だから

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

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

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

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


f:id:andron:20170305220126p:plain
こちらになります
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に直接描きこむやり方だと、複雑な図形やイラストを描くのが辛くなってしまうので、こんなやりかたもあるんだよという感じに捉えていただけるといいかもしれません。複雑な図形やイラストを書きたくなったらどうするか?どうしましょうかね……。

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