Qt QSVG使用详解

       SVG 伸缩可矢量图形(SVG)是一种基于XML的语言,用于描述二维矢量图形。SVG 使用 XML 格式定义图像。

Qt QSVG使用详解目录

1 SVG基本格式

2 加载SVG矢量图

3 生成矢量图

 4 矢量图下载网站

4.1 阿里巴巴

4.2 Lineicons

 4.3 ionicons

 5 下载地址


        本文作者原创,转载请附上文章出处与本文链接。

1 SVG基本格式

        以下示例出自 iconfont 阿里巴巴矢量图

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--! Font Awesome Free 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM255.1 176C255.1 176 255.1 176 255.1 176c21.06 0 40.92 8.312 55.83 23.38c9.375 9.344 24.53 9.5 33.97 .1562c9.406-9.344 9.469-24.53 .1562-33.97c-24-24.22-55.95-37.56-89.95-37.56c0 0 .0313 0 0 0c-33.97 0-65.95 13.34-89.95 37.56c-49.44 49.88-49.44 131 0 180.9c24 24.22 55.98 37.56 89.95 37.56c.0313 0 0 0 0 0c34 0 65.95-13.34 89.95-37.56c9.312-9.438 9.25-24.62-.1562-33.97c-9.438-9.312-24.59-9.219-33.97 .1562c-14.91 15.06-34.77 23.38-55.83 23.38c0 0 .0313 0 0 0c-21.09 0-40.95-8.312-55.89-23.38c-30.94-31.22-30.94-82.03 0-113.3C214.2 184.3 234 176 255.1 176z"/>
</svg>

2 加载SVG矢量图

    QSvgRenderer render;
    render.load (QString("D:/copyright.svg"));

    QSize size = render.defaultSize ();
    QPixmap *pix = new QPixmap(30, 30);
    //QPixmap pix(size*5);        // 可以在这儿直接缩放处理
    pix->fill (Qt::transparent); // 像素清空

    QPainter painter(pix);
    painter.setRenderHints (QPainter::Antialiasing);
    render.render (&painter);


    ui->pushButton->setIcon(QIcon(*pix));
    ui->pushButton->setIconSize(QSize(30, 30));
    ui->pushButton->setFlat(true);
    //ui->pushButton->setStyleSheet("border: 0px"); //消除边框

3 生成矢量图

    QSvgGenerator generator;        // 定义SVG的产生器
    generator.setFileName (QString("temp.svg"));    // 设置SVG文件名
    generator.setDescription ("Test QSvgGenerator");    // 无所谓
    QSize size(400,400);
    generator.setSize (size);       // 设置大小
    generator.setViewBox(QRect(0, 0, 400, 400));  // 视口大小

    QPainter painter;               // 小画家
    painter.begin (&generator);
    QRect rect(0,0,400,400);
    painter.setBrush (Qt::cyan);
    painter.drawEllipse (rect);     // 直接在 generator 上绘制 一个圆
    painter.end ();                 // 需要保证绘制结束
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="141.111mm" height="141.111mm"
 viewBox="0 0 400 400"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">
<title>Qt SVG Document</title>
<desc>Test QSvgGenerator</desc>
<defs>
</defs>
<g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" >

<g fill="#00ffff" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="square" stroke-linejoin="bevel" transform="matrix(1,0,0,1,0,0)"
font-family="SimSun" font-size="9" font-weight="400" font-style="normal" 
>
<circle cx="200" cy="200" r="200"/>
</g>
</g>
</svg>

 4 矢量图下载网站

4.1 阿里巴巴

阿里巴巴官方矢量图网站: iconfont-阿里巴巴矢量图标库

4.2 Lineicons

Free Line Icons for Designers and Developers - Lineicons

 

 4.3 ionicons

Ionicons: Premium Open Source Icon Pack for Ionic Framework

 5 下载地址

本博客源代码下载地址:QSVG使用Demo程序-C++文档类资源-CSDN下载

20多个最佳 ICON 库_高先生的猫的博客-CSDN博客_icon库

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

双子座断点

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值