แปลง SVG เป็น CSS ใน Python

แปลง SVG เป็น CSS ด้วยการเข้ารหัส Base64

เมื่อต้องจัดการกับกราฟิกแบบเวกเตอร์ เช่น SVG มักจำเป็นต้องแปลงไฟล์เหล่านี้เป็นรูปแบบที่สามารถฝัง ส่ง หรือจัดเก็บได้อย่างง่ายดาย วิธีปฏิบัติวิธีหนึ่งคือการแปลงไฟล์ SVG เป็นรูปแบบ CSS ด้วยการเข้ารหัส Base64 การฝัง SVG เป็น Base64 ใน CSS ช่วยให้สามารถรวมกราฟิกแบบเวกเตอร์ภายในสไตล์ชีตแบบอินไลน์ได้ ซึ่งช่วยลดความจำเป็นในการแยกไฟล์ภาพและลดคำขอ HTTP ซึ่งช่วยปรับปรุงเวลาในการโหลดหน้าเว็บ นอกจากนี้ยังช่วยให้มั่นใจได้ว่ารูปภาพ SVG จะพร้อมใช้งานทันทีโดยเป็นส่วนหนึ่งของสไตล์ชีต ซึ่งช่วยเพิ่มประสิทธิภาพและทำให้การจัดการเนื้อหาง่ายขึ้น

วิธีแปลง SVG เป็น CSS ใน Python

ในการแปลง SVG เป็น CSS เราใช้ Aspose.SVG for Python via .NET API ซึ่งเป็น API การจัดการเอกสารที่มีฟีเจอร์หลากหลาย ทรงพลัง และใช้งานง่ายสำหรับแพลตฟอร์ม Python เราพิจารณาตัวอย่างของการเข้ารหัส 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}.")

ขั้นตอนในการแปลง SVG เป็น CSS ใน Python

1. ใช้คลาส SVGDocument เพื่อโหลดเนื้อหา SVG จากเส้นทางไฟล์ที่ระบุ
2. บันทึกเอกสาร SVG ที่โหลดลงในไฟล์ชั่วคราว ขั้นตอนนี้อำนวยความสะดวกในการอ่านเนื้อหา SVG เป็นสตริงสำหรับการเข้ารหัส
3. เปิดไฟล์ SVG ชั่วคราวและอ่านเนื้อหาเป็นสตริง
4. เข้ารหัสเนื้อหา SVG เป็นรูปแบบ Base64 สำหรับการฝังใน CSS
5. สร้างเนื้อหา CSS โดยกำหนดคลาสด้วย SVG ที่เข้ารหัส Base64 เช่น เป็นภาพพื้นหลัง
6. เขียนเนื้อหา CSS ที่สร้างขึ้นไปยังไฟล์ CSS ที่ระบุ
7. ลบไฟล์ SVG ชั่วคราวเพื่อให้แน่ใจว่าไม่มีไฟล์ที่ไม่จำเป็นเหลืออยู่ในระบบ

โดยทั่วไปเนื้อหา CSS จะมีประเภท MIME ของรูปภาพและข้อมูลที่เข้ารหัส เช่น

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

ตัวเข้ารหัส Base64 ออนไลน์

Aspose.SVG เสนอแอปพลิเคชันออนไลน์ฟรีสำหรับเข้ารหัสและถอดรหัสข้อมูลไบนารี:

• ตัวเข้ารหัส Base64 เป็นชุดเครื่องมือที่ให้คุณเข้ารหัสข้อมูลไบนารีในรูปแบบเอาต์พุตต่างๆ: Plain Base64, JSON, XML, URI หรือ CSS
• ตัวถอดรหัส Image 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