SVG en WPF: elige un renderizador o un dibujo XAML

Un SVG se abre en tu navegador, pero poner su nombre de archivo en un Image de WPF no proporciona el mismo proceso de renderizado. Empieza por elegir qué recibirá realmente la aplicación: SVG procesado por una biblioteca, objetos de dibujo nativos de WPF o una exportación ráster.

Los códecs de imagen integrados de WPF incluyen PNG y JPEG, pero no enumeran SVG. Su control Image también puede mostrar un DrawingImage, así que mostrar vectores no tiene por qué significar cargar directamente un archivo SVG. Microsoft documenta estos métodos por separado como imágenes y dibujos como origen de imagen.

Esta guía utiliza un icono original de marcador para concretar esa elección. El SVG y el XAML siguientes se escribieron a mano; no son una prueba comparativa de conversores ni una captura de una aplicación Windows.

Elige la representación antes de cambiar el archivo

Estas opciones se refieren al objeto que muestra tu aplicación. No deciden si el diseñador debe conservar un maestro SVG editable. Conserva ese maestro aunque la aplicación reciba un PNG.

Prueba primero un DrawingImage nativo pequeño

Para un icono sencillo, un dibujo creado a mano ofrece una referencia útil sin introducir un analizador SVG. Microsoft muestra la estructura: establece Image.Source en un DrawingImage y asigna el dibujo a su propiedad Drawing. El siguiente ejemplo original sigue ese patrón documentado.

Este es el diseño SVG: un marcador verde azulado y un círculo coral separado. Guárdalo como bookmark.svg si quieres un original que comparar en tu editor.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80"
     viewBox="0 0 120 80">
  <path fill="#176B64" d="M20 12 H64 V68 L42 54 L20 68 Z"/>
  <circle fill="#EC785E" cx="92" cy="24" r="10"/>
</svg>

Coloca este Image dentro del contenedor de diseño de una ventana WPF existente, como un Grid:

<Image xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       Width="120" Height="80" Stretch="Uniform">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="Transparent"
                           Geometry="M0,0 H120 V80 H0 Z"/>
          <GeometryDrawing Brush="#176B64"
                           Geometry="M20,12 H64 V68 L42,54 L20,68 Z"/>
          <GeometryDrawing Brush="#EC785E">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="92,24" RadiusX="10" RadiusY="10"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

Los dos objetos de dibujo visibles describen el marcador y el círculo por separado. El rectángulo transparente establece los límites completos del dibujo del ejemplo, de 120 por 80, incluido el margen vacío alrededor de la ilustración. No recorta geometría posterior ni convierte el XAML en un documento SVG.

Las coordenadas son decisiones deliberadas de creación. Compara los dos fragmentos: el marcador utiliza los mismos puntos y el círculo utiliza el mismo centro y radio. Es una pequeña traducción manual que puedes revisar, no una receta para traducir todas las funciones SVG a XAML.

Los archivos de origen se han comprobado como XML, pero este ejemplo no se ha compilado ni renderizado en una aplicación WPF de Windows. Pruébalo en tu proyecto antes de adoptarlo.

Comprueba los límites y los pinceles antes de hacerlo reutilizable

Empieza con el tamaño suministrado. Confirma que la muesca inferior del marcador sigue visible y el círculo permanece separado. Después prueba un espacio de diseño más ancho o más alto. Stretch="Uniform" conserva las proporciones mientras se adapta al área disponible, como describe la guía de Microsoft sobre estiramiento de imágenes.

Cambia el valor coral de Brush por otro color. Es una edición deliberada de un objeto de dibujo nativo; no demuestra que partes arbitrarias de un SVG importado vayan a ofrecer controles igual de cómodos.

Si el dibujo parece descentrado, compara sus límites con el viewBox del SVG y los márgenes vacíos. Una silueta correcta puede ocupar una fracción distinta de su espacio de diseño. Conserva esta referencia sencilla mientras incorporas la ilustración final.

Usa un renderizador cuando SVG siga siendo la entrada

Cuando no resulte práctico mantener a mano la geometría nativa, evalúa una biblioteca que lea explícitamente SVG para WPF. El paquete SharpVectors.Wpf proporciona componentes de análisis, conversión y visualización de SVG. Su página de paquete es el lugar adecuado para comprobar la versión actual, los frameworks de destino y las dependencias antes de añadirlo a un proyecto.

La documentación de primeros pasos de SharpVectors describe la conversión en objetos de dibujo de WPF y ejemplos para visualización basada en imágenes. Eso lo convierte en un método distinto de pedir al proceso habitual de mapas de bits que decodifique un nombre de archivo SVG.

Usa el marcador original como primera entrada de la biblioteca y después sustitúyelo por tu ilustración real. Mantén separadas estas comprobaciones:

