¿Cómo redimensionar un documento durante la conversión de SVG? – C#

En el mundo actual, la mayoría de los documentos están en formato A4, pero a veces el contenido renderizado desde SVG tiene un tamaño diferente. Esto resulta en mucho espacio en blanco en la página, ¡o el contenido simplemente no cabe en la página! En este artículo, consideraremos cómo utilizar las opciones de renderizado para redimensionar las páginas de documentos al tamaño del contenido y viceversa.

Cómo redimensionar un documento cuando se renderiza con Aspose.SVG

El Aspose.Svg.Rendering namespace proporciona un conjunto poderoso de herramientas como clases de opciones de bajo nivel, interfaces y enumeraciones para renderizar documentos SVG a diferentes formatos de salida como PDF, XPS e imágenes. Por defecto, SVG se convierte en un documento de tamaño A4, que probablemente contenga algo de espacio vacío además de la imagen. Pero a veces, puede que necesite recortar documentos para crear un tamaño de página más pequeño que se ajuste al tamaño del contenido de la página.

La clase PageSetup proporciona un conjunto de propiedades para gestionar la configuración de la página para documentos SVG al renderizarlos a diferentes formatos de archivo. Echemos un vistazo a algunas de las más utilizadas:

Configurar la configuración de la página. La propiedad AnyPage le permite establecer la configuración de la página (tamaño, márgenes, orientación, etc.) para cualquier página de un documento SVG que se renderiza a un formato de múltiples páginas, como PDF, XPS, PNG, JPG, etc. Utilice las clases Page, Size y Margin para gestionar la configuración de la página para documentos SVG al renderizarlos a diferentes formatos de archivo.
Redimensionar el documento para que se ajuste al tamaño del contenido. Puede ajustar el tamaño de la página al contenido y viceversa utilizando la propiedad Sizing con la enumeración SizingType. Esta propiedad es un conjunto de banderas que controlan el comportamiento del renderizador. Puede recortar documentos o escalar documentos para que coincidan con su contenido al tamaño de la página.

Puede utilizar fácilmente los ejemplos de C# en este artículo para convertir SVG a imágenes, PDF y XPS con un diseño de página personalizado. Las únicas diferencias están en especificar:

las opciones de renderizado apropiadas – ImageRenderingOption, PdfRenderingOption o XpsRenderingOption;
el dispositivo de salida apropiado – ImageDevice, PdfDevice o XpsDevice.

SVG a PNG con opciones de renderizado predeterminadas

Para convertir SVG a PNG con opciones de renderizado predeterminadas, debe seguir unos pocos pasos:

Utilice uno de los constructores SVGDocument() para inicializar una instancia de document. En los siguientes ejemplos, cargamos un archivo SVG local.
Inicialice una instancia de la clase ImageRenderingOption si desea convertir SVG a un formato de archivo de imagen. Por defecto, ImageFormat es PNG.
Cree una nueva instancia de la clase ImageDevice . Utilice el constructor ImageDevice() que toma options y la ruta del archivo de salida savePath como parámetros.
Utilice el método RenderTo(device) para convertir SVG a PNG, que toma el objeto device como parámetro.

El siguiente fragmento de código C# muestra un ejemplo de cómo convertir un documento SVG a una imagen sin opciones adicionales, es decir, con opciones de renderizado predeterminadas. Como resultado de la conversión, se obtuvo un documento PNG A4 con mucho espacio vacío (ver ilustraciones de los resultados de conversión (a)).

 1using Aspose.Svg.Rendering;
 2using Aspose.Svg.Rendering.Image;
 3using System.IO;
 4...
 5
 6    // Preparar la ruta a un archivo SVG fuente
 7    string documentPath = Path.Combine(DataDir, "rendering.svg");
 8
 9    // Preparar una ruta para guardar el archivo convertido
10    string savePath = Path.Combine(OutputDir, "a4.png");
11
12    // Crear una instancia de la clase SVGDocument
13    using SVGDocument document = new SVGDocument(documentPath);
14
15    // Inicializar un objeto ImageRenderingOptions con opciones predeterminadas
16    ImageRenderingOptions opt = new ImageRenderingOptions();
17
18    // Crear un dispositivo de renderizado de salida y convertir SVG
19    using ImageDevice device = new ImageDevice(opt, savePath);
20    document.RenderTo(device);

Opciones de renderizado – Rendering Options

La enumeración SizingType del namespace Aspose.Svg.Rendering especifica banderas que, junto con otras opciones de PageSetup, definen diferentes estrategias para ajustar el tamaño de la página o el tamaño del contenido al renderizar documentos SVG.

Nombre	Descripción
AjustarContenido	Ajusta el tamaño de la página para que se ajuste al contenido sin escalar. Esto asegura que todo el contenido SVG sea visible sin márgenes adicionales. Ideal para documentos donde el contenido debe determinar el tamaño de la página.
EscalarContenido	Escala el contenido para que se ajuste a un tamaño de página predefinido. La relación de aspecto del contenido puede cambiar para ajustarse a las dimensiones especificadas. Esta opción es útil cuando necesita que el contenido se ajuste a un diseño de página fijo.
Contener	Redimensiona el contenido para que se ajuste a las dimensiones de la página mientras mantiene la relación de aspecto. A diferencia de `ScaleContent`, este método asegura que la relación de aspecto permanezca intacta, lo que puede resultar en espacios vacíos si la relación de aspecto del contenido difiere de la de la página.
Recortar	Ajusta el contenido a una página y recorta cualquier porción que se extienda más allá de ciertos límites de la página.

