Python에서 SVG를 CSS로 변환

Base64 인코딩을 사용하여 SVG를 CSS로 변환

SVG와 같은 벡터 그래픽을 처리할 때 이러한 파일을 쉽게 포함, 전송 또는 저장할 수 있는 형식으로 변환해야 하는 경우가 많습니다. 실용적인 접근 방식 중 하나는 Base64 인코딩을 사용하여 SVG 파일을 CSS 형식으로 변환하는 것입니다. CSS에 Base64로 SVG를 포함하면 스타일시트 내에 벡터 그래픽을 인라인으로 포함할 수 있습니다. 이를 통해 별도의 이미지 파일이 필요하지 않으며 HTTP 요청이 줄어들어 페이지 로드 시간이 향상됩니다. 또한 SVG 이미지를 스타일시트의 일부로 즉시 사용할 수 있도록 하여 성능을 향상시키고 자산 관리를 단순화합니다.

Python에서 SVG를 CSS로 변환하는 방법

SVG를 CSS로 변환하기 위해 우리는 Python 플랫폼을 위한 기능이 풍부하고 강력하며 사용하기 쉬운 문서 조작 API인 Aspose.SVG for Python via .NET API를 사용합니다. Base64 문자열을 CSS 문서에 포함하고 Base64로 인코딩하는 SVG의 예를 고려합니다.

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. 예를 들어 배경 이미지로 Base64로 인코딩된 SVG가 포함된 클래스를 정의하여 CSS 콘텐츠를 생성합니다.
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 문서 를 참조하세요.