CSS及SVG進階應用

SVG

一、概述

• 何謂 SVG
  • 可縮放向量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。
    • svg放大不毛邊
    • 用程式碼構成一張圖
    • 步驟
      1. 宣告格式(版本 字格式 是否獨立存在)
      2. SVG開始(格式、長寬)
      3. SVG結束
• 點陣圖與向量圖的比較(含附檔名)
  • 失真壓縮可以減少儲存圖片所需要的空間大小，在螢幕上觀看圖片時，其實這影響不大，因為，人的眼睛對光線比較敏感，光線對景物的作用比顏色的作用更為重要，這就是失真壓縮技術的基本依據，失真壓縮的特點是保持顏色的逐漸變化，刪除圖片中顏色的突然變化，生物學中的大量實驗證明，人類大腦會利用與附近最接近的顏色來填補所丟失的顏色，例如:對於藍色天空背景上的一朵白雲
  • 失真壓縮的方法就是刪除圖片中景物邊緣的某些顏色部分，當在螢幕上看這幅圖時，大腦會利用在景物上看到的顏色填補所丟失的顏色部分，利用有損壓縮技術，某些數據被有意地刪除了，而被取消的數據也不再恢復
  • 利用有損壓縮技術可以大大地壓縮檔案的數據，但是，會影響圖片的品質，如果使用了有損壓縮的圖片僅在螢幕上顯示，可能對圖片質量影響不太大，至少對於人類眼睛的識別程度來說區別不大，可是，如果要把一幅經過有損壓縮技術處理的圖片用高分辨率印表機列印出來，那麼圖片質量就會有明顯的受損痕跡。
• 非失真壓縮
  • 非失真壓縮的基本原理是相同的顏色訊息只需儲存一次，壓縮圖片的軟體首先會確定圖片中哪些區域是相同的，哪些是不同的，包括了重複數據的圖片(如藍天)就可以被壓縮，只有藍天的起始點和終結點需要被記錄下來，但是藍色可能還會有不同的深淺，天空有時也可能被樹木、山峰或其他的對象掩蓋，這些就需要另外記錄，從本質上看，非失真壓縮的方法可以刪除一些重複數據，大大減少要在磁片上儲存的圖片尺寸，但是，無損壓縮的方法並不能減少圖片的影別空間佔用量。
  • 這是因為，當從磁片上讀取圖片時，軟體又會把丟失的像素用適當的顏色訊息填充進來，如果要減少圖片佔用內存的容量，就必須使用失真壓縮方法，非失真壓縮方法的優點是能夠比較好地儲存圖片的品質，但是，相對來說這種方法的壓縮率比較低，不過，如果需要把圖片用高分辨率的印表機列印出來，最好還是使用非失真壓縮，幾乎所有的圖片檔案都採用各自簡化的格式名作為檔案副檔名，從副檔名就可知道這幅圖片是按什麼格式存儲的，應該用什麼樣的軟體去讀／寫等等。
• 點陣圖檔案格式
  • png
  • jpg
  • gif
  • BMP
  • PCX
  • EPS
  • UFO
  • DXF
  • TIFF
  • TGA
  • EXIF
  • FPX
  • SVG
