Comment redimensionner un document lors de la conversion d'un SVG ? – C#

Dans le monde d’aujourd’hui, la plupart des documents sont au format A4, mais parfois le contenu rendu à partir de SVG a une taille différente. Cela entraîne beaucoup d’espace blanc sur la page, ou le contenu ne s’adapte tout simplement pas à la page ! Dans cet article, nous allons examiner comment utiliser les options de rendu pour redimensionner les pages de documents à la taille du contenu et vice versa.

Comment redimensionner un document lors du rendu avec Aspose.SVG

L’espace de noms Aspose.Svg.Rendering fournit un ensemble puissant d’outils tels que des classes d’options de bas niveau, des interfaces et des énumérations pour rendre des documents SVG dans différents formats de sortie tels que PDF, XPS et images. Par défaut, le SVG est converti en un document de taille A4, contenant probablement un espace vide en plus de l’image. Mais parfois, vous devrez peut-être rogner des documents pour créer une taille de page plus petite qui correspond à la taille du contenu de la page.

La classe PageSetup fournit un ensemble de propriétés pour gérer les paramètres de configuration de la page pour les documents SVG lors de leur rendu dans différents formats de fichiers. Examinons certaines des plus utilisées :

Configurer la page. La propriété AnyPage vous permet de définir la configuration de la page (taille, marges, orientation, etc.) pour n’importe quelle page d’un document SVG qui est rendu dans un format multi-page, tel que PDF, XPS, PNG, JPG, etc. Utilisez les classes Page, Size et Margin pour gérer les paramètres de configuration de la page pour les documents SVG lors de leur rendu dans différents formats de fichiers.
Redimensionner le document pour s’adapter à la taille du contenu. Vous pouvez ajuster la taille de la page au contenu et vice versa en utilisant la propriété Sizing avec l’énumération SizingType. Cette propriété est un ensemble de drapeaux qui contrôlent le comportement du moteur de rendu. Vous pouvez rogner des documents ou mettre à l’échelle des documents pour faire correspondre leur contenu à la taille de la page.

Vous pouvez facilement utiliser les exemples C# dans cet article pour convertir SVG en images, PDF et XPS avec une mise en page de page personnalisée. Les seules différences résident dans la spécification :

les options de rendu appropriées – ImageRenderingOption, PdfRenderingOption ou XpsRenderingOption ;
le dispositif de sortie approprié – ImageDevice, PdfDevice ou XpsDevice.

SVG vers PNG avec options de rendu par défaut

Pour convertir SVG en PNG avec des options de rendu par défaut, vous devez suivre quelques étapes :

Utilisez l’un des constructeurs SVGDocument() pour initialiser une instance document. Dans les exemples suivants, nous chargeons un fichier SVG local.
Initialisez une instance de la classe ImageRenderingOption si vous souhaitez convertir SVG en un format de fichier image. Par défaut, le ImageFormat est PNG.
Créez une nouvelle instance de la classe ImageDevice en utilisant le constructeur ImageDevice() qui prend options et le chemin du fichier de sortie savePath comme paramètres.
Utilisez la méthode RenderTo(device) pour convertir SVG en PNG, qui prend l’objet device comme paramètre.

Le fragment de code C# suivant montre un exemple de conversion d’un document SVG en image sans options supplémentaires, c’est-à-dire avec des options de rendu par défaut. À la suite de la conversion, un document PNG A4 a été obtenu avec beaucoup d’espace vide (voir illustrations des résultats de conversion (a).)

1using Aspose.Svg.Rendering;
2using Aspose.Svg.Rendering.Image;
3using System.IO;

 1// Convert SVG to PNG with default RenderingOptions
 2
 3// Prepare path to a source SVG file
 4string documentPath = Path.Combine(DataDir, "rendering.svg");
 5
 6// Prepare a path to save the converted file 
 7string savePath = Path.Combine(OutputDir, "a4.png");
 8
 9// Create an instance of the SVGDocument class
