La conversion de graphiques vectoriels en images raster est une exigence fréquente lors de la génération de vignettes, d’aperçus ou de PDF sur le serveur. GroupDocs.Conversion Cloud SDK for Node.JS fournit une bibliothèque robuste qui gère la conversion de SVG vers PNG entièrement dans le cloud. Dans ce guide, vous verrez un exemple complet fonctionnel, un workflow cURL correspondant, des conseils de configuration et des recommandations de bonnes pratiques. À la fin, vous serez capable d’intégrer la conversion server‑side de SVG en PNG dans n’importe quelle application Node.JS.
Exemple complet fonctionnel de conversion SVG en PNG avec Node.JS
Cet exemple montre comment convertir un fichier SVG stocké dans le stockage GroupDocs Cloud en image PNG en utilisant le GroupDocs.Conversion Cloud SDK for Node.JS.
const { Configuration, ConvertApi, ConvertDocumentRequest, ConvertSettings, PngOptions, StorageApi, DownloadFileRequest } = require("@groupdocs/conversion-cloud");
const fs = require('fs');
const path = require('path');
// -----------------------------------------------------------------------------
// Configuration – replace with your own credentials
// -----------------------------------------------------------------------------
const config = new Configuration({
clientId: "YOUR_CLIENT_ID",
clientSecret: "YOUR_CLIENT_SECRET"
});
const convertApi = new ConvertApi(config);
const storageApi = new StorageApi(config);
// -----------------------------------------------------------------------------
// Define source SVG and target PNG locations inside GroupDocs Cloud storage
// -----------------------------------------------------------------------------
const inputSvgPath = "input/sample.svg"; // SVG stored in cloud storage
const outputPngPath = "output/sample.png"; // Desired PNG location
// -----------------------------------------------------------------------------
// PNG conversion options – set dimensions to control memory/CPU usage
// -----------------------------------------------------------------------------
const pngOptions = new PngOptions({
width: 1024, // Resize width (optional)
height: 768, // Resize height (optional)
backgroundColor: "#FFFFFF" // Ensure opaque background
});
// -----------------------------------------------------------------------------
// Build conversion settings object
// -----------------------------------------------------------------------------
const convertSettings = new ConvertSettings({
filePath: inputSvgPath,
format: "png",
outputPath: outputPngPath,
options: pngOptions
});
const convertRequest = new ConvertDocumentRequest(convertSettings);
// -----------------------------------------------------------------------------
// Execute conversion, then download the PNG locally
// -----------------------------------------------------------------------------
convertApi.convertDocument(convertRequest)
.then(convResult => {
console.log("Conversion succeeded. Cloud file:", convResult.path);
const downloadReq = new DownloadFileRequest({ path: convResult.path });
return storageApi.downloadFile(downloadReq);
})
.then(fileBuffer => {
const localFile = path.resolve(__dirname, "sample.png");
fs.writeFileSync(localFile, fileBuffer);
console.log("PNG downloaded to:", localFile);
})
.catch(err => {
console.error("Error during SVG → PNG conversion:", err);
})
.finally(() => {
// Clean up HTTP client resources if the SDK exposes a close method
if (config && config.httpClient && typeof config.httpClient.close === "function") {
config.httpClient.close();
}
});
Note : Cet exemple de code démontre la fonctionnalité principale. Avant de l’utiliser dans votre projet, assurez‑vous de mettre à jour les chemins de fichiers (
input/sample.svg,output/sample.png, etc.) pour qu’ils correspondent à vos emplacements réels, vérifiez que toutes les dépendances requises sont correctement installées et testez soigneusement dans votre environnement de développement. Si vous rencontrez des problèmes, veuillez consulter la documentation officielle ou contacter l’équipe de support pour obtenir de l’aide.
Conversion SVG en PNG via l’API REST avec cURL
Si vous préférez une approche REST pure, la même conversion peut être effectuée avec des commandes cURL. Les étapes ci‑dessous montrent comment obtenir un jeton d’accès, télécharger le SVG, lancer la conversion et télécharger le PNG.
Authentifier et obtenir le jeton d’accès
curl -X POST "https://api.groupdocs.cloud/v2.0/auth/token" \
-H "Content-Type: application/json" \
-d '{
"client_id": "YOUR_CLIENT_ID",
"client_secret": "YOUR_CLIENT_SECRET"
}'
La réponse contient un access_token que vous utiliserez dans les appels suivants.
Téléverser le fichier SVG source
curl -X POST "https://api.groupdocs.cloud/v2.0/storage/upload?path=input/sample.svg" \
-H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
-F "file=@/path/to/local/sample.svg"
Exécuter la conversion SVG en PNG
curl -X POST "https://api.groupdocs.cloud/v2.0/conversion/convert" \
-H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
-H "Content-Type: application/json" \
-d '{
"filePath": "input/sample.svg",
"format": "png",
"outputPath": "output/sample.png",
"options": {
"width": 1024,
"height": 768,
"backgroundColor": "#FFFFFF"
}
}'
L’API renvoie le chemin du fichier PNG nouvellement créé dans le stockage cloud.
Télécharger le fichier PNG résultant
curl -X GET "https://api.groupdocs.cloud/v2.0/storage/download?path=output/sample.png" \
-H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
-o sample.png
Ces commandes cURL vous offrent un contrôle total sur le processus de conversion sans écrire de code. Pour plus de détails, consultez la documentation officielle de l’API.
Comment la conversion SVG en PNG fonctionne sous Node.JS
- Importer les classes SDK - L’instruction
require("@groupdocs/conversion-cloud")charge les classes essentielles telles queConvertApi,ConvertSettingsetPngOptions(référence API).
const { ConvertApi, ConvertSettings, PngOptions } = require("@groupdocs/conversion-cloud");
Configurer l’authentification - Un objet
Configurationcontient votreclientIdetclientSecret. Cet objet est passé à la fois àConvertApietStorageApipour autoriser tous les appels ultérieurs.const config = new Configuration({ clientId: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET" });Définir les chemins d’entrée et de sortie -
inputSvgPathpointe vers le SVG dans le stockage cloud, tandis queoutputPngPathspécifie où le PNG doit être enregistré.const inputSvgPath = "input/sample.svg"; const outputPngPath = "output/sample.png";Définir les options PNG -
PngOptionsvous permet de contrôler les dimensions et la couleur d’arrière-plan, ce qui est utile pour les SVG volumineux ou transparents.const pngOptions = new PngOptions({ width: 1024, height: 768, backgroundColor: "#FFFFFF" });Créer les paramètres de conversion et exécuter -
ConvertSettingsregroupe le chemin du fichier, le format cible, l’emplacement de sortie et les options. La méthodeconvertDocumenteffectue la conversion, et le résultat contient le chemin cloud du PNG.const convertSettings = new ConvertSettings({ filePath: inputSvgPath, format: "png", outputPath: outputPngPath, options: pngOptions }); const convertRequest = new ConvertDocumentRequest(convertSettings); convertApi.convertDocument(convertRequest);Télécharger le PNG - Après la conversion,
StorageApi.downloadFilerécupère les données binaires, que vous pouvez écrire sur le système de fichiers local.
Comprendre chaque étape vous aide à personnaliser le processus, à gérer les erreurs et à intégrer la conversion dans des flux de travail plus vastes.
Installation et configuration GroupDocs.Conversion Cloud SDK for Node.JS
npm install groupdocs-conversion-cloud
Le SDK nécessite Node.js 12 ou une version ultérieure. Après l’installation, créez un objet de configuration avec votre clientId et clientSecret (disponibles depuis votre compte GroupDocs Cloud). Consultez la page de téléchargement pour la dernière version du package.
const { Configuration } = require("@groupdocs/conversion-cloud");
const config = new Configuration({
clientId: "YOUR_CLIENT_ID",
clientSecret: "YOUR_CLIENT_SECRET"
});
Assurez-vous que les informations d’identification ont l’autorisation d’accéder aux services de stockage et de conversion. Une fois configurés, vous pouvez instancier ConvertApi et StorageApi comme indiqué dans l’exemple de code.
Affinement des paramètres de conversion PNG
La classe PngOptions offre plusieurs propriétés que vous pouvez ajuster :
- width / height - Définir la résolution de sortie. Des valeurs plus élevées augmentent la qualité mais consomment plus de mémoire.
const pngOptions = new PngOptions({ width: 1920, height: 1080 }); - backgroundColor - Définir un arrière‑plan solide pour les SVG contenant de la transparence.
const pngOptions = new PngOptions({ backgroundColor: "#000000" }); - compressionLevel - (Si pris en charge) Choisir un niveau de compression entre 0 (pas de compression) et 9 (compression maximale) pour réduire la taille du fichier.
const pngOptions = new PngOptions({ compressionLevel: 6 });
Ces options sont transmises via la propriété options de ConvertSettings. Consultez la référence API pour la liste complète des paramètres disponibles.
Meilleures pratiques pour une conversion efficace de SVG en PNG
- Valider le contenu SVG – Assurez‑vous que le SVG ne contient pas de scripts externes ou de charges utiles malveillantes avant le téléchargement. GroupDocs.Conversion désinfecte les entrées, mais la pré‑validation ajoute une couche de sécurité supplémentaire.
- Réutiliser l’objet Configuration – Créez une seule instance
Configurationet partagez‑la entre plusieurs appelsConvertApiafin de réduire la surcharge. - Définir des dimensions raisonnables – Limitez la largeur et la hauteur à la taille réellement nécessaire. Les images surdimensionnées augmentent le temps de traitement et l’utilisation de la mémoire.
- Diffuser les gros fichiers – Pour les SVG très volumineux, envisagez de diffuser le téléchargement au lieu de charger tout le tampon en mémoire.
- Surveiller l’utilisation de l’API – Surveillez votre quota de conversion et gérez les réponses de limitation de débit avec grâce.
Conclusion
GroupDocs.Conversion Cloud SDK for Node.JS rend la conversion SVG vers PNG côté serveur simple, évolutive et sécurisée. En suivant l’exemple de code complet, le workflow cURL équivalent et les conseils de configuration ci‑dessus, vous pouvez intégrer une conversion d’images haute performance dans n’importe quel service backend. N’oubliez pas de vérifier les options de licence ; les déploiements en production nécessitent un abonnement payant, et vous pouvez obtenir une licence temporaire pour les tests depuis la page de licence temporaire. Commencez à convertir dès aujourd’hui et fournissez des actifs PNG nets à vos utilisateurs en toute confiance.
FAQs
Comment effectuer une conversion SVG en PNG dans Node.JS avec GroupDocs ?
Utilisez le GroupDocs.Conversion Cloud SDK for Node.JS. Téléversez le SVG dans le stockage cloud, configurez PngOptions, appelez convertDocument et téléchargez le PNG. L’exemple de code complet dans cet article montre chaque étape.
Puis-je convertir en lot de nombreux fichiers SVG à la fois ?
Oui. Parcourez une liste de chemins SVG et invoquez la même requête de conversion pour chaque fichier. Le SDK traite chaque requête de manière indépendante, vous permettant de stocker tous les résultats PNG dans un seul dossier de sortie.
Que faire si la conversion échoue avec une erreur ?
Vérifiez le message d’erreur renvoyé dans le bloc catch. Les problèmes courants incluent des informations d’identification invalides, des chemins de fichier manquants ou des fonctionnalités SVG non prises en charge. Consultez la documentation officielle pour les codes d’erreur détaillés et les étapes de dépannage.
Où puis-je trouver plus d’informations sur les options PNG ?
Toutes les propriétés configurables sont répertoriées dans la référence API pour PngOptions. Consultez la référence API pour explorer des paramètres supplémentaires tels que le niveau de compression et la profondeur de couleur.