• BMP：是一種與硬體設備無關的圖片檔案格式，使用非常廣，它採用位映射存儲格式，除了圖片深度可選以外，不採用其他任何壓縮，因此，"BMP"檔案所佔用的空間很大，"BMP"檔案的圖片深度可選，l bit、4 bit、8 bit 及 24 bit，"BMP"檔案存儲數據時，圖片的掃描模式是按從左到右、從下到上的順序，由於 BMP 檔案格式是 Windows 環境中交換與圖有關的數據的一種標準，因此在 Windows 環境中營運的圖形圖片軟體都支援 BMP 圖片格式，典型的 BMP 圖片檔案由三部分組成︰位圖檔案頭數據架構　－　包含 BMP 圖片檔案的類型、顯示內容等訊息，位圖訊息數據架構　－　包含 BMP 圖片的寬、高、壓縮方法定義顏色。
• GIF:GIF（Graphics Interchange Format）的原義是〝圖片互換格式〞，是 CompuServe 公司在 1987 年開發的圖片檔案格式，GIF 檔案的數據，是一種基於，"LZW"算法的連續色調的無損壓縮格式，其壓縮率一般在 50％ 左右，它不屬於任何應用程式，目前幾乎所有相關軟體都支援它，有大量的軟體在使用GIF圖片檔案，GIF 圖片檔案的數據是經過壓縮的，而且是採用了可變長度等壓縮算法，所以 GIF 的圖片深度從 l bit 到 8 bit，也即 GIF 最多支援256種色彩的圖片，GIF 格式的另一個特點是其在一個，GIF 檔案中可以存多幅彩色圖片，如果把存於一個檔案中的多幅圖片數據逐幅讀出並顯示到螢幕上，就可構成一種最簡單的動畫，GIF 解碼較快，因為採用隔行存放的 GIF 圖片，在邊解碼邊顯示的時候可分成四遍掃描，第一遍掃描雖然只顯示了整個圖片的八分之一，第二遍的掃描後也只顯示了1／4，但這已經把整幅圖片的概貌顯示出來，所以在顯示GIF圖像時，隔行存放的圖像會給您感覺到它的顯示速度似乎要比其他圖像快一些，這是隔行存放的優點。可動畫，256色，也不是公開格式。
• JPG：點陣圖壓縮，普遍應用，非公開格式，但從沒收過錢，是專利。JPEG 是 Joint Photographic Experts Group（聯合圖片專家組）的縮寫，檔案副檔名為〝.jpg〞或〝.jpeg〞，是最常用的圖片檔案格式，由一個軟體開發聯合會組織製定，是一種失真壓縮格式，能夠將圖片壓縮在很小的儲存空間，圖片中重複或不重要的資料會被丟失，因此容易造成圖片數據的損傷，尤其是使用過高的壓縮比例，將使最終解壓縮後恢復的圖片質量明顯降低，如果追求高品性圖片，不宜採用過高壓縮比例，但是JPEG壓縮技術十分先進，它用有損壓縮模式去除冗餘的圖片數據，在獲得極高的壓縮率的同時能展現十分豐富生動的圖片，換句話說，就是可以用最少的磁片空間得到較好的圖片品質，而且 JPEG是一種很靈活的格式，具有調節圖片質量的功能，允許用不同的壓縮比例對檔案進行壓縮，支援多種壓縮級別，壓縮比率通常在 10︰1 到 40︰1 之間，壓縮比越大，品質就越低，相反地，壓縮比越小，品質就越好，比如可以把 1.37 Mb 的 BMP 位圖檔案壓縮至 20.3 KB，當然也可以在圖片質量和檔案尺寸之間找到平衡點。JPEG 格式壓縮的主要是高頻訊息，對色彩的訊息保留較好，適合應用於網路，可減少圖片的傳輸時間，可以支援24 bit 真彩色，也普遍應用於需要連續色調的圖片，JPEG 格式是目前網路上最流行的圖片格式，可以把檔案壓縮到最小的格式，在 Photoshop 軟體中以，JPEG 格式儲存時，提供11級壓縮級別，以 0─10 級表示，其中 0 級壓縮比最高，圖片品質最差，即使採用細節幾乎無損的10 級質量儲存時，壓縮比也可達 5︰1，以BMP格式儲存時得到 4.28MB 圖片檔案，在採用 JPG 格式儲存時，其檔案僅為 178 KB　壓縮比達到24︰1，經過多次比較，採用第 8 級壓縮為存儲空間與圖片質量兼得的最佳比例，JPEG 格式的應用非常廣泛，特別是在網路和光碟讀物上，都能找到它的身影，目前各類瀏覽器均支援。
• PCX:最先的PCX 雛形是出現在由ZSOFT 公司推出的名叫 PC PAINBRUSH 的用於繪畫的商業套裝軟件中，以後，微軟公司將其移植到 Windows 環境中，成為 Windows 系統中一個次功能，先在微軟的 Windows 3.1 中廣泛應用，隨著 Windows 的流行、升級　加之其強大的圖片處理能力，使 PCX 同 GIF、TIFF、BMP 圖片檔案格式一起，被越來越多的圖形圖片軟體工具所支援，也越來越得到人們的重視。PCX 是最早支援彩色圖片的一種檔案格式，現下最高可以支援 256 種彩色，PCX 設計者很有眼光地超前引入了彩色圖片檔案格式，使之成為現下非常流行的圖片檔案格式，PCX 圖片檔案由檔案頭和實際圖片數據構成，檔案頭由 128 位元組組成，描述版本訊息和圖片顯示設備的橫向、縱向分辨率，以及調色板等訊息，在實際圖片數據中，表示圖片數據類型和彩色類型，PCX 圖片檔案中的數據都是用，PCXREL技術壓縮後的圖片數據，PCX 是 PC 畫筆的圖片檔案格式，PCX 的圖片深度可選為 l、4、8 bit，由於這種檔案格式出現較早，它不支援真彩色，PCX 檔案採用 RLE 行程編碼，檔案體中存放的是壓縮後的圖片數據，因此，將采集到的圖片數據寫成 PCX 檔案格式時，要對其進行 RLE 編碼，　而讀取一個 PCX 檔案時首先要對其進行 RLE 解碼，才能進一步顯示和處理。
• TIFF:TIFF（TaglmageFileFormat）圖片檔案是由 Aldus 和 Microsoft 公司，為桌上系統研製開發的一種較為通用的圖片檔案格式，TIFF格式靈活易變，它定義了四類不同的格式。
  • TIFF-B 適用於二值圖片
  • TIFF-G 適用於黑白灰度圖片
  • TIFF-P 適用於帶調色板的彩色圖片
  • TIFF-R 適用於 RGB 真彩圖片
