Python で SVG を CSS に変換する

Base64エンコーディングでSVGをCSSに変換

SVG などのベクター グラフィックスを扱う場合、多くの場合、これらのファイルを簡単に埋め込み、送信、または保存できる形式に変換する必要があります。実用的なアプローチの 1 つは、SVG ファイルを Base64 エンコードを使用した CSS 形式に変換することです。 CSS に SVG を Base64 として埋め込むと、スタイルシート内にベクター グラフィックをインラインで含めることができます。これにより、個別の画像ファイルが不要になり、HTTP リクエストが減り、ページの読み込み時間が短縮されます。また、SVG 画像をスタイルシートの一部としてすぐに利用できるようになり、パフォーマンスが向上し、資産管理が簡素化されます。

Python で SVG を CSS に変換する方法

SVG を CSS に変換するには、 Aspose.SVG for Python via .NET API を使用します。これは、Python プラットフォーム用の機能豊富で強力で使いやすいドキュメント操作 API です。 SVG を Base64 にエンコードし、Base64 文字列を CSS ドキュメントに埋め込む例を考えます。

import base64
import os
from aspose.svg import *

# Create a function to convert SVG to CSS with Base64-encoded SVG data
def convert_svg_to_css(svg_path, css_path, class_name):
    # Load an SVG document
    document = SVGDocument(svg_path)

    # Temporary file path to save the SVG content
    temp_svg_path = "temp_output.svg"

    try:
        # Save the SVG content to a temporary file
        document.save(temp_svg_path)

        # Read the content from the temporary file
        with open(temp_svg_path, "r", encoding="utf-8") as svg_file:
            svg_content = svg_file.read()

        # Encode the SVG content in Base64
        encoded_svg = base64.b64encode(svg_content.encode("utf-8")).decode("utf-8")

        # Prepare the CSS content
        css_content = f""".{class_name} {{
    background-image: url("data:image/svg+xml;base64,{encoded_svg}");
}}
"""

        # Write the CSS content to a file
        with open(css_path, "w", encoding="utf-8") as css_file:
            css_file.write(css_content)

    finally:
        # Clean up the temporary file
        if os.path.exists(temp_svg_path):
            os.remove(temp_svg_path)

# Example usage
input_svg = "image.svg"
output_css = "styles-svg.css"
css_class_name = "background"

convert_svg_to_css(input_svg, output_css, css_class_name)

print(f"SVG file has been converted to CSS and saved as {output_css}.")

Python で SVG を CSS に変換する手順

1. SVGDocument クラスを使用して、指定されたファイル パスから SVG コンテンツをロードします。
2. ロードした SVG ドキュメントを一時ファイルに保存します。このステップにより、SVG コンテンツをエンコード用の文字列として読み取ることが容易になります。
3. 一時 SVG ファイルを開き、その内容を文字列に読み取ります。
4. CSS に埋め込むために、SVG コンテンツを Base64 形式にエンコードします。
5. CSS コンテンツを作成し、たとえば背景画像として Base64 でエンコードされた SVG を含むクラスを定義します。
6. 生成された CSS コンテンツを指定した CSS ファイルに書き込みます。
7. 一時 SVG ファイルを削除して、システム上に不要なファイルが残らないようにします。

CSS コンテンツには通常、次のように画像の MIME タイプとエンコードされたデータが含まれます。

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

オンライン Base64 エンコーダ

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

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

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

FAQ

Python API を使ってみる

スケーラブルなベクター グラフィックスとそのアプリケーションを開発したい場合は、柔軟で高速な Aspose.SVG for Python via .NET API をインストールしてください。 pip は Aspose.SVG for Python via .NET API をダウンロードしてインストールする最も簡単な方法です。これを行うには、次のコマンドを実行します。

pip install aspose-svg-net

Python ライブラリのインストールとシステム要件の詳細については、 Aspose.SVG ドキュメント を参照してください。