緣由:在網頁設計歷程中,總會經歷一些成長與看見,依據自己的所學基礎+上網蒐集檢視別人成果資料,就會使自己進步,所不會的技巧,就上網GOOGLE一下,立馬找到所要答案,學習能力快速倍增,這要是在以前沒有網路沒有電腦時代,難以想像!總之,還是得要有高度興趣與不斷努力,才有動力繼續向前。在近期研究SVG圖檔作業(壓縮或轉檔)的同時,很驚訝此格式發明之厲害,幾個文字path的描述,就能產出向量圖檔,放大縮小不失真,於是好奇,應該是會有前人製作國旗的圖檔吧!果然網蒐就有一堆,不只SVG圖檔,還有使用網頁語言HTML+CSS繪出的國旗,這些都是有人辛苦努力出來的,不好好整理一下說不過去,故此將我網上蒐集的相關國旗資料記錄於下,也方便大家就近使用!

ROC國旗使用HTML+CSS(1)

資料來源:教你一步步用CSS畫出中華民國國旗 <打包程式碼>

ROC國旗使用HTML+CSS(2)

資料來源:https://github.com/qcl/CSS-ROC-Flag <打包程式碼>

ROC國旗SVG圖檔

ROC Flag
ROC Flag SVG

<上述SVG圖檔可以用滑鼠點選右鍵(或直接複製底下代碼)後,再另存新檔(ROC Flag.svg)下載>

<svg width="900" height="600" viewBox="-60 -40 240 160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <rect x="-60" y="-40" width="100%" height="100%" fill="#fe0000"/>
   <rect x="-60" y="-40" width="50%" height="50%" fill="#000095"/>
   <path id="four_rays" d="M 8,0 L 0,30 L -8,0 L 0,-30 M 0,8 L 30,0 L 0,-8 L -30,0" fill="#fff"/>
   <use xlink:href="#four_rays" transform="rotate(30)"/>
   <use xlink:href="#four_rays" transform="rotate(60)"/>
   <circle r="17" fill="#000095"/>
   <circle r="15" fill="#fff"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600">
<g fill-rule="evenodd">
<path d="M0 0h900v600H0z" fill="#fe0000"/>
<path d="M0 0h450v300H0z" fill="#000095"/>
</g>
<path d="M225 37.5l-56.25 209.928L322.428 93.75 112.5 150l209.928 56.25L168.75 52.572 225 262.5l56.25-209.928L127.572 206.25 337.5 150 127.572 93.75 281.25 247.428 225 37.5" fill="#fff" paint-order="markers fill stroke"/>
<circle cy="150" cx="225" r="60" fill="#fff" stroke="#000095" stroke-width="7.5"/></svg>

ROC國旗SVG圖檔線上顯示成果按此;ROC國旗SVG圖檔(有框)線上顯示成果按此打包下載

Flag of the Republic of China.svgBlueRedWhite
RGB0-0-149254-0-0255-255-255
Hexadecimal#000095#FE0000#FFFFFF
CMYK100, 100, 0, 420, 100, 100, 00, 0, 0, 0

資料來源:旗海圖幟

中華民國國徽國旗法》對國旗的製作規格有如下規定:

第四條

  1. 旗面之橫度與縱度為三與二之比。
  2. 青天為長方形,其面積為全旗之四分之一。
  3. 長方形之青天中置國徽上之白日青圈及十二道白尖角光芒,其白日體圓心位於長方形青天縱橫平分線之交點上。
  4. 白日體半徑與青色長方形之橫長為一與八之比。
  5. 青圈與十二道白尖角光芒之位置及尺度比例,準用關於國徽之規定。

其中左上角四分之一區的青天白日區塊,則沿用該法規對國徽製作之規範:

第三條

  1. 青底圓形之圓心為白日體之圓心。
  2. 白日體半徑與青底圓形半徑,為一與三之比。
  3. 白日體圓心至白尖角光芒頂,其長度與白日體半徑,為二與一之比。
  4. 白日與十二道白尖角光芒間之青圈,其寬度等於白日體直徑十五分之一。
  5. 每道白尖角光芒之頂角為三十度,十二角為三百六十度。
  6. 白尖角光芒之上下左右排列應正對北南西東方向,其餘均勻排列。

第五條

  1. 國旗之旗桿,白色,配金黃色圓頂
