在 Python 中将 SVG 转换为 CSS

将 SVG 编码为 Base64 并将其另存为 CSS。改进样式表中矢量图形的嵌入和存储。

使用 Base64 编码将 SVG 转换为 CSS

在处理 SVG 等矢量图形时，通常需要将这些文件转换为易于嵌入、传输或存储的格式。一种实用的方法是使用 Base64 编码将 SVG 文件转换为 CSS 格式。在 CSS 中嵌入 SVG 作为 Base64 允许在样式表中内联包含矢量图形。这消除了对单独图像文件的需要，并减少了 HTTP 请求，从而缩短了页面加载时间。它还确保 SVG 图像作为样式表的一部分立即可用，从而提高性能并简化资产管理。

如何在 Python 中将 SVG 转换为 CSS

为了将 SVG 转换为 CSS，我们使用 Aspose.SVG for Python via .NET API，这是一个功能丰富、功能强大、易于使用的 Python 平台文档操作 API。我们考虑 SVG 到 Base64 编码并将 Base64 字符串嵌入 CSS 文档的示例：

将 SVG 转换为 CSS 的 Python 代码

import base64
import os
import aspose.svg as assvg

# 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
    doc = assvg.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
        doc.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)

在 Python 中将 SVG 转换为 CSS 的步骤

使用 SVGDocument 类从指定文件路径加载SVG内容。
将加载的 SVG 文档保存到临时文件。此步骤有助于将 SVG 内容读取为字符串以进行编码。
打开临时 SVG 文件并将其内容读入字符串。
将 SVG 内容编码为 Base64 格式，以便嵌入 CSS 中。
创建 CSS 内容，使用 Base64 编码的 SVG 定义一个类，例如作为背景图像。 6、将生成的CSS内容写入指定的CSS文件中。
删除临时 SVG 文件以确保系统上没有留下不必要的文件。

CSS 内容通常包括图像的 MIME 类型和编码数据，如下所示：

嵌入 Base64 SVG 图像的 CSS 代码

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

在线 Base64 编码器

Aspose.SVG 提供免费的在线应用程序来编码和解码二进制数据：

Base64 编码器是一组工具，可让您以各种输出格式对二进制数据进行编码：Plain Base64、JSON、XML、URI 或 CSS。
图像 Base64 解码器通过在输入控件中粘贴 URI 字符串，将包含 Base64 字符串的数据 URI 转换为图像。

我们基于浏览器的应用程序适用于所有平台，包括 Windows、Linux、Mac OS、Android 和 iOS。您无需注册、插件或软件安装。开始安全、可靠、轻松地使用我们的在线 Base64 编码/解码工具！

FAQ

1. 如何将 SVG 转换为 CSS？

Aspose.SVG 允许您以任何方式将 SVG 转换为 CSS - 在线或以编程方式。例如，您可以使用在线 SVG 编码器实时编码 SVG，该编码器可以快速高质量地转换文件。上传、编码 SVG 并在几秒钟内获得结果！另一方面，您可以使用 Aspose.SVG for Python via .NET API 以编程方式将 SVG 转换为 CSS。

2. 为什么要编码 SVG 文件？

从历史上看，许多数据传输和存储格式（例如 HTML、XML 和电子邮件）都依赖于文本而不是二进制代码。当需要将二进制数据（例如 SVG 文件中的数据）嵌入到这些基于文本的格式中时，Base64 编码就变得必不可少。将 SVG 文件编码为 Base64 可让它们安全地嵌入 XML、JSON、CSS 和 URI 方案中，而无需在传输过程中进行修改。这种方法简化了集成、增强了可移植性，并通过减少 HTTP 请求缩短了加载时间。

3. 什么是 Base64 编码？

Base64 编码是一种使用一组 64 个 ASCII 字符将二进制数据转换为文本格式的方法，这些字符可安全用于 HTML、XML 或电子邮件等基于文本的格式。这种编码可确保二进制数据（例如图像或文件）可以嵌入、传输或存储在仅处理文本的系统中，而不会损坏数据。 Base64 通常用于在网页中嵌入图像、通过电子邮件发送文件以及以文本格式存储数据。

4. Base64 编码会影响 SVG 图像的质量吗？

不，Base64 编码不会影响 SVG 图像的质量。Base64 编码是一种将二进制数据表示为文本的方式，可保留 SVG 文件的原始质量。编码过程只是将 SVG 文件转换为适合嵌入各种文本格式（如 JSON、XML 或 CSS）的文本格式。

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文档

其他支持的 Base64 编码器

您可以将 SVG 转换为 Base64 字符串并将其另存为 JSON、XML 和 CSS：

Image to Base64 (Binary-to-text encoding)

SVG to JSON (JavaScript Object Notation)

SVG to XML (Extensible Markup Language)

SVG to CSS (Cascading Style Sheets)