矢量图表SVG学习

| 2010年7月20日

最近在自己做的一个系统中需要图标显示一些信息，在查看学习了前面一些同事的程序后发现了svg这种图像格式比较适合，所以深入学习了一下，现在这里发一个demo程序。

Svg介绍

SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。 SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。 Svg的图片可以很好的嵌入到html的文件中，并且可以结合js脚本，创建动态的图形，在数据图表显示上非常有优势。

测试程序：

#include <stdio.h>
#include <vector>
#include <string>
#include <sstream>
using namespace std; 

int main()
{
    stringstream svgdata;
    string svgpic="";
    char *svgname = "svgpic.svg"; 

    svgdata << "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\">\n";

    svgdata << "<a>\n";

    svgdata << "<rect x=\"20\" y=\"2\" width=\"500\" height=\"100\" rx=\"2\" ry=\"2\" style=\"fill:lightgrey\" id=\"helightxu\"/>\n";

    svgdata << "<text x=\"20\" y=\"80\" style=\"font-size:64pt;font-weight:bold;font-family:Verdana;fill:black;\">Helight.Xu</text>\n";

    svgdata << "</a>\n";

    svgdata << "</svg>\n";

    svgpic = svgdata.str();

    FILE * fp=fopen(svgname,"wb");

    if (NULL == fp) {

        return false;

    }

    fwrite(svgpic.c_str(), svgpic.length(), 1, fp);

fclose(fp); 

 return 0;
}

生成svg图像代码：

<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” version=”1.1″>

<a>
<rect x=”20″ y=”2″ width=”500″ height=”100″ rx=”2″ ry=”2″ style=”fill:lightgrey” id=”helightxu”/>

<text x=”20″ y=”80″ style=”font-size:64pt;font-weight:bold;font-family:Verdana;fill:black;”>Helight.Xu</text>

</a>
</svg>

图像结果显示：可使用adobe svg viewer来查看svg图片。

晕乎，图片无法上传。。。

看完本文有收获？请分享给更多人

关注「黑光技术」，关注大数据+微服务

分类

标签