SVG 作為一種矢量圖形，具有任意縮放不失真、可被高品質列印、檔案較小、互動性強等優勢，正逐漸成為一種主流的圖檔格式。潤乾報表一方面可以生成 SVG 格式的統計圖，另一方面也可以在 HTML5 中直接嵌入 SVG 統計圖，友善使用者在 PC 端或移動端檢視。
下面通過一個示例說明潤乾報表生成 SVG 統計圖的過程。
制作報表
1、 連接配接資料源
打開潤乾報表設計器，菜單欄選擇工具 - 資料源，在彈出的資料源編輯視窗中建立資料源或連接配接現有資料源，這裡使用預設的 demo 資料源。
2、 建立報表
菜單欄選擇檔案 - 建立報表，點選“生成空白報表”，建立一個空白報表。
3、設定資料集
菜單欄選擇報表 - 資料集，資料集類型選擇“SQL 檢索”，在彈出的 SQL 編輯器視窗中，選擇“文法”頁，輸入查詢 SQL 語句，也可以通過其他标簽頁的可視化界面進行字段選擇、檢索條件設定等。
4、編輯報表模闆和表達式
在建立的報表模闆中設定報表樣式以及表達式：
根據學生成績表，按照姓名和科目分組，統計各個班級每個科目的平局成績。預覽結果（部分）：
以上都是正常的報表制作步驟。
5、生成 SVG 統計圖
在上述模闆中追加行，并設定合并格，右鍵 A4 格，選擇“統計圖”，統計圖類型選擇柱形圖，分别設定分類軸和系列，如下圖：
切換到“圖形特性”頁籤，在圖形格式中選擇“SVG”格式，如下圖：
設定完成後，報表模闆及其表達式如下：
展現報表
在報表設計器中，選擇工具欄中的“預覽報表”
，即可在設計器中檢視報表展現結果。
設計器預覽效果
此外，潤乾報表設計器内置了 Tomcat，允許使用者将報表釋出到 web 端檢視頁面效果，點選工具欄右上角的 IE 圖示，設定報表主目錄（可采用預設），完成報表釋出。
chrome 中預覽效果
另外，報表也可以在移動端浏覽
(http://192.168.2.107:6868/demo/reportJsp/matchReport.jsp?rpx=test.rpx&match=1)：
手機上檢視效果
【附】PC 端自動生成的頁面源代碼（SVG 統計圖的部分源碼）
<tdcolSpan=4class="report1_6"><svgviewBox="0,0,748,277"width="748"height="277"xmlns:xlink="http://www.w3.org/1999/xlink"style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; stroke:black; text-rendering:auto; stroke-linecap:square; stroke-miterlimit:10; stroke-opacity:1; shape-rendering:auto; fill:black; stroke-dasharray:none; font-weight:normal; stroke-width:1; font-family:'Dialog'; font-style:normal; stroke-linejoin:miter; font-size:12; stroke-dashoffset:0; image-rendering:auto;"xmlns="http://www.w3.org/2000/svg"
><!--Generated by the Batik Graphics2D SVG Generator--><defsid="genericDefs"
></defsid="genericDefs"><g
><defsid="defs1"
><linearGradientx1="690"gradientUnits="userSpaceOnUse"x2="694"y1="117"y2="117"id="linearGradient1"spreadMethod="reflect"
><stopstyle="stop-opacity:1; stop-color:rgb(185,112,52);"offset="0%"
></stopstyle="stop-opacity:1;><stopstyle="stop-opacity:1; stop-color:rgb(252,218,190);"offset="100%"
></stopstyle="stop-opacity:1;></linearGradient>
</defs><gstyle="fill:white; stroke:white;"
><rectx="0"width="748"height="275"y="0"style="stroke:none;"
></rectx="0"width="748"height="275"y="0"style="stroke:none;"></g
><gstyle="stroke-linejoin:round; stroke-linecap:round; stroke-miterlimit:0.1;"
><rectx="686"width="44"height="48"y="113"style="fill:none;"
></rectx="686"width="44"height="48"y="113"style="fill:none;"><rectx="690"y="117"width="8"style="fill:url(#linearGradient1); stroke:none;"height="8"
></rectx="690"y="117"width="8"style="fill:url(#linearGradient1);></g>
<polygonstyle="fill:url(#linearGradient71); stroke:none;"points=" 615 87 615 130 634 111 634 68"
></polygonstyle="fill:url(#linearGradient71);><polygonstyle="fill:none; stroke:rgb(1,1,1);"points=" 615 87 615 130 634 111 634 68"
></polygonstyle="fill:none;><polygonstyle="fill:url(#linearGradient72); stroke:none;"points=" 576 87 615 87 634 68 595 68"
></polygonstyle="fill:url(#linearGradient72);><polygonstyle="fill:none; stroke:rgb(1,1,1);"points=" 576 87 615 87 634 68 595 68"
></polygonstyle="fill:none;><rectx="576"y="87"width="39"style="fill:url(#linearGradient73); stroke:none;"height="43"
></rectx="576"y="87"width="39"style="fill:url(#linearGradient73);><rectx="576"y="87"width="39"style="fill:none; stroke:rgb(1,1,1);"height="43"
></rectx="576"y="87"width="39"style="fill:none;></g></g></svg>
</td>
<tdcolSpan=4class="report1_6"><svgviewBox="0,0,748,277"width="748"height="277"xmlns:xlink="http://www.w3.org/1999/xlink"style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; stroke:black; text-rendering:auto; stroke-linecap:square; stroke-miterlimit:10; stroke-opacity:1; shape-rendering:auto; fill:black; stroke-dasharray:none; font-weight:normal; stroke-width:1; font-family:'Dialog'; font-style:normal; stroke-linejoin:miter; font-size:12; stroke-dashoffset:0; image-rendering:auto;"xmlns="http://www.w3.org/2000/svg" ><!--Generated by the Batik Graphics2D SVG Generator--><defsid="genericDefs" /><g ><defsid="defs1" ><linearGradientx1="690"gradientUnits="userSpaceOnUse"x2="694"y1="117"y2="117"id="linearGradient1"spreadMethod="reflect" ><stopstyle="stop-opacity:1; stop-color:rgb(185,112,52);"offset="0%" /><stopstyle="stop-opacity:1; stop-color:rgb(252,218,190);"offset="100%" /></linearGradient> </defs><gstyle="fill:white; stroke:white;" ><rectx="0"width="748"height="275"y="0"style="stroke:none;" /></g ><gstyle="stroke-linejoin:round; stroke-linecap:round; stroke-miterlimit:0.1;" ><rectx="686"width="44"height="48"y="113"style="fill:none;" /><rectx="690"y="117"width="8"style="fill:url(#linearGradient1); stroke:none;"height="8" /></g> <polygonstyle="fill:url(#linearGradient71); stroke:none;"points=" 615 87 615 130 634 111 634 68" /><polygonstyle="fill:none; stroke:rgb(1,1,1);"points=" 615 87 615 130 634 111 634 68" /><polygonstyle="fill:url(#linearGradient72); stroke:none;"points=" 576 87 615 87 634 68 595 68" /><polygonstyle="fill:none; stroke:rgb(1,1,1);"points=" 576 87 615 87 634 68 595 68" /><rectx="576"y="87"width="39"style="fill:url(#linearGradient73); stroke:none;"height="43" /><rectx="576"y="87"width="39"style="fill:none; stroke:rgb(1,1,1);"height="43" /></g></g></svg> </td>
從源碼中可以看到潤乾報表對 HTML5 的有效支援，客戶在開發相關應用時可以直接使用潤乾報表生成 SVG 統計圖。
詳情連結：http://c.raqsoft.com.cn/article/1552914071113?r=gxy