When it comes to web images, PNG is a go-to format for its support of transparency and broad compatibility. On the other hand, SVG is a favorite for its scalability, making it ideal for logos, icons, and other vector-based graphics. Despite SVG’s many advantages, there are times when converting SVGs to PNGs is necessary, especially to ensure compatibility across different platforms and devices. In this blog post, we’ll guide you through the process of converting SVG graphics to PNG format using Node.js.

Convert SVG to PNG using Node.js (Grayscale, Rotate, Flip, Bright Watermark)

Node.js で画像を変換する API

GroupDocs は、画像形式の変換と変換プロセス中の画像操作を可能にする強力な Conversion API を提供しています。この API は幅広い高度なオプションをサポートしており、Node.js で SVG を PNG に変換するのに最適です。このタスクには GroupDocs.Conversion for Node.js を使用します。

開始するには、プロジェクトで次のコマンドを実行して GroupDocs.Conversion for Node.js を インストール してください。

npm i @groupdocs/groupdocs.conversion

詳細は ドキュメント と API リファレンス をご覧ください。

Node.js を使用した SVG から PNG への変換サンプルコード

まず、デフォルト設定で SVG ベクター画像を PNG 形式に変換してみましょう。以下の手順で SVG 画像を PNG に変換します。

  • Converter クラスで SVG ファイルを ロード します。
  • 変換オプション を設定します。
  • 出力形式を PNG に 指定 します。
  • 用意したオプションで convert() メソッドを呼び出します。

以下が SVG を PNG に変換する Node.js のコード例です。

Node.js での高度な SVG から PNG への変換サンプルコード

GroupDocs.Conversion for Node.js では、変換プロセス中に PNG 出力に対してさまざまなカスタマイズを適用できます。利用可能なオプションは次のとおりです。

  • 明るさ調整
  • コントラスト調整
  • ガンマ補正
  • グレースケール変換
  • 水平または垂直フリップ
  • 回転角度
  • カスタム画像サイズ（高さと幅）
  • ウォーターマーク追加

これらの高度なオプションを SVG から PNG への変換に適用する方法を見てみましょう。

  • Converter クラスで SVG ファイルを ロード します。
  • 画像 変換オプション を設定します。
  • 出力形式を PNG に 指定 します。
  • 明るさ、回転、その他利用可能なカスタマイズを 定義 します。
  • convert() メソッドを呼び出して PNG を生成します。

以下は、いくつかの高度なオプションを適用した Node.js のコード例です。

無料でオンライン SVG から PNG へ変換

SVG ファイルを手軽に PNG に変換したいですか？ 無料のオンライン SVG to PNG コンバータ をご利用ください。ウェブブラウザさえあればどのデバイスからでもアクセス可能で、便利かつ手間がかかりません。

Convert Word Document to PDF using Node.js.

無料 API ライセンスを取得

無料の一時ライセンス を取得すれば、評価制限なしで GroupDocs.Conversion の API を使用できます。

結論

本稿では、GroupDocs.Conversion for Node.js を使用して Node.js で SVG ベクター画像を PNG に変換する方法を解説しました。また、回転、グレースケール、ウォーターマーク、明るさ調整などのカスタマイズを適用して変換プロセスを強化する方法も示しました。これらの高度な機能により、PNG 出力を正確な要件に合わせて調整できます。

さらに多くのサンプルは GroupDocs GitHub リポジトリ にあります。さまざまなコードサンプルが掲載されているので、独自の SVG から PNG へのコンバータ構築に役立ててください。質問がある場合は、フォーラム からお気軽にお問い合わせください。

参考情報