SVG format image application under Qt

Introduction to SVG format images

svg format pictures are also called vector pictures. Pictures in this format are different from pictures in png and other formats. They do not use bitmaps to organize pictures, but use lines to organize pictures. The file format of svg format is xml. , which can be opened through a file compiler to view the svg format content.

The characteristic of pictures in the svg format is that they support the enlargement and reduction of the picture. When the picture is enlarged and reduced, the clarity will not change. Compared with ordinary pictures in png and jpg formats, the picture will be stretched when the picture is enlarged. The effect or unclear situation exists for pictures in svg format.

Images in svg format are in xml format. Open the xml file through a text compiler and carefully observe the content of the svg format file. Generally, there are circles, rectangles, lines, polylines, polygons and other shapes. These shapes can be scaled freely. , that is, the graphics change according to the size of the display area, and the image will not be unclear due to scaling. This is the vector image we understand, because these are not bitmaps, but are specified by specifying the coordinates and size; however, There is another situation. SVG format pictures can also be inserted into bitmaps. The tag is <image id="xx" xlink:href="xxxxx">. This means that a picture is inserted into the SVG picture. The picture is also a bitmap, that is, The original resolution of the image inserted into the svg format is 100*100. If the image in the svg format is placed in a 500*500 area, the image will not produce the svg scalable effect and the image will be blurred. , because the original image does not have enough pixels, it will be blurry when displayed in an area wider than the original image. In order to solve this problem, the resolution of the original image should be enlarged. Generally, we use tools to convert a png format image. When it is in svg format, although this conversion is in svg format, the entire svg file does not have the effect of free scaling. When the area to be displayed exceeds the original resolution of the png image, the image will be blurred.

Vector reference link: svg basics svg vector basics

But there are a few things to note:

If you want to keep the picture from deforming when zooming in and out, it is best to keep the proportion of the display control consistent with the proportion of the picture, otherwise the svg picture will also have a stretching effect, see Figure 1
When a picture in svg format is enlarged or reduced, the svg picture must first be rendered into a pixmap of the corresponding size. If the size of the qpixmap is arranged with the size of the picture to be assigned, then even the svg format picture will not fill up the control, such as a qpushbutton. The size is size(900,900). If the size set when creating the pixmap is size(30,30), then the button calls setIcon to set the button icon, and then calls setIconSize again to set the icon size to size(900,900), then the effect in the button The icon size is still size(30,30). See Figure 2

figure 1

figure 2

svg format picture code demo

Use svg format pictures as QPushButton icons

//首先要进行声明一个QSvgRenderer变量
    QSvgRenderer render;
//加载svg格式图片
    render.load (QString("/home/consys/svgtest/image/xjdh.svg"));
    //获取svg格式图片的默认大小
    QSize size = render.defaultSize ();
    qDebug()<<"default size : "<<size;
    //声明一个图标，指定该图片的大小，这里有是有必要的，该size要与pushbutton的大小一致，否则
    //作为pushbutton的图标只有pximap的大小
    QPixmap *pix = new QPixmap(ui->pushButton->size());
    pix->fill (Qt::transparent); // 像素清空
    //渲染svg格式的图片到pixmap中
    QPainter painter(pix);
    painter.setRenderHints (QPainter::Antialiasing);
    render.render (&painter);

    //设置pushbutton的图标
    ui->pushButton->setIcon(QIcon(*pix));
    //设置图标的大小，该大小最好与pushbutton的大小一致，如果大小不一致，则会保持pixmap的比例进行
    //相应的缩小，例如pushbutton的大小为size(900,400),pixmap的size(900,400）,设置iconsize
    //的大小为size(200,200),图标的形状是一个长方形，并不是一个正方形
    ui->pushButton->setIconSize(ui->pushButton->size());
    ui->pushButton->setFlat(false);

Generate svg format image example

   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 ();                 // 需要保证绘制结束

After the above code is run, a picture in temp.svg format will be generated in the executable program directory.

svg images are used in the normal way

    QPixmap pixmap;
    //加载svg格式的图片
    pixmap.load(":/image/xjdh.svg");
    //设置图标
    ui->pushButton->setIcon(QIcon(pixmap));
    //设置图标大小
    ui->pushButton->setIconSize(ui->pushButton->size());

Reading svg images according to the picture method is equivalent to a picture and does not take advantage of the characteristics of svg. The consequence of setting the icon in this way is that the icon does not have the function of amplification, that is, the default size of svg is as large as the maximum size of the image. As far as the size is concerned, when the size of the button is larger than the default size of svg, the icon cannot fill the entire pushbutton. What is explained here is that if you want the svg image itself to support distortion-free scaling, but to take effect in the Qt control, you must rely on the QSvgRenderer class to render the svg format image into a pixmap of different sizes, so that it can Take effect.

emphasize again

My own understanding is that images in svg format support zooming in and out. During this process, the image will not be distorted. However, svg images themselves cannot adaptively render images. They need to rely on media such as qpixmap. If you need to render two For buttons with completely different sizes, each button requires a pixmap to be set to the corresponding size. qpixmap uses the interface render provided by the QSvgRenderer class to render the image in svg format to the corresponding pixmap. From the result, QSvgRenderer uses svg The image renders two pixmaps of different sizes. The qpushbutton control is rendered through these two pixmaps of different sizes, and other controls are similar.

Reference link: Qt custom control----PushButton displays svg vector image_qpushbutton svg_Brother Xiangyou’s blog-CSDN blog