• TIFF 支援多種編碼方法　其中包括 RGB 無壓縮　RLE 壓縮及 JPEG 壓縮等，TIFF 是現存圖片檔案格式中最複雜的一種，它具有擴展性、方便性、可改性，可以提供給 IBMPC 等環境中營運、圖片編輯程式，TIFF 圖片檔案由三個數據架構組成，分別為檔案頭，一個或多個稱為 IFD 的包含標記指標的目錄以及數據本身，TIFF 圖片檔案中的第一個數據架構稱為圖片檔案頭或 IFH，這個架構是一個TIFF檔案中唯一的、有固定位置的部分，IFD 圖片檔案目錄是一個位元組長度可變的訊息塊，Tag標記是TIFF檔案的核心部分，在圖片檔案目錄中定義了要用的所有圖片參數，目錄中的每一目錄條目就包含圖片的一個參數。
• TGA:TGA 格式是由美國 Truevision 公司為其顯示卡開發的一種圖片檔案格式，檔案後綴為〝.tga〞，已被國際上的圖形、圖片工業所接受，TGA 的架構比較簡單，屬於一種圖形、圖片數據的通用格式，在多媒體領域有很大影響　是電腦生成圖片向電視轉換的一種首選格式，TGA 圖片格式最大的特點是可以做出不規則形狀的圖形、圖片檔案，一般圖形、圖片檔案都為四方形，若需要有圓形、菱形甚至是縷空的圖片檔案時，TGA 可就派上用場了，TGA 格式支援壓縮，使用不失真的壓縮算法。
• EXIF:EXIF 的格式是 1994 年富士公司提倡的數位相機圖片檔案格式，其實與 JPEG 格式相同　區別是除儲存圖片數據外，還能夠存儲攝影日期、使用光圈、快門、閃光燈數據等曝光資料，和附帶訊息以及小尺寸圖片。
• FPX:FPX 圖片檔案格是由柯達、微軟、HP 及 Live PictureInc 聯合研製，並於1996年6月正式發表，FPX 是一個擁有多重分辯率的影像格式，即影像被儲存成一系列高低不同的分辨率，這種格式的好處是當影像被放大時仍可維持影像的質素，另外　當修飾 FPX 影像時，只會處理被修飾的部分，不會把整幅影像一並處理，而減少 CPU 及記憶體的負擔，降低影像處理時間。
• PSD:這是 Photoshop 圖片處理軟體的專用檔案格式，副檔名是〝.psd〞　可以支援圖層、通道和不同色彩模式的各種圖片特徵，是一種非壓縮的原始檔案儲存格式，掃描器不能直接生成該種格式的檔案，PSD 檔案有時容量會很大，但，由於可以保留所有原始訊息，在圖片處理中對於尚未製作完成的圖片，選用 PSD 格式儲存是最佳的選擇。
• CDR:CDR 格式是著名繪圖軟體 CorelDRAW 的專用圖形檔案格式，由於 CorelDRAW 是向量圖形繪製軟體，所以 CDR 可以記錄檔案的屬性、位置和分頁等，但它在兼容度上比較差，所有CorelDraw應用程式中均能夠使用，但其他圖片編輯軟體打不開此類檔案。
• PCD:PCD 是 Kodak PhotoCD 的縮寫　副檔名是〝.pod〞，是 Kodak 開發的一種 Photo CD 檔案格式，其他軟體系統只能對其進行讀取，該格式使用 YCC 色彩模式定義圖片中的色彩

