画像をオンラインでエンコード

Aspose.SVG for .NET API でリアルタイムに画像をエンコード!ローカル ファイル システムから画像をロードすると、すぐに結果がデータ URI、Base64 画像ソース、および Base64 CSS バックグラウンド ソースとして取得されます。 SVG、JPG、JPEG、PJP、PJPEG、PNG、BMP、XBM、GIF、TIFF、ICO、IFIF、WEBP、その他の画像フォーマットがサポートされています。

URI スキームについて

データ URI は、画像やその他のファイルを Base64 エンコーディングに基づくテキストの文字列として Web ページに埋め込む方法です。データ URI スキームを使用すると、HTML、CSS、JSON、または SVG ドキュメントに任意のバイナリ データを含めることができます。たとえば、外部リソースから読み込まれたかのように画像を Web ページに埋め込むことができますが、ファイルの URL を指定する代わりに、Base64 でエンコードされた画像のコンテンツを挿入します。データ URI を使用する主な利点は、ページの読み込みが高速化されることです。これは、画像が既に HTML ドキュメントに埋め込まれているため、ブラウザーがファイルを取得するために追加の Web 要求を行う必要がないためです。

データ URI の構文は次のとおりです: data:[<mime type>][;charset=<charset>][;base64],<encoded data>

SVG ファイルには「安全でない」文字が含まれている場合があります。ベクター イメージには、値が一重引用符または二重引用符で囲まれた埋め込みコンテンツまたは属性としてラスターを含めることができます。したがって、この形式の前処理 (正規化) が必要です。 SVG は、データ URI を介して HTML または CSS で使用できます。 SVG がデータ URI を使用してエンコードされている場合、どのブラウザーでも機能します。


C# で SVG を Base64 に変換する方法

SVG イメージを Base64 文字列に変換するために、 Aspose.SVG for .NET API を使用します。 -C# プラットフォーム用のドキュメント操作 API を使用します。 SVG 画像を Base64 エンコーディングに変換し、Base64 文字列をデータ URI として SVG ドキュメントに埋め込む例を考えます。これらの操作は、数行のコードで実行できます。


SVG を Base64 文字列に変換して SVG ファイルに埋め込む C# コード

    // Open an SVG image
    var bytes = File.ReadAllBytes(@"flower.svg");
    // Initialize an SVGDocument object
    var document = new SVGDocument();
    // Create an image element
    var img = (SVGImageElement)document.CreateElementNS("http://www.w3.org/2000/svg", "image");
    // Convert SVG image to Base64
    img.Href.BaseVal = "data:image/svg+xml;charset=utf-8;base64," + Convert.ToBase64String(bytes);
    // Add the image element into the SVG document
    document.RootElement.AppendChild(img);
    // Save the SVG document
    document.Save(@"image-base64.svg");



C# で SVG を Base64 に変換する手順

  1. 変換する SVG 画像を開きます。 ReadAllBytes(path) メソッドを使用して SVG イメージを開き、ファイルの内容をバイト配列に読み取ります。
  2. SVGDocument クラスの新しいインスタンスを初期化します。
  3. SVGDocument クラスの CreateElementNS(namespaceURI, modifiedName) メソッドを使用して、画像インスタンス。 namespaceURI は、W3C SVG 仕様への参照を設定します。 qualifiedName には、画像要素の文字列タグ名が含まれている必要があります。
  4. SVG を Base64 に変換します。 ToBase64String(bytes) メソッドを呼び出して、8 ビット整数の配列を base64 数字でエンコードされた同等の文字列表現に変換します。
  5. AppendChild(node) メソッドを使用して、画像要素を SVG ドキュメントに追加します。
  6. Save(path) メソッドを使用して SVG ドキュメントを保存します。

データ URI の長所と短所

データ URI は、Web ページに画像を埋め込む賢明な方法を提供します。 URI スキームはさまざまな方法で使用できます。しかし、いずれにせよ、長所と短所があります。

長所:

  • ページ読み込みの高速化。画像は既に HTML ドキュメントに埋め込まれているため、ブラウザーはファイルを取得するために追加の Web 要求を行う必要はありません。
  • パフォーマンスの向上。ブラウザーが必要とする CPU 時間は少なくなります。
  • Web ページは外部ファイルから独立しているため、オフラインでも簡単に共有できます。

短所:

  • Base64 でエンコードされたデータのサイズは、バイナリ イメージよりも 1/3 大きくなります。
  • エンコードされた画像はブラウザによってキャッシュされず、そのようなページにアクセスするたびにダウンロードされます。
  • Base64 文字列を最初にデコードする必要があるため、エンコードされた画像は編集が困難です。
  • Base64 画像は画像検索結果に表示されないため、Google によってインデックス付けされることはありません。

オンライン Base64 エンコーダー