10using SVGDocument document = new SVGDocument(documentPath);
11
12// Initialize an ImageRenderingOptions object with default options
13ImageRenderingOptions opt = new ImageRenderingOptions();
14
15// Create an output rendering device and convert SVG
16using ImageDevice device = new ImageDevice(opt, savePath);
17document.RenderTo(device);

Example-ConvertSvgToPngWithDefaultRenderingOptions.cs hosted with ❤ by GitHub

Options de rendu

L’énumération SizingType de l’espace de noms Aspose.Svg.Rendering spécifie des drapeaux qui, avec d’autres options PageSetup, définissent différentes stratégies pour ajuster la taille de la page ou la taille du contenu lors du rendu de documents SVG.

Nom	Description
FitContent	Ajuste la taille de la page pour s’adapter au contenu sans mise à l’échelle. Cela garantit que tout le contenu SVG est visible sans marges supplémentaires. Idéal pour les documents où le contenu doit déterminer la taille de la page.
ScaleContent	Met à l’échelle le contenu pour s’adapter à une taille de page prédéfinie. Le rapport d’aspect du contenu peut être modifié pour s’adapter aux dimensions spécifiées. Cette option est utile lorsque vous avez besoin que le contenu s’adapte à une mise en page de page fixe.
Contain	Redimensionne le contenu pour s’adapter aux dimensions de la page tout en maintenant le rapport d’aspect. Contrairement à `ScaleContent`, cette méthode garantit que le rapport d’aspect reste intact, ce qui peut entraîner des espaces vides si le rapport d’aspect du contenu diffère de celui de la page.
Crop	Ajuste le contenu sur une page et rogne toute portion qui dépasse certaines limites de page.

Ajuster la page au contenu SVG lors de la conversion de SVG en JPG

Pour ajuster la taille de la page de l’image de sortie à la largeur et à la hauteur du contenu, vous devez utiliser le drapeau FitContent, qui ajustera la taille de la page pour s’adapter au contenu sans mise à l’échelle. Examinons les étapes que vous devez suivre :

Chargez un fichier SVG. Dans l’exemple, le constructeur SVGDocument(documentPath) charge le document SVG à partir d’un système de fichiers local.
Créez une instance de la classe ImageRenderingOption . Dans cet exemple, nous définissons le SizingType sur FitContent, ce qui signifie que la taille de la page du document de sortie s’adaptera à la largeur et à la hauteur du contenu sans mise à l’échelle.
Créez une nouvelle instance de la classe ImageDevice et passez-la à la méthode RenderTo(device) pour convertir SVG en JPG.

 1using Aspose.Svg.Rendering;
 2using Aspose.Svg.Rendering.Image;
 3using System.IO;
 4...
 5    // Préparer le chemin vers un fichier SVG source
 6    string documentPath = Path.Combine(DataDir, "rendering.svg");
 7
 8    // Préparer un chemin pour enregistrer le fichier converti
 9    string savePath = Path.Combine(OutputDir, "fitContent.jpg");
10
11    // Créer une instance de la classe SVGDocument
12    using SVGDocument document = new SVGDocument(documentPath);
13
14    // Initialiser un objet ImageRenderingOptions avec des options personnalisées. Utilisez le drapeau FitContent
15    ImageRenderingOptions opt = new ImageRenderingOptions(ImageFormat.Jpeg);
16    opt.PageSetup.Sizing = SizingType.FitContent;
17
18    // Créer un dispositif de rendu de sortie et convertir SVG
19    using ImageDevice device = new ImageDevice(opt, savePath);
20    document.RenderTo(device);

La conversion de SVG en JPG a abouti à un document JPG avec une taille de page qui s’adapte au contenu SVG (voir illustrations des résultats de conversion (b)).