國旗
要素
色彩
涵義
形狀涵義抽象涵義 聖經真理涵義
青天民族自由蔚藍無際、純潔和平的自由追求中華民族光明磊落、崇高偉大之人格上帝給類最大的禮物:自由意志
白日民權平等⒈白日光芒,示民主自由光華四射
⒉光芒尖鋒,示革命精銳為民前鋒
光明坦白、大公無私之心地與思想神就是光,神兒女在地上的命定:在世上發光!
滿地紅民生博愛⒈鮮血滿地的革命先烈
⒉遍滿國土的博愛精神
⒈犧牲奉獻、勇敢奮鬥的革命精神
⒉人人為我、我為人人的博愛精神
效法基督犧牲的愛,流出寶血洗淨人類的罪。犧牲奉獻、勇敢奮鬥、人人為我、我為人人的博愛精神。
十二道
光芒
  象徵中華文化所傳承的美德;即:禮義廉恥與忠孝仁愛信義和平的四維八德精神。也代表着一年12個月,一天12個時辰;也象著着國家的命脈,隨着時間的前進永存於世界;更鼓舞國人與時俱進,自強不息 
<出自:希奇人生>

我國國旗由「青、白、紅」三種顏色組合而成,分別象徵「自由」、「平等」與「博愛」,顏色美麗,意義深遠。

簡單來說,「青」的顏色表示高大的青天,指示我們要有崇高偉大的人格和志氣。

「白」的顏色表示光明的白日,指示我們要有光明磊落的胸懷與冰清玉潔的修養。

「紅」的顏色表示我們的國家乃由無數革命先烈們的熱血所染成,是指示我們要有犧牲奮鬥的精神。

「十二道光芒」代表光華四射,普照全球,並象徵每天十二個時辰,每年十二個月,表示著自強不息、日新又新的精神。瞭解國旗的重要性和意義後,應該要格外地尊重它,愛護它,使它代表著我們國家,如青天的不老,白日的光輝,永遠飄揚於世界!<出自:內政部官網>

轉載中華民族國旗的真實歷史故事:

有一天我與一位比利時宣教回來的牧師聊天,聊著聊著不知為何他突然提起他認識中華民國國旗設計人陸皓東先生的孫子,這位陸先生就把祖父(陸皓東)設計中華民國國旗的故事告訴了這位牧師。

國父孫中山先生是虔誠的基督徒,與他一同建立中華民國的兄弟也都是基督徒。陸皓東是黃花岡72烈士之一,所以他在設計中華民國國旗的時候,很自然的便把聖經真理的元素置入其中。

中華民國國旗中的三要素:青天,白日,滿地紅。
(陸皓東設計:青天白日+國父意見:滿地紅)

陸皓東先生原創的本意如下:

青天:也就是藍色,代表屬天;也就是屬於上帝的國度。

白日: 神國的聖潔。

12道光芒預表以色列的12個支派。(12天干地支,掌管白天及夜晚)

滿地紅:預表耶穌基督的寶血要塗抹全中國,也就是得蒙救贖的中國。

中華民國的國旗,藍色預表這是一個屬上帝的國家,12道白色聖潔的光芒預表神國度榮耀的治理,紅色預表耶穌基督寶貴寶血的救贖要遍滿全中國大地。

資料來源:https://blog.xuite.net/zz163714/twblog/375731247

中華民國國旗歌
黃自曲
山川壯麗,物產豐隆,炎黃世胄,東亞稱雄。
毋自暴自棄,毋故步自封,光我民族,促進大同。
創業維艱,緬懷諸先烈;守成不易,莫徒務近功。
同心同德,貫徹始終,青天白日滿地紅;
同心同德,貫徹始終,青天白日滿地紅。
blank
<資料來源:維基百科>

參考資料
1.File:Flag of the Republic of China.svg (出自Wikimedia Commons)
2.Flag of the Republic of China (From Wikipedia, the free encyclopedia)
3.中華民國國旗(wikiwand)
4.中华民国国旗(Baidu百科)
5.旗海圖誌
6.國旗的意義(內政部官網)
7.使用純CSS製作250個國家國旗
8.使用CorelDRAW畫國旗圖形
9.用Illustrator畫國旗
10.Taiwan flag vector – free download (https://www.countryflags.com/)