星条旗のSVGファイルがスマートで良かった

Wikipediaにあったアメリカ合衆国の国旗である星条旗のSVGファイルがスマートで良かった。特に50個の星のところをgタグを使って効率良く生成してて良かった。

解説付きコード

Flag_of_the_United_States.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1235" height="650" viewBox="0 0 7410 3900">

<!-- 下地の赤 -->
<rect width="7410" height="3900" fill="#b22234"/>

<!-- 白いストライプ 矩形でなくて太い線で -->
<path d="M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0" stroke="#fff" stroke-width="300"/>

<!-- 星をのっける紺の四角 -->
<rect width="2964" height="2100" fill="#3c3b6e"/>

<!-- 星 -->
<g fill="#fff">

    <g id="s18">

        <g id="s9">

            <!--一番左の列の5個の星-->
            <g id="s5">
                <g id="s4">
                    <path id="s" d="M247,90 317.534230,307.082039 132.873218,172.917961H361.126782L176.465770,307.082039z"/>
                    <use xlink:href="#s" y="420"/>
                    <use xlink:href="#s" y="840"/>
                    <use xlink:href="#s" y="1260"/>
                </g>
                <use xlink:href="#s" y="1680"/>
            </g>

            <!--次の列の4個の星-->
            <use xlink:href="#s4" x="247" y="210"/>

        </g>

        <!--まとめて9個の星-->
        <use xlink:href="#s9" x="494"/>

    </g>

    <!--さらにまとめて18個の星-->
    <use xlink:href="#s18" x="988"/>

    <!--9個の星-->
    <use xlink:href="#s9" x="1976"/>

    <!--一番右の列の5個の星-->
    <use xlink:href="#s5" x="2470"/>

</g>

</svg>

星条旗だけじゃなくて他の国旗もだいたいスマートに書かれてる。