矢量图表SVG学习

2010年7月20日 | 由 helight | 800字 | 阅读大约需要2分钟 | 归档于 linux 应用 | 标签 #linux 应用

最近在自己做的一个系统中需要图标显示一些信息,在查看学习了前面一些同事的程序后发现了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图片。

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

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

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