NELKINDA SOFTWARE CRAFT

Developing the Flag of India in SVG

TL;DR: This blog article describes how to develop a flag of India in SVG, including the Ashoka Chakra in the center.

Author:
Christian Hujer, CEO / CTO at Nelkinda Software Craft Pvt Ltd
First Published:
by NNelkinda Software Craft Private Limited
Last Modified:
by Christian Hujer
Approximate reading time:

1 The Goal

The goal is to have a flag of India, including the Ashoka Chakra in the middle.

Flag of India
Figure 1-1: The goal - the flag of India

2 The plan

The most difficult part of the flag is the Ashoka Chakra, rendered in navy blue in the middle. Luckily, Wikipedia has a good construction sheet that describes how to create the Ashoka Chakra. There are also several videos and other material on the internet for how to create and draw the Ashoka Chakra. All we need to do is translate the construction sheet to SVG.

2.1 The Ashoka Chakra

The Ashoka Chakra basically consists of 50 parts:

The things we need to know about this in terms of the geometry are these:

2.2 Other Information

According to Wikipedia, the flag of India has an aspect ratio of 3:2. Its horizontal bands are equally sized and have the colors India saffron (Pantone 130 U, #FF9933), white, and green (Pantone 2258C, #138808). The color of the Ashoka Chakra is Navy Blue (Pantone 2735 C, #000080). The size of the Ashoka Chakra is, depending on the size of the flag, between 0.25% and 0.311% of the entire flag.

3 The Steps

3.1 The Ashoka Chakra

3.1.1 The Rim

So we'll start with the Rim of the Ashoka Chakra. Our canvas starts out as a square of size 92×92. On that, we put a circle with radius 46.

a circle, not centered
Figure 3-1: Step 1 - a circle, but not centered
<?xml version="1.0"?>
<!DOCTYPE svg>
<svg
    xmlns="http://www.w3.org/2000/svg"
    width="92"
    height="92"
    version="1.1"
    viewBox="0 0 92 92"
>
    <circle r="46"/>
</svg>
Listing 3-1: Source code of Step 1 - a circle, but not centered

As we can see, the circle was put in the top left corner. We could change the center of the circle to be at P(46, 46). But there's a smarter way. We want to lay out the Ashoka Chakra from its center. So we move the center of the coordinate system to the center of the Ashoka Chakra.

a circle, centered
Figure 3-2: Step 2 - a circle, centered
<?xml version="1.0"?>
<!DOCTYPE svg>
<svg
    xmlns="http://www.w3.org/2000/svg"
    width="92"
    height="92"
    version="1.1"
    viewBox="-46 -46 92 92"
>
    <circle r="46"/>
</svg>
Listing 3-2: Source code of Step 2 - a circle, centered

Next we make the wheel hollow. For that, instead of using the fill of the circle, we will use a stroke of 6 units.

the rim, but at the edges
Figure 3-3: Step 3 - a rim, cut at the edges
<?xml version="1.0"?>
<!DOCTYPE svg>
<svg
    xmlns="http://www.w3.org/2000/svg"
    width="92"
    height="92"
    version="1.1"
    viewBox="-46 -46 92 92"
>
    <circle r="46" stroke-width="6" stroke="#000" fill-opacity="0"/>
</svg>
Listing 3-3: Source code of Step 3 - a rim, cut at the edges

That almost works. However, when using strokes, we have to keep in mind that SVG strokes are half inside, half outside of the edge of the object. If you think of it, this makes a lot of sense. So we have to subtract half of the stroke width from the radios of the wheel.

the rim
Figure 3-4: Step 4 - a rim
<?xml version="1.0"?>
<!DOCTYPE svg>
<svg
    xmlns="http://www.w3.org/2000/svg"
    width="92"
    height="92"
    version="1.1"
    viewBox="-46 -46 92 92"
>
    <circle r="43" stroke-width="6" stroke="#000" fill-opacity="0"/>
</svg>
Listing 3-4: Source code of Step 4 - a rim

3.1.2 Hub

The rim is done, except for the 24 half-circles. However, we will do those together with the spokes as they repeat the same way as the spokes. So now, let's do the hub. Easy, that's simply a circle of radius 8.

the rim and the hub
Figure 3-5: Step 5 - the hub
<?xml version="1.0"?>
<!DOCTYPE svg>
<svg
    xmlns="http://www.w3.org/2000/svg"
    width="92"
    height="92"
    version="1.1"
    viewBox="-46 -46 92 92"
>
    <circle r="43" stroke-width="6" stroke="#000" fill-opacity="0"/>
    <circle r="8"/>
</svg>
Listing 3-5: Source code of Step 5 - the hub

3.1.3 Spokes and circles

The 24 circles on the inner edge of the rim are exactly between the spokes, with the center being exactly on the inner edge of the rim. That means, their centers are 15° apart from each other, or 7.5° from the center of a spoke.

the rim, hub, and half circle
Figure 3-6: Step 6 - a half circle
<?xml version="1.0"?>
<!DOCTYPE svg>
<svg
    xmlns="http://www.w3.org/2000/svg"
    width="92"
    height="92"
    version="1.1"
    viewBox="-46 -46 92 92"
>
    <circle r="43" stroke-width="6" stroke="#000" fill-opacity="0"/>
    <circle r="8"/>
    <circle r="2" cy="40" transform="rotate(7.5)"/>
</svg>
Listing 3-6: Source code of Step 6 - a half circle

The spoke is a polygon that starts within the hub at half the hub's radius and ends in the rim at one third of the width of the rim.

the rim, hub, half circle, and one spoke
Figure 3-7: Step 7 - a spoke
<?xml version="1.0"?>
<!DOCTYPE svg>
<svg
    xmlns="http://www.w3.org/2000/svg"
    width="92"
    height="92"
    version="1.1"
    viewBox="-46 -46 92 92"
>
    <circle r="43" stroke-width="6" stroke="#000" fill-opacity="0"/>
    <circle r="8"/>
    <circle r="2" cy="40" transform="rotate(7.5)"/>
    <polygon points="0,4 1.4,16 0,42 -1.4,16"/>
</svg>
Listing 3-7: Source code of Step 7 - a spoke

Now that we have one pair of spoke and circle, we can group it and repeat it another 5 times, 15° apart.

the rim, hub, and the half circle and spokes repeated for one quarter
Figure 3-8: Step 8 - repeating the spokes
<?xml version="1.0"?>
<!DOCTYPE svg>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="92"
    height="92"
    version="1.1"
    viewBox="-46 -46 92 92"
>
    <circle r="43" stroke-width="6" stroke="#000" fill-opacity="0"/>
    <circle r="8"/>
    <g id="spoke">
        <circle r="2" cy="40" transform="rotate(7.5)"/>
        <polygon points="0,4 1.4,16 0,42 -1.4,16"/>
    </g>
    <use xlink:href="#spoke" transform="rotate(15)"/>
    <use xlink:href="#spoke" transform="rotate(30)"/>
    <use xlink:href="#spoke" transform="rotate(45)"/>
    <use xlink:href="#spoke" transform="rotate(60)"/>
    <use xlink:href="#spoke" transform="rotate(75)"/>
</svg>
Listing 3-8: Source code of Step 8 - repeating the spokes

Of course, I could have just copied the spoke and the circle. The idea of repeating them by reference instead of copy comes from software engineering. Should I have to make a correction to anything, I still have to change only one place.

And we can group that again, and repeat it another 3 times, 90° apart, to have a total of 24 spokes for the complete wheel.

The complete Ashoka Chakra
Figure 3-9: Step 9 - complete Ashoka Chakra
<?xml version="1.0"?>
<!DOCTYPE svg>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="92"
    height="92"
    version="1.1"
    viewBox="-46 -46 92 92"
>
    <circle r="43" stroke-width="6" stroke="#000" fill-opacity="0"/>
    <circle r="8"/>
    <g id="quarter">
        <g id="spoke">
            <circle r="2" cy="40" transform="rotate(7.5)"/>
            <polygon points="0,4 1.4,16 0,42 -1.4,16"/>
        </g>
        <use xlink:href="#spoke" transform="rotate(15)"/>
        <use xlink:href="#spoke" transform="rotate(30)"/>
        <use xlink:href="#spoke" transform="rotate(45)"/>
        <use xlink:href="#spoke" transform="rotate(60)"/>
        <use xlink:href="#spoke" transform="rotate(75)"/>
    </g>
    <use xlink:href="#quarter" transform="rotate(90)"/>
    <use xlink:href="#quarter" transform="rotate(180)"/>
    <use xlink:href="#quarter" transform="rotate(270)"/>
</svg>
Listing 3-9: Source code of Step 9 - complete Ashoka Chakra

Now let's give the Ashoka Chakra its Navy Blue color as it should have in the flag.

The Ashoka Chakra in Navy Blue
Figure 3-10: Step 10 - change the color of the Ashoka Chakra to Navy Blue
<?xml version="1.0"?>
<!DOCTYPE svg>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="92"
    height="92"
    version="1.1"
    viewBox="-46 -46 92 92"
    stroke="#008" stroke-width="0" fill="#008"
>
    <circle r="43" stroke-width="6" fill-opacity="0"/>
    <circle r="8"/>
    <g id="quarter">
        <g id="spoke">
            <circle r="2" cy="40" transform="rotate(7.5)"/>
            <polygon points="0,4 1.4,16 0,42 -1.4,16"/>
        </g>
        <use xlink:href="#spoke" transform="rotate(15)"/>
        <use xlink:href="#spoke" transform="rotate(30)"/>
        <use xlink:href="#spoke" transform="rotate(45)"/>
        <use xlink:href="#spoke" transform="rotate(60)"/>
        <use xlink:href="#spoke" transform="rotate(75)"/>
    </g>
    <use xlink:href="#quarter" transform="rotate(90)"/>
    <use xlink:href="#quarter" transform="rotate(180)"/>
    <use xlink:href="#quarter" transform="rotate(270)"/>
</svg>
Listing 3-10: Source code of Step 1 - change the color of the Ashoka Chakra to Navy Blue

3.2 The Flag

Next, we need to change our canvas to accommodate the entire flag, with the Ashoka Chakra in the center. So we just move the entire Ashoka Chakra into a group. The size of the flag canvas is chosen as 450×300. That way, the Ashoka Chakra with 92 units fits perfectly in the middle with ratio 0.307. For a screen representation for which the actual size will not be known, this should be the perfect ratio.

The Ashoka Chakra sized and positioned at the center for the flag
Figure 3-11: Step 11 - move the Ashoka Chakra into the center
<?xml version="1.0"?>
<!DOCTYPE svg>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="900"
    height="600"
    version="1.1"
    viewBox="0 0 450 300"
>
    <g transform="translate(225 150)" stroke="#008" stroke-width="0" fill="#008">
        <circle r="43" stroke-width="6" fill-opacity="0"/>
        <circle r="8"/>
        <g id="quarter">
            <g id="spoke">
                <circle r="2" cy="40" transform="rotate(7.5)"/>
                <polygon points="0,4 1.4,16 0,42 -1.4,16"/>
            </g>
            <use xlink:href="#spoke" transform="rotate(15)"/>
            <use xlink:href="#spoke" transform="rotate(30)"/>
            <use xlink:href="#spoke" transform="rotate(45)"/>
            <use xlink:href="#spoke" transform="rotate(60)"/>
            <use xlink:href="#spoke" transform="rotate(75)"/>
        </g>
        <use xlink:href="#quarter" transform="rotate(90)"/>
        <use xlink:href="#quarter" transform="rotate(180)"/>
        <use xlink:href="#quarter" transform="rotate(270)"/>
    </g>
</svg>
Listing 3-11: Source code of Step 11 - move the Ashoka Chakra into the center

And finally, let's add the colored bands. We need to insert the bands before the Ashoka Chakra, else the white band would hide the Ashoka Chakra.

The complete flag of India with tricolor bands and Ashoka Chakra
Figure 3-12: Step 12 - add the bands
<?xml version="1.0"?>
<!DOCTYPE svg>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="900"
    height="600"
    version="1.1"
    viewBox="0 0 450 300"
>
    <rect width="450" height="100" fill="#ff9933"/>
    <rect width="450" height="100" fill="#ffffff" y="100"/>
    <rect width="450" height="100" fill="#138808" y="200"/>
    <g transform="translate(225 150)" stroke="#008" stroke-width="0" fill="#008">
        <circle r="43" stroke-width="6" fill-opacity="0"/>
        <circle r="8"/>
        <g id="quarter">
            <g id="spoke">
                <circle r="2" cy="40" transform="rotate(7.5)"/>
                <polygon points="0,4 1.4,16 0,42 -1.4,16"/>
            </g>
            <use xlink:href="#spoke" transform="rotate(15)"/>
            <use xlink:href="#spoke" transform="rotate(30)"/>
            <use xlink:href="#spoke" transform="rotate(45)"/>
            <use xlink:href="#spoke" transform="rotate(60)"/>
            <use xlink:href="#spoke" transform="rotate(75)"/>
        </g>
        <use xlink:href="#quarter" transform="rotate(90)"/>
        <use xlink:href="#quarter" transform="rotate(180)"/>
        <use xlink:href="#quarter" transform="rotate(270)"/>
    </g>
</svg>
Listing 3-12: Source code of Step 12 - add the bands

That's it!

4 Conclusion

You should notice something about the final SVG file. This level of quality cannot be achieved with tools like Inkscape. This is not to say that Inkscape is a bad tool. However, tools have to operate on universal coordinate systems. Tools do not understand the geometric intent of a designer, like ratios and angles.

5 A Final Note

Flags are serious business. Flags of nations represent huge numbers of people. They must be treated with corresponding respect. I hope that while building the flag in SVG, I have done all due diligence and created the flag correctly. Should you know of any mistake, please get in touch with me, so I can correct it immediately.