Remarque : Lors de la conversion d’un SVG en un format raster tel que JPG, la taille en pixels de l’image peut changer en raison des différences de résolution (DPI). Les SVG sont indépendants de la résolution, ce qui signifie que leurs dimensions sont définies dans un système de coordonnées plutôt que dans des pixels fixes. Lors de la conversion, la résolution par défaut est fixée à 300 DPI, tandis que la résolution standard de l’écran est de 96 DPI. Cela entraîne une image de sortie plus grande car les tailles en pixels sont mises à l’échelle proportionnellement. Par exemple, un SVG de 350 x 350 unités sera converti en environ 1094 x 1094 pixels à 300 DPI. Pour maintenir les dimensions d’origine, il est important de spécifier la résolution souhaitée lors de la conversion.

Pour tous les exemples de l’article, nous utilisons le fichier source rendering.svg – 350 x 350 px.

Mettre à l’échelle le contenu lors du rendu de SVG en JPG

Dans l’exemple suivant, la propriété AnyPage définit la taille de la page à 1500x3000 pixels, ce qui est plus grand que nécessaire pour accueillir le contenu du document SVG. L’utilisation de SizingType avec le drapeau ScaleContent met à l’échelle le contenu SVG pour qu’il s’adapte à la page :

 1using Aspose.Svg.Rendering;
 2using Aspose.Svg.Rendering.Image;
 3using Aspose.Svg.Drawing;
 4using System.IO;
 5...
 6    // Préparer le chemin vers un fichier SVG source
 7    string documentPath = Path.Combine(DataDir, "rendering.svg");
 8
 9    // Préparer un chemin pour enregistrer le fichier converti
10    string savePath = Path.Combine(OutputDir, "scaleContent.png");
11
12    // Créer une instance de la classe SVGDocument
13    using SVGDocument document = new SVGDocument(documentPath);
14
15    // Initialiser un objet ImageRenderingOptions avec des options personnalisées. Utilisez le drapeau ScaleContent
16    ImageRenderingOptions opt = new ImageRenderingOptions();
17    opt.PageSetup.AnyPage = new Page(new Drawing.Size(1500, 3000));
18    opt.PageSetup.Sizing = SizingType.ScaleContent;
19
20    // Créer un dispositif de rendu de sortie et convertir SVG
21    using ImageDevice device = new ImageDevice(opt, savePath);
22    document.RenderTo(device);

La conversion de SVG en PNG a abouti à une image PNG de 1500x3000 qui a été mise à l’échelle (agrandie) sans maintenir le rapport d’aspect (voir l’ illustration des résultats de conversion (с)).

Mettre à l’échelle le contenu en utilisant le drapeau `Contain`

Le drapeau Contain contrôle la taille du contenu et permet de le mettre à l’échelle tout en maintenant son rapport d’aspect. Le contenu est mis à l’échelle jusqu’à ce qu’il s’adapte à la largeur ou à la hauteur de la page. L’exemple suivant montre comment le drapeau Contain peut être utilisé en combinaison avec la définition d’une taille de page de 2000x2500 pixels. Si la taille de la page n’est pas définie, le résultat sera mis à l’échelle et s’adaptera au format A4 lors du rendu.

 1using Aspose.Svg.Rendering;
 2using Aspose.Svg.Rendering.Image;
 3using System.IO;
 4...
 5    // Préparer le chemin vers un fichier SVG source
 6    string documentPath = Path.Combine(DataDir, "rendering.svg");
 7
 8    // Préparer le chemin pour enregistrer le fichier converti
 9    string savePath = Path.Combine(OutputDir, "using-contain.png");
10
11    // Initialiser SVGDocument
12    using SVGDocument document = new SVGDocument(documentPath);
13
14    // Initialiser un objet PdfRenderingOptions avec des options personnalisées. Utilisez le drapeau Contain
15    ImageRenderingOptions opt = new ImageRenderingOptions();
16    opt.PageSetup.AnyPage = new Page(new Drawing.Size(2000, 2500));
17    opt.PageSetup.Sizing = SizingType.Contain;
18
19    // Créer un dispositif de rendu de sortie et convertir SVG
20    using ImageDevice device = new ImageDevice(opt, savePath);
21    document.RenderTo(device);

