svg訓練場
参照しよう：svg要素の基本的な使い方まとめ
c.svg<svg width="250" height="250" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,0 200,50 200,150 100,200 0,150 0,50" stroke="#e74c3c" fill="none" />
</svg>
<path> ver.
左縦線がやや細いのは、x<0の領域に線幅がはみ出ているため
もう少し余白をとると、きれいに表示される
全体を
width="250" height="250" に変更した拡大率調整で直るんだ
viewBox 外のものは拡大率をいじっても描画されないと思っていたが……svgなにもわからない
c2.svg<svg width="200" height="200" viewBox="0, 0, 173.2, 200" xmlns="http://www.w3.org/2000/svg">
<path d="m86.6,0 86.6,50v100L86.6,200 0,150V50Z" stroke="#e74c3c" fill="none" />
</svg>
pathなるもので指定ができるのか～
ここがくわしい
文字数減るかと思ったが、そうでもなかった
c3.svg<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 1.732 2">
<path d="M0.866,0l0.866,0.5v1L0.866,2 0,1.5V0.5Z" stroke="#e74c3c" fill="none" stroke-width="0.01"/>
</svg>
ここでの技術をもとに全合体した
s5.svg<svg width="500" height="500" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100" fill="#5c89c0"/>
<rect x="100" y="0" width="100" height="100" fill="#9cbce3"/>
<rect x="200" y="0" width="100" height="100" fill="#e4d7b5"/>
<rect x="300" y="0" width="100" height="100" fill="#6e733b"/>
<rect x="0" y="100" width="100" height="100" fill="#6e733b"/>
<rect x="100" y="100" width="100" height="100" fill="#5c89c0"/>
<rect x="200" y="100" width="100" height="100" fill="#9cbce3"/>
<rect x="300" y="100" width="100" height="100" fill="#e4d7b5"/>
<rect x="0" y="200" width="100" height="100" fill="#e4d7b5"/>
<rect x="100" y="200" width="100" height="100" fill="#6e733b"/>
<rect x="200" y="200" width="100" height="100" fill="#5c89c0"/>
<rect x="300" y="200" width="100" height="100" fill="#9cbce3"/>
<rect x="0" y="300" width="100" height="100" fill="#9cbce3"/>
<rect x="100" y="300" width="100" height="100" fill="#e4d7b5"/>
<rect x="200" y="300" width="100" height="100" fill="#6e733b"/>
<rect x="300" y="300" width="100" height="100" fill="#5c89c0"/>
</svg>
圧縮ver.
s6.svg<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 4 4">
<path fill="#5c89c0" d="m0,0v1h1v-1z"/>
<path fill="#9cbce3" d="m1,0v1h1v-1z"/>
<path fill="#e4d7b5" d="m2,0v1h1v-1z"/>
<path fill="#6e733b" d="m3,0v1h1v-1z"/>
<path fill="#6e733b" d="m0,1v1h1v-1z"/>
<path fill="#5c89c0" d="m1,1v1h1v-1z"/>
<path fill="#9cbce3" d="m2,1v1h1v-1z"/>
<path fill="#e4d7b5" d="m3,1v1h1v-1z"/>
<path fill="#e4d7b5" d="m0,2v1h1v-1z"/>
<path fill="#6e733b" d="m1,2v1h1v-1z"/>
<path fill="#5c89c0" d="m2,2v1h1v-1z"/>
<path fill="#9cbce3" d="m3,2v1h1v-1z"/>
<path fill="#9cbce3" d="m0,3v1h1v-1z"/>
<path fill="#e4d7b5" d="m1,3v1h1v-1z"/>
<path fill="#6e733b" d="m2,3v1h1v-1z"/>
<path fill="#5c89c0" d="m3,3v1h1v-1z"/>
</svg>
繰り返しパターンがあるから、もっと圧縮できそう
これもpathで指定しているのね
圧縮してみっか
colorful.svg<svg width="200" height="200" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg">
<!--2-->
<path fill="#ded2ff" d="m5,4v1h1v-1z"/>
<!--3-->
<path fill="#72b87b" d="m5,3v1h1v-1z"/>
<!--5-->
<path fill="#fff74d" d="m3,3v1h1v-1z"/>
<!--7-->
<path fill="#a5bfe0" d="m3,5v1h1v-1z"/>
<!--11-->
<path fill="#29ecd2" d="m6,4v1h1v-1z"/>
<!--13-->
<path fill="#5c89c0" d="m6,2v1h1v-1z"/>
<!--17-->
<path fill="#f9c3c7" d="m2,2v1h1v-1z"/>
<!--19-->
<path fill="#878687" d="m2,4v1h1v-1z"/>
<!--23-->
<path fill="#ddd7dc" d="m4,6v1h1v-1z"/>
<!--29-->
<path fill="#f4eda2" d="m7,3v1h1v-1z"/>
<!--31-->
<path fill="#88cc88" d="m7,1v1h1v-1z"/>
<!--37-->
<path fill="#c5955c" d="m1,1v1h1v-1z"/>
<!--41-->
<path fill="#91c5d8" d="m1,5v1h1v-1z"/>
<!--43-->
<path fill="#4a4a4a" d="m1,7v1h1v-1z"/>
<!--47-->
<path fill="#938e91" d="m5,7v1h1v-1z"/>
<!--53-->
<path fill="#4a2a15" d="m8,4v1h1v-1z"/>
<!--59-->
<path fill="#0063b1" d="m6,0v1h1v-1z"/>
<!--61-->
<path fill="#50a5e6" d="m4,0v1h1v-1z"/>
<!--67。ここから「番外」-->
<path fill="#ff00da" d="m0,2v1h1v-1z"/>
<!--71-->
<path fill="#fce905" d="m0,6v1h1v-1z"/>
<!--73-->
<path fill="#2c690f" d="m0,8v1h1v-1z"/>
<!--79-->
<path fill="#3ab0c2" d="m6,8v1h1v-1z"/>
</svg>
できたー
わーい
ラヴニカのギルドの色を再現したい
ギルド紋を作るのは大変すぎるため
もうここから溢れ出しているため、各ページにて訓練いたす所存
方針
2023-08-12 11:09