SVG Icon Studio: Validación y Renderizado Nativo de Iconos SVG…

Demo técnica de PowerBuilder 2025 R2

PowerBuilder 2025 R2 incorpora soporte nativo para gráficos vectoriales escalables (SVG) a través del motor de renderizado Skia. Esta demo técnica explora ese soporte presentando un estudio visual completo: galería de archivos SVG, vista previa en fondos claro y oscuro, escalado DPI, validación de compatibilidad y prueba directa en los controles nativos Picture, PictureButton y TreeView.

¿De qué trata esta demo?

SVG Icon Studio es una aplicación portable diseñada como banco de pruebas para evaluar el renderizado SVG nativo de PowerBuilder. Al ejecutarse, genera automáticamente ocho archivos SVG representativos —formas básicas, gradientes lineales y radiales, texto en ruta, recorte, máscara, filtro gaussiano y animación— y los presenta en un entorno visual organizado donde el desarrollador puede observar cómo se comportan bajo distintas condiciones.

El objetivo no es solo mostrar imágenes: la demo analiza el código XML de cada SVG, cuenta sus elementos gráficos y aplica un conjunto de reglas conservadoras para clasificar cada archivo como Compatible, Parcial o No compatible con el renderizador nativo de PowerBuilder.

Arquitectura del demo

El proyecto se organiza en diez objetos PowerBuilder con responsabilidades bien delimitadas:

• w_estudio_svg: Ventana coordinadora que organiza la interfaz como un banco de pruebas —explorador a la izquierda, mesa visual al centro, código XML a la derecha y resultados de compatibilidad en la parte inferior.

• nvo_servicio_archivos_svg: Servicio de lectura y escritura UTF-8, lectura binaria y generación de las ocho muestras SVG representativas.

• nvo_analizador_svg: Analizador ligero que cuenta elementos gráficos relevantes (<path>, <rect>, <circle>, gradientes, filtros) y formatea el XML para su lectura.

• nvo_validador_svg: Validador basado en reglas conservadoras que detecta animaciones, scripts, objetos externos, filtros y texto en ruta para clasificar la compatibilidad.

• u_galeria_svg: Control reutilizable derivado de Picture que presenta un SVG escalado sobre cualquier color de fondo.

• u_boton_svg: Control reutilizable derivado de PictureButton que permite cambiar la imagen SVG y el texto en tiempo de ejecución.

• u_arbol_svg: Control reutilizable derivado de TreeView que renueva sus imágenes SVG dinámicamente.

• d_inventario_svg / d_resultado_prueba_svg: DataWindows para la tabla de resultados en pantalla y el diseño del reporte PDF exportable.

Generación automática de muestras SVG

Al iniciar la demo, nvo_servicio_archivos_svg crea ocho archivos dentro de la carpeta muestras_svg. Cada archivo representa una capacidad SVG específica:

1muestras_svg/
2├─ formas_basicas.svg       → rect, circle, path
3├─ gradiente_lineal.svg    → linearGradient
4├─ gradiente_radial.svg    → radialGradient
5├─ texto_en_ruta.svg       → textPath
6├─ recorte.svg             → clipPath
7├─ mascara.svg             → mask
8├─ filtro_gaussiano.svg    → feGaussianBlur
9└─ animacion_no_compatible → animate + script

Todos los archivos se guardan en formato UTF-8 utilizando las funciones Blob(as_contenido, EncodingUTF8!) y FileWriteEx, lo que garantiza que caracteres especiales y acentos se conserven correctamente.

Validación de compatibilidad

El validador nvo_validador_svg inspecciona el código XML de cada SVG y aplica un sistema de tres niveles:

• Compatible (nivel 0): Formas básicas, gradientes, recortes y máscaras —elementos que el motor Skia de PowerBuilder renderiza sin problemas.

• Parcial (nivel 1): Filtros (feGaussianBlur) y texto en ruta (textPath) —funcionalidades que pueden renderizarse pero requieren verificación visual.

• No compatible (nivel 2): Animaciones declarativas (<animate>), scripts (<script>) y objetos HTML incrustados (<foreignObject>) —elementos que deben retirarse para un renderizado seguro.

Banco de pruebas visual

La interfaz de w_estudio_svg no es un formulario genérico: está organizada como un laboratorio visual con múltiples paneles simultáneos:

• Galería local: Lista de los ocho SVG generados, con selección instantánea.

• Vista previa principal: Imagen del SVG seleccionado a tamaño natural.

• Fondos contrastantes: El mismo SVG sobre fondo claro y fondo oscuro, ideal para verificar transparencias.

• Escalas DPI: Cuatro vistas simultáneas al 100 %, 125 %, 150 % y 200 %, demostrando la ventaja vectorial frente a imágenes ráster.

• Prueba en controles nativos: El SVG se aplica en tiempo real a un Picture, un PictureButton con texto, un TreeView con nodos y un botón simulando un menú de acciones.

• Código XML UTF-8: Visualización del código fuente del SVG, formateado con saltos de línea para facilitar la lectura.

Exportación de resultados como PDF

El botón Exportar reporte copia los resultados del inventario de compatibilidad a un DataStore con el diseño d_resultado_prueba_svg y permite guardarlos como un documento PDF. Esto facilita la documentación y la comunicación de resultados dentro del equipo.

1lds_reporte = Create DataStore
2lds_reporte.DataObject = "d_resultado_prueba_svg"
3dw_resultados.RowsCopy(1, dw_resultados.RowCount(), Primary!, lds_reporte, 1, Primary!)
4lds_reporte.SaveAs(ls_ruta, PDF!, True)

Portabilidad del proyecto

Los SVG utilizados por los controles Picture se referencian con rutas relativas bajo muestras_svg. La carpeta se crea automáticamente mediante GetCurrentDirectory(), por lo que el proyecto puede moverse a otra PC sin editar rutas absolutas ni depender de archivos de configuración externos.

Cómo probar la demo

11. Abrir Demo_SVG_pb.pbw en PowerBuilder 2025 R2
22. Compilar demo_svg_pb.pbt
33. Ejecutar la aplicación
44. Seleccionar un SVG de la galería local
55. Observar las vistas, el código XML y los resultados de compatibilidad
66. Hacer clic en “Validar galería” para evaluar todos los archivos
77. Hacer clic en “Exportar reporte” para generar el PDF

Conclusión

SVG Icon Studio demuestra que PowerBuilder 2025 R2, con su motor Skia, está preparado para adoptar iconografía vectorial moderna. La demo ofrece un banco de pruebas completo donde el desarrollador puede evaluar compatibilidad, comparar el renderizado en distintas escalas DPI y fondos, y verificar el comportamiento en controles nativos —todo desde una única ventana portable y sin dependencias externas.