，YCC 和 CIE 色彩空間包含比顯示器和列印設備的 RGB 色和 CMYK 色多得多的色彩，PhotoCD 圖片大多具有非常高的質量。

• DXF:DXF 是 Drawing Exchange Format 的縮寫，副檔名是〝.dxf〞，是AutoCAD中的圖形檔案格式，它以ASCII模式儲存圖形，在表現圖形的大小方面十分精確，可被 CorelDraw 和 3DS 等大型軟體調用編輯。
• UFO:這是著名圖片編輯軟體 Ulead Photolmapct 的專用圖片格式，能夠完整地記錄所有 Photolmapct處理過的圖片屬性，值得一提的是，UFO檔案以對象來代替圖層記錄圖片訊息。
• EPS:EPS 是 Encapsulated Postscript 的縮寫　是跨平台的標準格式，副檔名在 PC上是〝.eps〞　在 Macintosh 是〝.epsf〞，主要用於向量圖片和光閘極圖片的存儲，EPS 格式採用 Postscript 語言進行描述，並且可以儲存其他一些類型訊息。例如：多色調曲線、Alpha通道、分色、剪輯路徑、掛網訊息和色調曲線等。因此　EPS 格式常用於印刷或列印輸出，Photoshop 中的多個EPS格式選項可以實現印刷列印的綜合控制，在某些情況下甚至優於TIFF格式。
• PNG:每個點都是原色，不失真公開格式，PNG（Portable Networf Graphics）的原名稱為〝可移性網路圖片〞，是網上接受的最新圖片檔案格式，PNG 能夠提供長度比 GIF 小 30％ 的無損壓縮圖片檔案，它同時提供 24 位和 48 位真彩色圖片支援以及其他諸多技術性支援，由於 PNG 非常新，所以，目前並不是所有的程式都可以用它來存儲圖片檔案，但 Photoshop 可以處理 PNG 圖片檔案，也可以用 PNG 圖片檔案格式存儲。

二、基本架構

