0
572
Vistas¿Cómo estirar/cambiar el tamaño de svgs en xaml de uwp?
Desde que salió la actualización de los creadores, uwp puede usar imágenes svg como se explica brevemente aquí (minuto 3) .
Tengo este svg (48x48) y puedo usarlo bien, si (y solo si) configuro el ancho y alto de la imagen en 48 y el estiramiento en ninguno:
<Image Source="ms-appx:///Assets//check.svg" Height="48" Width="48" Stretch="None"/>
Si configuro el estiramiento para llenar, la imagen desaparece. Si aumento el ancho y el alto, puedo ver que el ícono está anclado en la esquina superior izquierda de la imagen ( captura de pantalla con un svg diferente pero del mismo tamaño ). ¿No es Estirar = Rellenar y una altura/anchura fija la forma prevista de escalar una imagen?
Me parece que el algoritmo de estiramiento no comprende que se supone que mi svg es 48x48. ¿Lo estoy haciendo mal o hay soluciones?
3 Respuestas
Responde la pregunta0
Bien, ¡así es como resolví esto!
- Abra el archivo SVG
- El ancho y la altura del archivo SVG: ¡configúrelos en automático!
0
He tenido el mismo problema toda la mañana y estaba a punto de renunciar por completo a la compatibilidad con Svg, parece molesto que no puedas obtener un formato escalable para escalar correctamente...
Pero, tuve una oportunidad más y creo que he resuelto esto.
Parece que necesita decirle a SvgImageSource que rasterice en el tamaño de diseño original del SVG y luego haga que la Image la escale. No estoy seguro de que sea un enfoque particularmente útil, pero ciertamente lo resuelve a partir de la compilación 15063.
<Image Width="24" Stretch="Uniform" VerticalAlignment="Center"> <Image.Source> <SvgImageSource UriSource="ms-appx:///Assets/salesorder.folder.plain.svg" RasterizePixelHeight="48" RasterizePixelWidth="48" /> </Image.Source> </Image> Entonces, si el SVG era de 48x48, lo convertimos en un mapa de bits de 48x48 usando los valores RasterizePixelHeight y RasterizePixelWidth y luego la imagen se escala a 24x24.
Espero que ayude.
Actualizar Acabo de volver a leer su pregunta y me di cuenta de que estaba buscando aumentar la escala mientras que he estado trabajando para disminuirla. Parece que la técnica aún funciona, pero a medida que aumenta la escala, perderá la nitidez de la imagen debido al proceso de escala de mapa de bits. Creo que esto apunta a una falla fundamental en la implementación actual. Parece que están renderizando el svg como un mapa de bits, y tenemos que decirle el tamaño original para que se renderice correctamente, y luego permiten que el código de mapa de bits haga el resto del trabajo.
Creo que es algo discutible si se trata de un verdadero apoyo o de una extraña casa a mitad de camino. En algún lugar, alguien sugirió que Adobe Illustrator puede generar rutas XAML, creo que lo miraré para ver si puedo obtener una salida de mejor calidad, aunque es una pena porque me gusta mucho Inkscape :-(
0
Para mí, funcionó modificando un archivo SVG de esta manera:
- Agregue la propiedad
preserveAspectRatioadecuada a la etiquetasvg. Para mí fue"xMinYMin meet". - Establezca la propiedad
viewboxde la etiquetasvgen esta plantilla "0 0 ActualHeight ActualWidth", en mi caso fue"0 0 1050 805". - Establezca la
heighty elwidthde la etiquetasvgen"auto". Ahora el elemento svg es relativo a las propiedadesHeight,WidthyStretchque proporciona en su página o vista XAML. - Es posible que sea necesario reconstruir el proyecto para que el Diseñador XAML surta efecto.
Archivo SVG:
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1050 805" width="auto" height="auto" ... > ... </svg>Archivo XAML:
<Image Width="200" Source="ms-appx:///Assets/Photos/Illustrations/sample.svg" Stretch="UniformToFill" />