1. Carga: ¿el ejemplo elegido resuelve el archivo o recurso de aplicación en tu proyecto?
2. Representación: ¿la API devuelve objetos de dibujo, produce XAML o renderiza un mapa de bits para tu caso de uso?
3. Apariencia: ¿la muesca, el círculo separado, los colores y los márgenes vacíos son correctos en la aplicación en ejecución?
4. Despliegue: ¿el resultado requiere el ensamblado de ejecución de la biblioteca u otros recursos en la máquina de destino?

Sigue los ejemplos que correspondan a la versión instalada. SharpVectors documenta un ajuste IncludeRuntime, marca TextAsGeometry como obsoleto y señala cambios de espacios de nombres para la versión 2.0. Son motivos para revisar los fragmentos antiguos antes de copiar sus ajustes, no para suponer que una configuración de conversión seguirá siendo adecuada indefinidamente. Documentación de SharpVectors

Para un logotipo con letras, inspecciona tanto la salida real de destino como el original. Nuestra guía sobre cambios de fuente en SVG explica la diferencia entre texto que depende de fuentes y letras conservadas como contornos. Convertir texto puede cambiar lo que sigue siendo editable, así que conserva el archivo de diseño original.

No tomes SvgImageSource del framework XAML equivocado

Buscar este problema puede llevarte a la referencia SvgImageSource de Microsoft. La documentación de la clase UWP sitúa ese tipo en Windows.UI.Xaml.Media.Imaging. Es una API distinta de los controles y clases multimedia System.Windows de WPF.

Comprueba el framework que menciona un ejemplo antes de añadir un espacio de nombres o paquete. Un marcado XAML parecido no convierte un origen de imagen UWP o WinUI en una función integrada de WPF. Una solución para otro framework puede ser válida allí y seguir siendo la respuesta incorrecta para tu proyecto de escritorio.

Decide si un PNG es suficiente

Una exportación PNG es una opción de entrega razonable cuando se conocen los tamaños necesarios y la aplicación no necesita editar la geometría. Exporta para esos tamaños, compara los bordes transparentes con el fondo real e inspecciona el mayor tamaño de visualización. Aumentar el tamaño de diseño de un mapa de bits no recrea los trazados originales.

Comprueba también qué hay dentro del SVG antes de dedicar tiempo a una biblioteca de renderizado. Si solo incrusta una imagen ráster, importar el contenedor no convertirá esa imagen en geometría editable. La guía de SVG con ráster incrustado muestra qué inspeccionar. Para una colección de iconos, aplica las mismas comprobaciones de márgenes y silueta en todo el conjunto; nuestro flujo de preparación de iconos de interfaz explica esa fase de preparación de la ilustración.

Si el marcador o logotipo solo se conserva como PNG o JPG, el flujo de imagen a vector de PerfectVector puede ayudarte a preparar un SVG editable candidato. Inspecciona la silueta recuperada, la muesca y los detalles separados antes de elegir un método de entrega a WPF. La vectorización prepara la ilustración; no instala un renderizador WPF ni garantiza una conversión a XAML nativo.

La guía general de vectorización de imágenes explica ese paso de recuperación del original. Una vez listo el original, las comprobaciones de la aplicación siguen correspondiendo a WPF.

Preguntas frecuentes

¿Image de WPF puede cargar directamente un archivo SVG? Los códecs de imagen integrados documentados de WPF no incluyen SVG. Usa una biblioteca compatible con SVG, proporciona objetos de dibujo nativos mediante DrawingImage o suministra un formato ráster compatible como PNG.

¿DrawingImage es lo mismo que un archivo SVG? No. DrawingImage muestra objetos de dibujo de WPF. Una biblioteca SVG puede crear esos objetos o puedes crearlos directamente, como en el pequeño ejemplo de aquí.

¿Puedo utilizar el ejemplo UWP de SvgImageSource en WPF? No lo trates como una API integrada de WPF. La referencia UWP pertenece a otro espacio de nombres y framework; elige código y dependencias para tu aplicación real.

¿Convertir un SVG a XAML conservará todos los efectos? No lo supongas. Comprueba las capacidades documentadas del conversor e inspecciona tu ilustración en la aplicación de destino, incluidos texto, límites, formas separadas y efectos.

Fuentes

1. Microsoft — Introducción a las imágenes en WPF — Formatos de mapa de bits integrados y comportamiento del estiramiento de imágenes.
2. Microsoft — Usar un dibujo como origen de imagen — DrawingImage nativo y estructura de objetos de dibujo.
3. SharpVectors — Primeros pasos — Conversión de dibujos WPF, ajustes de ejecución y advertencias de migración documentadas.
4. NuGet — SharpVectors.Wpf — Identidad actual del paquete e información de compatibilidad.
5. Microsoft — Clase SvgImageSource de UWP — Límite de framework y espacio de nombres de una API que suele confundirse.

Elige un método para WPF y compara un diseño pequeño antes de sustituir todo tu conjunto de recursos. Si necesitas recuperar una ilustración ráster, prepara un SVG editable candidato, inspecciona las formas y prueba después la representación elegida en tu aplicación.