Ajustar la página al contenido SVG al convertir SVG a JPG

Para ajustar el tamaño de la página de la imagen de salida al ancho y alto del contenido, necesita utilizar la bandera FitContent, que ajustará el tamaño de la página para que se ajuste al contenido sin escalar. Veamos los pasos que debe seguir:

Cargue un archivo SVG. En el ejemplo, el constructor SVGDocument(documentPath) carga el documento SVG desde un sistema de archivos local.
Cree una instancia de la clase ImageRenderingOption. En este ejemplo, establecemos el SizingType en FitContent, lo que significa que el tamaño de la página del documento de salida se ajustará al ancho y alto del contenido sin escalar.
Cree una nueva instancia de la clase ImageDevice y pásela al método RenderTo(device) para convertir SVG a JPG.

 1using Aspose.Svg.Rendering;
 2using Aspose.Svg.Rendering.Image;
 3using System.IO;
 4...
 5    // Preparar la ruta a un archivo SVG fuente
 6    string documentPath = Path.Combine(DataDir, "rendering.svg");
 7
 8    // Preparar una ruta para guardar el archivo convertido
 9    string savePath = Path.Combine(OutputDir, "fitContent.jpg");
10
11    // Crear una instancia de la clase SVGDocument
12    using SVGDocument document = new SVGDocument(documentPath);
13
14    // Inicializar un objeto ImageRenderingOptions con opciones personalizadas. Usar la bandera AjustarContenido
15    ImageRenderingOptions opt = new ImageRenderingOptions(ImageFormat.Jpeg);
16    opt.PageSetup.Sizing = SizingType.FitContent;
17
18    // Crear un dispositivo de renderizado de salida y convertir SVG
19    using ImageDevice device = new ImageDevice(opt, savePath);
20    document.RenderTo(device);

La conversión de SVG a JPG resultó en un documento JPG con un tamaño de página que se ajusta al contenido SVG (ver ilustraciones de los resultados de conversión (b)).

Nota: Al convertir un SVG a un formato de trama como JPG, el tamaño en píxeles de la imagen puede cambiar debido a diferencias en la resolución (DPI). Los SVG son independientes de la resolución, lo que significa que sus dimensiones se definen en un sistema de coordenadas en lugar de en píxeles fijos. Al convertir, la resolución predeterminada se establece en 300 DPI, mientras que la resolución estándar de pantalla es de 96 DPI. Esto resulta en una imagen de salida más grande porque los tamaños de píxeles se escalan proporcionalmente. Por ejemplo, un SVG de 350 x 350 unidades se convertirá aproximadamente a 1094 x 1094 píxeles a 300 DPI. Para mantener las dimensiones originales, es importante especificar la resolución deseada al convertir.

Para todos los ejemplos en el artículo, utilizamos el archivo fuente rendering.svg – 350 x 350 px.

Escalar contenido al renderizar SVG a JPG

En el siguiente ejemplo, la propiedad AnyPage establece el tamaño de la página en 1500x3000 píxeles, que es más grande de lo necesario para acomodar los contenidos del documento SVG. Usando SizingType con la bandera ScaleContent escala el contenido SVG para que quepa en la página:

 1using Aspose.Svg.Rendering;
 2using Aspose.Svg.Rendering.Image;
 3using Aspose.Svg.Drawing;
 4using System.IO;
 5...
 6    // Preparar la ruta a un archivo SVG fuente
 7    string documentPath = Path.Combine(DataDir, "rendering.svg");
 8
 9    // Preparar una ruta para guardar el archivo convertido
10    string savePath = Path.Combine(OutputDir, "scaleContent.png");
11
12    // Crear una instancia de la clase SVGDocument
13    using SVGDocument document = new SVGDocument(documentPath);
14
15    // Inicializar un objeto ImageRenderingOptions con opciones personalizadas. Usar la bandera EscalarContenido
16    ImageRenderingOptions opt = new ImageRenderingOptions();
17    opt.PageSetup.AnyPage = new Page(new Drawing.Size(1500, 3000));
18    opt.PageSetup.Sizing = SizingType.ScaleContent;
19
20    // Crear un dispositivo de renderizado de salida y convertir SVG
21    using ImageDevice device = new ImageDevice(opt, savePath);
22    document.RenderTo(device);

La conversión de SVG a PNG resultó en una imagen PNG de 1500x3000 que fue escalada (ampliada) sin mantener la relación de aspecto (ver la ilustración de los resultados de conversión (с)).

Escalar contenido usando la bandera `Contain`

