Formatos de Imagen Vectorial en Qt
Qt soporta muchos formatos de archivo estándar para cargar datos gráficos, permitiendo a las aplicaciones importar contenido producido en otras herramientas.
Este artículo se centra en las imágenes vectoriales y en las consideraciones a tener en cuenta al producir contenido gráfico vectorial para su uso en una aplicación Qt.
Nota: Para obtener información general sobre el soporte de Qt para gráficos 2D, consulte la documentación Gráficos 2D en Qt.
Formato de archivo: SVG
Los archivos SVG pueden cargarse de dos formas diferentes en Qt Quick: Ya sea como una imagen rasterizada por software utilizando el componente Image o utilizando renderizado acelerado por hardware con VectorImage (incluyendo la conversión del archivo por adelantado utilizando svgtoqml.)
Además, QSvgRenderer proporciona acceso general al rasterizador de software. QSvgWidget y QGraphicsSvgItem proporcionan API prácticas para integrar contenido SVG en aplicaciones. Qt Widgets aplicaciones.
Como base, Qt admite las funciones estáticas del perfil SVG 1.2 Tiny. En la especificación SVG 1.2 Tiny se ofrece una lista detallada de las funciones que admite este perfil.
Además, se admiten algunas funciones ampliadas. Actualmente, sólo son compatibles con el rasterizador de software y no con el renderizador acelerado por hardware de VectorImage o svgtoqml.
Las características interactivas de SVG no son compatibles, pero la interacción puede implementarse fácilmente en Qt Quick o en Qt Widgets. También se admiten algunos tipos específicos de animación, utilizando el formato SMIL o fotogramas clave CSS.
A continuación se incluye una lista de las funciones compatibles y no compatibles para ofrecer una visión general de lo que se puede esperar. Las características no compatibles se ignorarán en la medida de lo posible, de modo que los archivos SVG que dependan de características no compatibles seguirán mostrándose, pero es posible que presenten omisiones o errores.
| Característica de alto nivel | Rasterizador de software | VectorImage | Comentario |
|---|---|---|---|
| Transformaciones | Sí | Sí | |
| Formas básicas | Sí | Sí | Círculos, rectángulos, elipses, líneas, polilíneas y polígonos |
| Formas arbitrarias | Sí | Sí | Trazados compuestos a partir de curvas Bézier y líneas arbitrarias. |
| Imágenes rasterizadas | Sí | Sí | Tanto incrustadas como almacenadas en el sistema de archivos |
| Indirecciones | Sí | Sí | Específicamente el elemento "use |
| Tratamiento condicional | Sí | Sí | En concreto, el elemento "switch |
| Diseños de texto sencillos | Sí | Sí | |
| Fuentes incrustadas | Sí | Sí | |
| Rellenos de color sólido | Sí | Sí | |
| Rellenos de degradado | Sí | Sí | |
| Trazos personalizables | Sí | Sí | Anchura, saltos de línea, uniones de línea y guiones personalizables |
| Trazos cosméticos | Sí | No | Contornos que no cambian de escala con la vista |
| Trazos degradados | Sí | Sí | |
| Multimedia | No | No | |
| Scripting | No | No | |
| Enlace | No | No |
Además, las siguientes características ampliadas son compatibles con SVG 1.1 y SVG 2.0:
| Característica de alto nivel | Rasterizador de software | VectorImage | Comentario |
|---|---|---|---|
| Máscaras | Sí | Sí | |
| Recorridos de recorte | No | No | |
| Patrones | Sí | No | |
| Marcadores | Sí | No | |
| Símbolos reutilizables | Sí | Sí | |
| Filtros de postprocesamiento | Sí | Sí | feColorMatrix, feFlood, feGaussianBlur, feOffset y feMerge. |
Y, por último, se admiten las siguientes animaciones de propiedades (las animaciones que no figuran en esta lista no se admiten actualmente). Para obtener mejores resultados, las animaciones deben exportarse en el formato de fotogramas clave CSS.
| Animación | Rasterizador de software | VectorImage | Comentario |
|---|---|---|---|
| Animaciones de transformación | Sí | Sí | |
| Animaciones de color | Sí | Sí | |
| Animaciones de opacidad | Sí | Sí | |
| Animaciones de desplazamiento | Sí | Sí | Animación de la posición y orientación de un elemento a lo largo de una trayectoria |
Formato de archivo: Lottie
De forma similar a SVG, existen diferentes formas de cargar archivos en formato Lottie en Qt.
El tipo LottieAnimation carga una imagen y la muestra utilizando un rasterizador de software, al igual que QSvgRenderer hace para SVG.
Además, es posible el renderizado acelerado por hardware utilizando VectorImage y la herramienta lottietoqml.
Para utilizar archivos Lottie con VectorImage, el complemento vectorimageformats incluido en el módulo Qt Lottie Animation debe desplegarse junto con la aplicación. Además, la propiedad assumeTrustedSource de VectorImage debe establecerse en true.
La herramienta lottietoqml puede utilizarse para preconvertir los archivos fuente Lottie a QML. Puede encontrar un ejemplo en el ejemplo lottietoqml.
A continuación figura una lista de las características de alto nivel admitidas por el tipo LottieAnimation (rasterizador de software) y VectorImage (incluida también la preconversión de archivos mediante lottietoqml).
| Característica de alto nivel | LottieAnimation | VectorImage | Comentario |
|---|---|---|---|
| Transformaciones | Sí | Sí | |
| Formas | Sí | Sí | |
| Rellenos sólidos | Sí | Sí | |
| Rellenos degradados | Sí | Sí | |
| Trazos personalizables | Sí | Sí | Anchura, saltos de línea, uniones de línea y guiones personalizables |
| Trazos degradados | No | No | |
| Capas de imagen | Sí | Sí | Sólo datos incrustados |
| Capas de precomposición | Sí | Sí | |
| Recorte de trayectorias | Sí | Sí | |
| Mates | Sí | Sí | |
| Máscaras | No | No | |
| Repetidores | Sí | No | |
| Efectos de capa | Sólo efecto de relleno | No | |
| Capas de texto | No | No | |
| Multimedia | No | No | No admite capas de audio ni de cámara. |
| Expresiones | No | No | |
| Capas 3D | No | No | |
| Reasignación de tiempo | No | No |
En principio, casi cualquier propiedad del formato Lottie puede animarse. Para un amplio soporte de propiedades animables, utilice LottieAnimation. El tipo VectorImage (y lottietoqml) proporciona soporte para un subconjunto seleccionado de propiedades que se utilizan habitualmente para crear animaciones.
| Característica de alto nivel | LottieAnimation | VectorImage | Comentario |
|---|---|---|---|
| Animaciones de transformación | Sí | Sí | |
| Animaciones de recorte de trayectoria | Sí | Sí | |
| Animaciones de color | Sí | Sí | |
| Animaciones de opacidad | Sí | Sí | |
| Animaciones de trayectoria | Sí | Sí | Animaciones de morphing de puntos de control de formas. |
| Movimiento a lo largo de trayectorias | Sí | Sí | Animación de la posición y orientación de elementos a lo largo de una trayectoria |
| Otras animaciones de propiedades | Sí | No |
Formato de archivo: Archivos de fuentes como formato de imagen vectorial
Además del formato convencional para gráficos vectoriales, como SVG, también es posible utilizar archivos de fuentes personalizados en los que los activos gráficos vectoriales se almacenan como glifos.
Esto tiene la ventaja de que las ilustraciones sencillas pueden incluirse en etiquetas de texto, con propiedades tipográficas similares a las del texto. Esto, a su vez, puede facilitar la alineación de las imágenes con el texto.
El uso de archivos de fuentes para este propósito también puede ser una manera conveniente de distribuir grandes bibliotecas de iconos, así como proporcionar temas que pueden ser reemplazados en tiempo de ejecución.
Sin embargo, el uso de fuentes en Qt está optimizado para producir texto, por lo que hay que tener en cuenta algunas consideraciones a la hora de utilizar fuentes de iconos como alternativa a componentes especializados en imágenes vectoriales como VectorImage.
En primer lugar, las fuentes en color siempre estarán pre-rasterizadas al tamaño de píxel especificado. Esto significa que la aplicación de transformaciones a dichos elementos de texto provocará artefactos de escalado. Para ilustraciones que requieran zoom, por ejemplo, es preferible utilizar VectorImage.
También es preferible utilizar los componentes especializados para cualquier imagen vectorial animada. Aunque la extensión de formato de fuente variable hace posible las animaciones morphing, este no es el uso para el que está optimizado el sistema de fuentes en Qt. Por lo tanto, animar los ejes variables de una fuente será menos eficiente que utilizar otro formato de imagen vectorial.
Así que para imágenes vectoriales animadas y/o multicolor, normalmente se preferirá usar un formato como SVG. Para las estáticas de un solo color, utilizar una fuente es una opción con ciertas comodidades.
Nota: Véase también el soporte para iconos estándar en Qt Quick Controls.
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
