Qt supports many standard file formats for loading graphical data, allowing applications to import content produced in other tools.
This article focuses on vector images, and which considerations to take when producing vector graphics content for use in a Qt application.
注意： For general information on Qt's support for 2D graphics, see the 2D Graphics in Qt documentation .
SVG files can be loaded in two different ways in Qt Quick : Either as a software-rasterized image using the 图像 component or using hardware-accelerated rendering with VectorImage (including converting the file ahead of time using svgtoqml )。
此外， QSvgRenderer provides general access to the software rasterizer. QSvgWidget and QGraphicsSvgItem provide convenience APIs for integrating SVG content in Qt Widgets 应用程序。
As a baseline, Qt supports the static features of the SVG 1.2 Tiny profile. A detailed list of the features supported by this profile is available in the SVG 1.2 Tiny specification .
In addition, some extended features are supported. These are currently only supported by the software rasterizer and not the hardware-accelerated renderer in VectorImage or svgtoqml .
Interactive features of SVG are not supported, but interaction can easily be implemented in either Qt Quick or Qt Widgets . Some specific animation types are also supported, using either the SMIL format or CSS keyframes.
Here follows a high-level list of supported and unsupported features to give an overview of what to expect. Unsupported features will be ignored as far as it is possible, so that SVG files that depend on unsupported features will still show, but they may have omissions or errors.
| High-level Feature | Software Rasterizer | VectorImage | 注释 |
|---|---|---|---|
| 变换 | Yes | Yes | |
| Basic shapes | Yes | Yes | Circles, rectangles, ellipses, lines, polylines and polygons |
| Arbitrary shapes | Yes | Yes | Composite paths built from arbitrary bezier curves and lines. |
| Raster images | Yes | Yes | Both embedded and stored on file system |
| Indirections | Yes | Yes | Specifically the "use" element |
| Conditional processing | Yes | Yes | Specifically the "switch" element |
| Simple text layouts | Yes | Yes | |
| Embedded fonts | Yes | Yes | |
| Solid color fills | Yes | Yes | |
| Gradient fills | Yes | Yes | |
| Customizable strokes | Yes | Yes | Customizable width, line caps, line joins, and dashes |
| Cosmetic strokes | Yes | No | Outlines that do not scale with the view |
| Gradient strokes | Yes | Yes | |
| 多媒体 | No | No | |
| Scripting | No | No | |
| Linking | No | No |
In addition, the following extended features are supported from SVG 1.1 and SVG 2.0:
| High-level Feature | Software Rasterizer | VectorImage | 注释 |
|---|---|---|---|
| Masks | Yes | No | |
| Clip paths | No | No | |
| Patterns | Yes | No | |
| Markers | Yes | No | |
| Reusable symbols | Yes | No | |
| Post-processing filters | Yes | No | feColorMatrix, feFlood, feGaussianBlur, feOffset and feMerge. |
And finally, the following property animations are supported (animations not listed here are currently unsupported). Animations should be exported in the CSS keyframes format for best results.
| Animation Feature | Software Rasterizer | VectorImage | 注释 |
|---|---|---|---|
| Transform animations | Yes | Yes | |
| Color animations | Yes | Yes | |
| Opacity animations | Yes | Yes |
Similarly to SVG, there are different ways of loading files in the Lottie format in Qt.
The LottieAnimation type loads an image and displays it using a software rasterizer, much like QSvgRenderer does for SVG.
In addition, hardware accelerated rendering is possible using VectorImage 和 lottietoqml tool. These are currently in tech preview state.
In order to use Lottie files with
VectorImage
，
vectorimageformats
plugin included with the
Qt Lottie Animation
module must be deployed together with the application. In addition, the
assumeTrustedSource
特性为
VectorImage
must be set to
true
.
The lottietoqml tool can be used to pre-convert Lottie source files to QML. An example of this can be found in the lottietoqml Example .
The following is a list of the high-level features supported by the LottieAnimation type (software rasterizer) and VectorImage (also including pre-converting files using lottietoqml )。
| High-level Feature | LottieAnimation | VectorImage | 注释 |
|---|---|---|---|
| 变换 | Yes | Yes | |
| 形状 | Yes | Yes | |
| Solid fills | Yes | Yes | |
| Gradient fills | Yes | Yes | |
| Customizable strokes | Yes | Yes | Customizable width, line caps, line joins, and dashes |
| Gradient strokes | No | No | |
| Image layers | Yes | Yes | Embedded data only |
| Precomposition layers | Yes | Yes | |
| Path trimming | Yes | Yes | |
| Mattes | Yes | No | |
| Masks | No | No | |
| Repeaters | Yes | No | |
| Layer effects | Fill effect only | No | |
| Text layers | No | No | |
| 多媒体 | No | No | Audio and camera layers not supported. |
| Expressions | No | No | |
| 3D Layers | No | No | |
| Time remapping | No | No |
In principle, almost any property in the Lottie format can be animated. For extensive support of animatable properties, use LottieAnimation 。 VectorImage type (and lottietoqml ) provides support for a selected subset of properties that are commonly used to create animations.
| High-level Feature | LottieAnimation | VectorImage | 注释 |
|---|---|---|---|
| Transform animations | Yes | Yes | |
| Path trim animations | Yes | Yes | |
| Color animations | Yes | Yes | |
| Opacity animations | Yes | Yes | |
| Path animations | Yes | No | Morphing animations of control points of shapes. |
| Other property animations | Yes | No |
In addition to conventional format for vector graphics, like SVG, it is also possible to utilize custom font files where vector graphics assets are stored as glyphs.
This has the advantage that simple illustrations can be inlined in text labels, with typographical properties similar to text. This, in turn, that can make the alignment of the images with text easier.
Using font files for this purpose can also be a convenient way to distribute large icon libraries, as well as providing themes that can be replaced at run-time.
However, font use in Qt is optimized for producing text, so there are some considerations when using icon fonts as an alternative to specialized vector image components like VectorImage .
First of all, color fonts will always be pre-rasterized at the specified pixel size. This means that applying transforms to such text items will cause scaling artifacts. For illustrations that require zooming for instance, using VectorImage is preferable.
Using the specialized components is also preferable for any animated vector image. While the variable font format extension makes morphing animations possible, this is not the use the font system in Qt is optimized for. Therefore, animating the variable axes of a font will be less efficient than using another vector image format.
So for animated and/or multi-color vector images, using a format such as SVG should typically be preferred. For single-color, static ones, using a font is an option with certain conveniences.
注意： 另请参阅 standard icon support in Qt Quick Controls .