Dans l’exemple, la propriété AnyPage de la classe PageSetup définit un nouvel objet Page avec une Size de 2000x2500 pixels. Cela définit la taille de la page à 2000x2500 pixels. Ensuite, nous définissons la propriété Sizing de l’objet PageSetup pour inclure le drapeau Contain. Cela signifie que le contenu du document de sortie sera mis à l’échelle pour s’adapter à la largeur ou à la hauteur de la page tout en maintenant ses proportions. Dans cet exemple, l’image s’adapte à la largeur de la page (voir l’ illustration des résultats de conversion (d).).

Rogner le résultat rendu de SVG en PNG

Pour rogner la taille de la page de sortie à la largeur et à la hauteur requises, vous devez d’abord définir la taille de la page, puis le drapeau SizingType.Crop dans la propriété Sizing. Si vous ne définissez pas les dimensions de page requises, la taille A4 sera choisie par défaut.

 1using Aspose.Svg.Rendering;
 2using Aspose.Svg.Rendering.Image;
 3using Aspose.Svg.Drawing;
 4using System.IO;
 5...
 6    // Préparer le chemin vers un fichier SVG source
 7    string documentPath = Path.Combine(DataDir, "rendering.svg");
 8
 9    // Préparer un chemin pour enregistrer le fichier converti
10    string savePath = Path.Combine(OutputDir, "using-crop.jpg");
11
12    // Initialiser SVGDocument
13    using SVGDocument document = new SVGDocument(documentPath);
14
15    // Initialiser un objet ImageRenderingOptions avec des options personnalisées. Utilisez le drapeau Crop
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    // Créer un dispositif de rendu de sortie et convertir SVG
21    using ImageDevice device = new ImageDevice(opt, savePath);
22    document.RenderTo(device);

Figures des résultats de conversion

La figure montre les résultats de la conversion du fichier rendering.svg aux formats PNG et JPG en utilisant la méthode RenderTo() et diverses options de rendu qui contrôlent la taille de la page du document de sortie.

Remarque : L’image SVG source mesure 350x350 pixels.

Texte “L’image illustre les résultats du redimensionnement du document”

a) Le résultat de la conversion de SVG en PNG avec des options de rendu par défaut est un document PNG de la taille d’une page A4 avec beaucoup d’espace blanc. L’image rendue sur une page A4 est étirée en hauteur et en largeur d’environ 3 fois puisque la résolution par défaut est de 300 dpi.

b) La conversion du SVG en JPG a abouti à un document JPG avec une largeur et une hauteur de page qui s’adaptent à la largeur et à la hauteur du contenu. L’image rendue est étirée d’environ 3 fois en hauteur et en largeur car la résolution par défaut est de 300 dpi.

c) Le résultat de la conversion de SVG en PNG avec mise à l’échelle (agrandissement) sans préserver les proportions.

d) La conversion de SVG en PNG a abouti à un document PNG dans lequel l’image SVG a été mise à l’échelle pour s’adapter à la largeur de la page de sortie tout en maintenant le rapport d’aspect de l’image.

Voir aussi

Comment convertir des fichiers SVG – Vous apprendrez comment convertir SVG en d’autres formats en C#, trouver des exemples de code C# et essayer un convertisseur SVG en ligne.
Comment fusionner des fichiers SVG – Vous apprendrez comment fusionner plusieurs SVG en PDF, XPS ou formats d’image en utilisant la méthode Render() et trouver des exemples C# de fusion de SVG.
Vectorisation – Aperçu de base – Les articles de cette section expliquent comment convertir des images raster en graphiques vectoriels en utilisant l’API Aspose.SVG for .NET.