くりすますかんぱがきてくれたよ!なので
<svg version="1.1" width="140" height="230" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title> Tree crowned with Star </title> <defs> <radialGradient id="back_grad" cx="70" cy="40" r="60" gradientTransform="scale(1 2)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="white"/> <stop offset="1" stop-color="grey" stop-opacity="0"/> </radialGradient> <g id="back"> <rect width="140" height="230" fill="black"/> <rect width="140" height="230" fill="url(#back_grad)"/> </g> <linearGradient id="linear_grad" x1="250" y1="20" x2="240" y2="70" gradientUnits="userSpaceOnUse"/> <linearGradient id="leaf_grad" xlink:href="#linear_grad"> <stop offset="0" stop-color="lime"/> <stop offset="1" stop-color="black" stop-opacity="0"/> </linearGradient> <linearGradient id="trunk_grad" xlink:href="#linear_grad"> <stop offset="0" stop-color="brown"/> <stop offset="1" stop-color="black" stop-opacity="0"/> </linearGradient> <path id="triangle" d="m 0 0 -110 0 55 -90 z"/> <use id="leaf" xlink:href="#triangle" style="fill:url(#leaf_grad);"/> <use id="trunk" xlink:href="#triangle" style="fill:url(#trunk_grad);"/> <path id="star" d="m 0 0 8 -16 8 16 -18 -12 20 0 z" fill="yellow"/> <radialGradient id="tamayura_grad" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="white" stop-opacity="0.7"/> <stop offset="1" stop-color="white" stop-opacity="0"/> </radialGradient> <circle id="tamayura_snow" r="1" fill="url(#tamayura_grad)"/> </defs> <g stroke="none"> <use xlink:href="#back"/> <use xlink:href="#trunk" transform="translate(88 210) scale(0.35 1)"/> <use xlink:href="#leaf" transform="translate(120 180)"/> <use xlink:href="#leaf" transform="translate(120 150)"/> <use xlink:href="#leaf" transform="translate(120 120)"/> <use xlink:href="#leaf" transform="translate(108 80) scale(0.75)"/> <use xlink:href="#star" transform="translate(59 21)"/> <use xlink:href="#tamayura_snow" transform="translate(40 180) scale(15)"/> <use xlink:href="#tamayura_snow" transform="translate(50 142) skewX(-17) scale(17)"/> <use xlink:href="#tamayura_snow" transform="translate(90 190) scale(10)"/> <use xlink:href="#tamayura_snow" transform="translate(110 200) scale(12)"/> <use xlink:href="#tamayura_snow" transform="translate(100 150) scale(12)"/> <use xlink:href="#tamayura_snow" transform="translate(10 150) skewX(-10) scale(13)"/> <use xlink:href="#tamayura_snow" transform="translate(30 110) skewX(-10) scale(9)"/> <use xlink:href="#tamayura_snow" transform="translate(20 200) skewX(-10) scale(14)"/> <use xlink:href="#tamayura_snow" transform="translate(80 90) skewX(-15) scale(18)"/> <use xlink:href="#tamayura_snow" transform="translate(120 90) scale(4)"/> <use xlink:href="#tamayura_snow" transform="translate(110 100) scale(7)"/> <use xlink:href="#tamayura_snow" transform="translate(30 70) skewX(-20) scale(12)"/> <use xlink:href="#tamayura_snow" transform="translate(110 50) scale(4)"/> <use xlink:href="#tamayura_snow" transform="translate(100 35) scale(3)"/> <use xlink:href="#tamayura_snow" transform="translate(112 15) scale(3)"/> <use xlink:href="#tamayura_snow" transform="translate(103 13) scale(2)"/> <use xlink:href="#tamayura_snow" transform="translate(35 30) scale(3)"/> <use xlink:href="#tamayura_snow" transform="translate(20 24) scale(3)"/> <use xlink:href="#tamayura_snow" transform="translate(33 19) scale(2)"/> </g> </svg>
Firefoxで確認しながらテキストエディタでSVGを手打ちしてざっくりとお絵描き。
つまり、テキストエディタで絵を書く。
テキストエディタとビュアを一緒に立ち上げおいてお絵描きというパターンは、
PostScriptの手書きでもやっていて、この感覚は楽しい。
絵の各要素をdefsの中で用意しておき、useでアフィン変換して配置していく、という描き(書き?)方。
面積的には大したことのない丸を配置する部分だけで全体量の4割以上を占めているのはベクタデータの弱点だ。
大雑把なので全体としては手間も時間もほとんどかかってないけれど、
丸っこいのを一個ずつスケーリングとスキューと平行移動で調整するのがちょっと面倒だった。
適当に幅を持たせたパラメータで自動生成したものを多く用意して、
ビュアで見ながら取捨選択するとかの方が楽だったのかも。
手書き感覚は減りそうだけど。
残念ながらはてなダイアリーではSVG関連のタグは使えないので、rsvgでPNG形式に変換したものを貼り付けた。
タグが使えたとしてもブラウザ側がインラインSVG対応でないと見られないのだが。
OBJECTタグやEMBEDタグを使うとウエブページの文書と別リソースでSVGを用意しないといけない、
手元のブラウザ環境はこの手の埋め込みオブジェクトをデフォルトで表示させないようにしているので自分が面倒、
そして、何にせよこれらのタグもはてなダイアリーでは使用できない。