Aspose.SVG は、バイナリ データをエンコードおよびデコードするための無料のオンライン アプリケーションを提供しています。

  • Base64 エンコーダ は、さまざまな出力形式 (プレーン Base64、JSON、XML、URI、または CSS) でバイナリ データをエンコードできるツールのセットです。
  • イメージ Base64 デコーダ は、入力コントロールに URI 文字列を貼り付けることで、Base64 文字列を含むデータ URI を画像に変換します。

当社のブラウザベースのアプリケーションは、Windows、Linux、Mac OS、Android、iOS を含むすべてのプラットフォームで動作します。登録、プラグイン、ソフトウェアのインストールは必要ありません。オンラインの Base64 エンコード/デコード ツールを安全、確実、そして簡単な方法で使い始めましょう!

Base64 エンコーディングの使用例

Base64 SVG イメージを SVG ドキュメントに埋め込むための SVG コード

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlna..." alt="Blue flower"/>
</svg>

Base64 SVG 画像を埋め込む HTML コード

<body>
    <div>
        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlna..." alt="Blue flower">
    </div>
</body>

Base64 SVG 画像を背景画像として埋め込む CSS コード

.class {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlna...');
}

Base64 SVG イメージを XML ドキュメントに埋め込む XML コード

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/svg+xml">PHN2ZyB3aWR0aD0iNDUwIiBoZWlna...</image>
</root>

Base64 SVG イメージを JSON ドキュメントに埋め込む JSON コード

{
  "image": {
    "mime": "image/svg+xml",
    "data": "PHN2ZyB3aWR0aD0iNDUwIiBoZWlna..."
  }
}



よくある質問

1. SVG を Base64 に変換するにはどうすればよいですか?

Aspose.SVG を使用すると、オンラインまたはプログラムで SVG を Base64 文字列に変換できます。たとえば、オンライン SVG エンコーダー を使用して SVG をリアルタイムでエンコードできます。 を使用すると、ファイルをすばやく高品質に変換できます。 SVG をアップロードしてエンコードすると、数秒で結果が得られます。一方、Aspose.SVG for .NET API を使用して SVG をプログラムで Base64 に変換できます。

2. Base64 エンコーディングが必要な理由

歴史的に、多くのデータ転送および保存形式では、バイナリ コード (HTML、XML、電子メールなど) の代わりにテキストが使用されています。データ転送形式がテキストベースであるが、バイナリ データを転送する必要がある場合はどうなりますか?ここで Base64 エンコーディングの出番です。インターネット経由でデータを送信するときにバイナリ シンボルが誤って解釈されるのを防ぐには、バイナリ シンボルを文字にエンコードする必要があります。 Base64 エンコーディングの典型的な用途: 画像のデータ URI スキーム (CSS、HTML、JavaScript)。写真やその他のバイナリ データを XML に転送する。画像をデータベースに保存する。電子メール メッセージに画像を含める。

3. データ URI をサポートするブラウザは?

データ URI は、Web ページに画像やその他のファイルを埋め込むための最も速くて簡単な方法です。データ URI は、主要な最新ブラウザー (Chrome、Firefox、Safari、Edge、Opera、IE8+) でサポートされています。

4. Base64エンコーディングとは何ですか?

Base64 は、ASCII 文字列形式でバイナリ データを表すバイナリからテキストへのエンコード スキームです。 Base64 エンコードは、テキスト データを扱うように設計されたメディアに保存および転送する必要があるバイナリ情報をエンコードする必要がある場合に一般的に使用されます。

Aspose.SVG for .NET API を使ってみる

スケーラブルなベクター グラフィックスとそのアプリケーションの開発に関心がある場合は、C# およびその他の .NET プログラミング言語用の強力なインターフェイス セットを備えた柔軟で高速な Aspose.SVG for .NET API をインストールしてください。
コマンド ラインから nuget install Aspose.SVG としてインストールするか、Visual Studio のパッケージ マネージャー コンソール経由で Install-Package Aspose.SVG を使用してインストールします。 または、 ダウンロード からオフラインの MSI インストーラーまたは DLL を ZIP ファイルで入手してください。Aspose.SVG for .NET API はスタンドアロン ライブラリであり、 SVG ドキュメント処理用のソフトウェア。
C# ライブラリのインストールとシステム要件の詳細については、 Aspose.SVG ドキュメント を参照してください。

サポートされているその他の Base64 エンコーダー

Image を Base64 文字列に変換できます。JPG、PNG、BMP、GIF、TIFF、ICO、および SVG 形式がサポートされています。

JPG to Base64 (JPEG Image)
PNG to Base64 (Portable Network Graphics)
BMP to Base64 (Bitmap Image)
SVG to Base64 (Scalable Vector Graphics)
TIFF to Base64 (Tagged Image Format)
GIF TO Base64 (Graphical Interchange Format)
ICO to Base64 (Computer Icons Format)
Image to Base64 (Binary Image)