• 基本架構
  • 步驟一：開啟fielzilla，連線至站台
  • 步驟二：home>www>SVG，在這個資料夾中，建立新檔案。
  • 步驟三：命名為：flower(記得要加入副檔名.svg)
  • 步驟四：寫入程式碼。

   <?xml version='1.0' encoding='UTF-8' standalone='no'?>
   <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>

   </svg>

• 基本樣式
  • line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。
  • polyline(多點成線)，諸屬性如下：
    • points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
  • polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下：
    • points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
  • circle(圓)，諸屬性如下：
    • cx(圓心x座標)，cy(圓心y座標)，r(半徑)
  • rect(矩形)，諸屬性如下：
    • width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑)
  • ellipse(楕圓)，諸屬性如下：
    • cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。
• 基本圖形
  • stroke (線條顏色)，
  • stroke-width (線條寬度)，
  • stroke-opacity (線條顏色的透明度，合法的範圍是：0 - 1，0最透明，預設1)，
  • stroke-linecap (線條端點形狀，預設butt端點切齊、round以端點為圓心線寬為直徑畫圓、square以端點為中心線寬為邊長畫方形)，
  • stroke-linejoin (線條轉彎處樣式，預設miter尖角、round圓角、bevel斜角)，
  • stroke-miterlimit (尖角內外距/線寬的最大值，不設限則尖角可以拉長至無限長，預設為 4 倍)，
  • stroke-dasharray (預設none，代表實線。若為數字其值為一陣列，陣列值為線段中實線段長度與虛線段長度的交錯數字，通常是兩個數字一組，如果是奇數，則最後面自動加補第一個數字)
• 顏色部分：
  • fill (填充顏色)，
  • fill-opacity (填充不透明，合法的範圍是：0 - 1，0最透明，預設1)。
  • fill-rule (polygon等標籤有時會將內部分割成不同的區域，填色方式，預設nonzero全部同色、evenodd相鄰區域內部填色與外部填色交互填充、inherit繼承)

三、文字