La bandera Contain controla el tamaño del contenido y permite que se escale mientras mantiene su relación de aspecto. El contenido se escala hasta que se ajusta al ancho o alto de la página. El siguiente ejemplo muestra cómo se puede usar la bandera Contain en combinación con el establecimiento de un tamaño de página de 2000x2500 píxeles. Si no se establece el tamaño de la página, el resultado se escalará y se ajustará al formato A4 al renderizar.

 1using Aspose.Svg.Rendering;
 2using Aspose.Svg.Rendering.Image;
 3using System.IO;
 4...
 5    // Preparar la ruta a un archivo SVG fuente
 6    string documentPath = Path.Combine(DataDir, "rendering.svg");
 7
 8    // Preparar la ruta para guardar el archivo convertido
 9    string savePath = Path.Combine(OutputDir, "using-contain.png");
10
11    // Inicializar SVGDocument
12    using SVGDocument document = new SVGDocument(documentPath);
13
14    // Inicializar un objeto ImageRenderingOptions con opciones personalizadas. Usar la bandera Contener
15    ImageRenderingOptions opt = new ImageRenderingOptions();
16    opt.PageSetup.AnyPage = new Page(new Drawing.Size(2000, 2500));
17    opt.PageSetup.Sizing = SizingType.Contain;
18
19    // Crear un dispositivo de renderizado de salida y convertir SVG
20    using ImageDevice device = new ImageDevice(opt, savePath);
21    document.RenderTo(device);

En el ejemplo, la propiedad AnyPage de la PageSetup establece un nuevo objeto Page con un Size de 2000x2500 píxeles. Esto establece el tamaño de la página en 2000x2500 píxeles. Luego establecemos la propiedad Sizing del objeto PageSetup para incluir la bandera Contain. Esto significa que el contenido del documento de salida se escalará para ajustarse al ancho o alto de la página mientras mantiene sus proporciones. En este ejemplo, la imagen se ajusta al ancho de la página (ver la ilustración de los resultados de conversión (d)).

Recortar SVG al resultado renderizado

Para recortar el tamaño de la página de salida al ancho y alto requeridos, necesita establecer primero el tamaño de la página y luego la bandera SizingType.Crop en la propiedad Sizing. Si no establece las dimensiones de la página requeridas, entonces se elegirá el tamaño A4 por defecto.

 1using Aspose.Svg.Rendering;
 2using Aspose.Svg.Rendering.Image;
 3using Aspose.Svg.Drawing;
 4using System.IO;
 5...
 6    // Preparar la ruta a un archivo SVG fuente
 7    string documentPath = Path.Combine(DataDir, "rendering.svg");
 8
 9    // Preparar una ruta para guardar el archivo convertido
10    string savePath = Path.Combine(OutputDir, "using-crop.jpg");
11
12    // Inicializar SVGDocument
13    using SVGDocument document = new SVGDocument(documentPath);
14
15    // Inicializar un objeto ImageRenderingOptions con opciones personalizadas. Usar la bandera Recortar
16    ImageRenderingOptions opt = new ImageRenderingOptions(ImageFormat.Jpeg);
17    opt.PageSetup.AnyPage = new Page(new Drawing.Size(500, 500));
18    opt.PageSetup.Sizing = SizingType.Crop;
19
20    // Crear un dispositivo de renderizado de salida y convertir SVG
21    using ImageDevice device = new ImageDevice(opt, savePath);
22    document.RenderTo(device);

Figuras de los resultados de conversión

La figura muestra los resultados de convertir el archivo rendering.svg a formatos PNG y JPG utilizando el método RenderTo() y varias opciones de renderizado que controlan el tamaño de la página del documento de salida.

Nota: La imagen SVG fuente es de 350x350 píxeles.

Texto “La imagen ilustra los resultados del redimensionamiento del documento”

a) El resultado de convertir SVG a PNG con opciones de renderizado predeterminadas es un documento PNG del tamaño de una página A4 con mucho espacio en blanco. La imagen renderizada en una página A4 se estira en altura y ancho aproximadamente 3 veces ya que la resolución predeterminada es de 300 dpi.

b) La conversión del SVG a JPG resultó en un documento JPG con un ancho y alto de página que se ajusta al ancho y alto del contenido. La imagen renderizada se estira aproximadamente 3 veces en altura y ancho porque la resolución predeterminada es de 300 dpi.

c) El resultado de convertir SVG a PNG con escalado (ampliación) sin preservar las proporciones.

d) La conversión de SVG a PNG resultó en un documento PNG en el que la imagen SVG se escaló para ajustarse al ancho de la página de salida mientras mantenía la relación de aspecto de la imagen.

Véase también

Cómo convertir archivos SVG – Aprenderá cómo convertir SVG a otros formatos en C#, encontrará ejemplos de código en C# y probará un convertidor en línea de SVG.
Cómo fusionar archivos SVG – Aprenderá cómo fusionar múltiples SVG a formatos PDF, XPS o Imagen utilizando el método Render() y encontrará ejemplos de C# de fusión de SVGs.
Vectorización – Visión general básica – Los artículos en esta sección explican cómo convertir imágenes de trama a gráficos vectoriales utilizando la API Aspose.SVG para .NET.

Cómo convertir archivos SVG Cómo cambiar el color SVG