Create a hollowed triangle with SVG

Resume

SVG is a kind of vectorial graphic that allows you to zoom infinitely. And it’s quite popular to use it especially on the Internet.

---

Headings

First of all, we need to have some headings.
The following code a regular heading of a normal SVG file.

<svg height='681', width='2960' xml:lang='en' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
</svg>

Yes, as you can see, SVG is a kind of XML.

---

Draw the triangle with path

In the SVG tag, we can use codes below to draw a triangle.

<path d='M0 681 L2573 681 L1612 0 Z' />

M0 681 means that we move the pen to (0, 681) while (0, 0) is the left top corner of the SVG.
L2573 681 means from (0, 681), we line to (2573, 681). And L1612 0 means simularly.
Z means that we will stop here.

---

Draw a circle with path

---

Finish

Overall, we should have a SVG file like this.

<svg height='681' width='2960' xml:lang='en' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    <g fill-rule='evenodd' fill='rgba(51, 212, 232, 0.8)'>
        <path d='M1353 438 a127 127 0 1 0 254 0 a127 127 0 1 0 -254 0
                M0 681 L2573 681 L1612 0 Z' />
    </g>
</svg>

---

FYI

http://stackoverflow.com/questions/3742479/how-to-cut-a-hole-in-an-svg-rectangle
The link above show the detail of how it works.