• 範例一(text.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>
	<text x='40' y='50' style='font-family:kaiti;fill:#666666'>羅馬</text>
</svg>

• 在「text」標籤開始與結束之間夾字，可用中英文。而使用「屬性」來規定文字的表現，所有的屬性都可以改用樣式來表達。
• 可用中文字形：
  1. Monospace：等寬字型(非調和字)
  2. Sans：無襯線體(黑體，哥德體)
  3. Serif：襯線體(筆畫末端的裝飾細節，白體，羅馬體)
  4. KaiTi：楷體
  5. MingLiU：明體
  6. PMingLiU：明體
  7. MingLiU_HKSCS：明體
  8. FangSong：仿宋
  9. NSimSun：新宋
  10. SimHei：新黑
  11. Microsoft YaHei：微軟雅黑體
  12. Microsoft JhengHei：微軟正黑體
  13. Arial Unicode MS：微軟 Arial 體
  14. DFBiaoKaiShu-B5：華康楷書體
  15. DFHKStdKai-B5：華康標楷體
  16. DFHKStdSong-B5：華康標宋體
  17. DFBiaoSong-B5：華康宋體
  18. DFHeiUBlod-B5：華康特粗黑體
  19. DFHeiBlod-B5：華康粗黑體
  20. DFHeiMedium-B5：華康中黑體
  21. DFHeiLight-B5：華康細黑體
  22. DFBiaoKaiShu-B5：華康楷書體
  23. …：華康眾字體，族繁不及備載
  24. Segoe UI：微軟 Segoe UI 字形
  25. Tahoma：微軟 Tahoma 字形
  26. Meiruo：日文明瞭體
  27. Meiruo UI：日文明瞭體
  28. MS Gothic：微軟日文哥德體
  29. MS Mincho：微軟日文明朝體
  30. MS PGothic：微軟日文哥德體
  31. MS PMincho：微軟日文明朝體
  32. MS UI Gothic：微軟日文哥德體
  33. MS Mincho：微軟日文明朝體
• 屬性 x 和 y 標示字的起點：值可為'10,20,30,40'，表示每個字的 x 或 y 座標。
• 屬性 dx 和 dy 基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠。
• 屬性 fill 控制填入字的顏色，預設黑色
• 屬性 stroke 控制字描框的顏色，預設 none
• 屬性 rotate='30' 順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度。
• 用 style 控制字體、字形、尺寸，但顏色是用 fill 不是用 color 。

其他進階屬性：

• text-decoration 屬性，有以下諸值：
  1. underline：底線
  2. overline：頂線
  3. line-through：刪除線
  4. blink：閃爍
  5. none：無，預設值
  6. inherit：繼承
• textLength 及 lengthAdjust ，前者設定字串的總長度，後者設定要怎麼湊到這個長度，有兩個值：
  1. lengthAdjust='spacing' 靠調整字距來湊足字串的長度。
  2. lengthAdjust='spacingAndGlyphs' 靠把字拉胖來湊足字串的長度。
• 子標籤 TSPAN：就是 span ，其屬性值幾乎和 text 一模一樣，也是 x、y、dx、dy、rotate、textLength。
• 子標籤 textPath：屬性 xlink:href='#path的id' ；屬性 startOffset='xx%' 從 path 的百分之多少開始跑字。path 在 def 中定義，含路徑、填充色、畫框色。
• 屬性 style 控制諸樣式：
  1. font-size:
  2. writing-mode:tb;直寫，預設橫寫。

四、位移、旋轉、縮放、歪斜

• 範例二(transform.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg height='100' width='112.5' xmlns='http://www.w3.org/2000/svg' version='1.1'>
  <line x1='0' y1='50' x2='113' y2='50' style='stroke:#0f0;stroke-dasharray:2 2;stroke-width:0.5pt;' />
  <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#000;fill:none;stroke-width:1pt;' transform='translate(25,50)'/>
  <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='rotate(90) translate(50,-50)'/>
  <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='translate(75,50) rotate(90)'/>
  <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(100,50) rotate(180) scale(0.8)'/>
  <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(125,50) rotate(180) scale(0.8) skewX(30)'/>
  <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(150,50) rotate(180) scale(0.8) skewY(30)'/>
</svg>

• 注意：
  1. 四個圖形都圍繞凹尖處旋轉，此點是原始圖形的(0,0)點。因為 rotate 都只交代角度，沒有交代繞著哪個中心旋轉，所以就繞預設值(0,0)旋轉。
  2. 如果混合兩種以上操作，請先平移、再旋轉、再縮放。請看第二個箭頭(藍色)，先旋轉再平移，結果他的平移座標，是旋轉過後的 x 軸和 y 軸，不再是預設的 x 軸和 y 軸。
• 相關屬性說明：
  1. 平移變換(translate)：transform="translate(x,y)"，即新坐標系的原點在原坐標系的(x,y)處。坐標軸的方向不變。
  2. 旋轉變換(rotate)：transform="rotate(angle cx,cy)"。angle代表旋轉角度，預設單位是「度」，順時針為正，逆時針為負。(cx,cy)是旋轉中心所在的坐標。若省略旋轉中心坐標，則預設值是(0,0)。
  3. 伸縮變換(scale)：transform="scale(sx,sy)"，sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸：大於1；縮小：小於1。若省略sy，即sy=sx，作等比例縮放。
  4. 歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)'，x-angle,y-angle分別代表沿x軸和y軸歪斜的角度。
• 作圖練習二(3petal0.svg)(三花瓣)：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='600' height='600'>
<g>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>

• 綁成群組(3petal1.svg)：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'>
<g transform='translate(300,48) rotate(30) scale(1.7)'>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>

• 墊一張圖(3petal2.svg)：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'>
<image xlink:href='http://jendo.org/~admin/Image15.png' x='0' y='0' width='600' height='600'/>
<g>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/
</g>
</svg>