SVG [ scalable vector graphics ]
オリンピックの五輪マークをSVGで描画
- 特徴
- 円の色:左から 青、黄、黒、緑、赤
地の色: 白
- 円の位置: 上に3つ、 それぞれの間の下半分に2つ
- 隣色と重なり部分があり、交互に片方が上書きとなっている
単純に順に輪を塗り重ねると、交互交差にならないので、あとから再度、部分弧を上書きする。
画像検索で出てくる五輪マークの書き方は、ペイント系ツールの使い方説明となっているが、おおむね同様のことをしている。
- 見目よい比率 線の太さを1とすると円の半径は、6~8
- SVGソース text表示: 半径r=140、太さstroke=20 とそている。描画位置は、半径に太さの半分加えた円(半径150)で算出。
※ .txtに 先頭のxmlタグがあると、ブラウザによっては表示エラーになるので、svgタグ内のみです。
- 上記ソースをそのままサイズで表示すると width="980" height="510" と大きくなるので、imgタグで縮小サイズ指定。
imgタグの縦横比率を変えても、内部の絵は、小さい方に合わせて等倍率縮小されます。
そのままサイズで表示