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
Nelkinda 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.
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:
- A rim (an outer circle)
- A hub (a filled inner circle)
- 24 spokes
- 24 (half-)circles between the spokes at the inner edge of the rim
The things we need to know about this in terms of the geometry are these:
- The overall radius of the Ashoka Chakra is 46 units.
- The thickness of the outer circle is 6 units.
- The radius of the inner circle is 8 units.
- The thickest point of the spokes is at a distance of 16 units from the center.
- The thickest point of the spokes is to cover 10° angle from the center, leaving ~5° angle gap between two spokes. As this is at 16 units, it means that the width of the thickest point is
10 / 360 * 2 * 16 * π
, which is 2.8. - The spokes are actually quadrilaterals.
- The spokes do not start at the center but at a circle of 2 units from the center.
- The spokes end 2 units from the outer edge of the outer circle.
- As there are 24 spokes, the spokes are 15° apart.
- The half circles between the spokes are right between two spokes, that is, 7.5°.
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.
<?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>
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.
<?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>
Next we make the wheel hollow. For that, instead of using the fill of the circle, we will use a stroke of 6 units.
<?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>
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.
<?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>
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.
<?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>
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.
<?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>
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.
<?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>
Now that we have one pair of spoke and circle, we can group it and repeat it another 5 times, 15° apart.
<?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>
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.
<?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>
Now let's give the Ashoka Chakra its Navy Blue color as it should have in the flag.
<?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>
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.
<?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>
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.
<?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>
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.