แปลง SVG เป็น HTML

แปลง SVG เป็น HTML ออนไลน์

เลือกไฟล์ SVG หรือวางโค้ด เพื่อสร้าง inline SVG สำหรับหน้า HTML ดูตัวอย่างผลลัพธ์ ตั้งค่าการปรับให้เหมาะสม แล้วคัดลอกโค้ด การแยกวิเคราะห์ การปรับให้เหมาะสม และการแปลงทั้งหมดทำงานภายในเบราว์เซอร์ โดยไม่ส่ง SVG ไปยังเซิร์ฟเวอร์

เตรียม inline SVG แบบ Responsive

คง viewBox ไว้เพื่อรักษาระบบพิกัดของ SVG เมื่อ SVG มี viewBox ที่ใช้งานได้ ให้ลบความกว้างและความสูงที่กำหนดตายตัวออก แล้วกำหนดขนาดด้วย CSS ของตนเอง

ทำความเข้าใจขนาด SVG และพื้นที่ที่ประหยัดได้

“ขนาดเดิม” คือขนาดของ SVG ที่นำเข้า “ขนาด SVG หลังปรับให้เหมาะสม” คือขนาดหลังประมวลผลด้วยตัวเลือกที่เลือกไว้ เช่น การลบคอมเมนต์ การปัดเศษพิกัด และการย่อโค้ด ขนาดแสดงเป็น kB โดย 1 kB เท่ากับ 1,000 ไบต์ “ประหยัดได้” คือเปอร์เซ็นต์ที่ลดลง เช่น จาก 10 kB เหลือ 7 kB คือประหยัดได้ 30% หากผลลัพธ์ใหญ่ขึ้น เช่น เพราะจัดรูปแบบให้อ่านง่าย จะแสดง “ขนาดที่เพิ่มขึ้น” แทน ตัวเลขเหล่านี้เปรียบเทียบเฉพาะโค้ด SVG ไม่ใช่ขนาดของไฟล์ที่ส่งออกเป็น JSX, React, CSS Data URI หรือ Base64

ความละเอียดทศนิยมและการเยื้อง

“ความละเอียดทศนิยม” กำหนดจำนวนหลักที่เก็บไว้หลังจุดทศนิยมในพิกัดและแอตทริบิวต์ที่เป็นตัวเลข หากตั้งไว้ที่ 2 ค่า 12.34567 จะกลายเป็น 12.35 ทศนิยมที่น้อยลงช่วยลดขนาดไฟล์ได้ แต่อาจทำให้รายละเอียดปลีกย่อยเปลี่ยนไป ค่าเริ่มต้น 3 เป็นเพียงจุดตั้งต้น จึงควรตรวจสอบภาพตัวอย่าง “การเยื้อง” ใช้ 2 ช่องว่าง 4 ช่องว่าง หรือแท็บ เพื่อให้โค้ด HTML และ JSX อ่านง่ายขึ้นโดยไม่เปลี่ยนภาพ “ย่อโค้ด SVG” จะลบช่องว่างสำหรับจัดรูปแบบที่ไม่จำเป็นออกเพื่อให้ผลลัพธ์กะทัดรัด การเยื้องจึงถูกปิดไว้ขณะเปิดใช้การย่อโค้ด

HTML, JSX, React และ SVG Data URI

ผลลัพธ์ HTML คือโค้ด inline SVG และดาวน์โหลดเป็นไฟล์ SVG ส่วน JSX จะปรับชื่อแอตทริบิวต์และสไตล์แบบ inline ให้เข้ากับ React “คอมโพเนนต์ React” จะห่อโค้ดไว้ในฟังก์ชัน TypeScript ที่รับ props มาตรฐานของ SVG “CSS Data URI” จะสร้างคำสั่ง background-image ส่วน Base64 จะสร้าง URI ของภาพ SVG ที่เข้ารหัสแล้ว สถิติขนาดหมายถึง SVG ที่ปรับให้เหมาะสมแล้ว ไม่ใช่รูปแบบที่เข้ารหัสซึ่งมีขนาดใหญ่กว่า ตรวจสอบ ID ก่อนใช้ SVG แบบ inline หลายชุดในหน้าเดียวกัน

จัดการ SVG แบบคงที่ภายในเครื่อง

ภาพตัวอย่างเป็นภาพที่แยกออกมาต่างหาก ไม่ใช่โค้ดหน้าเว็บที่เรียกใช้งานได้ สคริปต์, HTML ที่ฝังไว้, แอนิเมชัน, ภาพภายนอก และสไตล์ชีตจะถูกลบออก ส่วนสไตล์การแสดงผลแบบ inline ที่รองรับและการอ้างอิง fragment ภายในไฟล์จะคงไว้ เครื่องมือนี้ออกแบบมาสำหรับภาพแบบคงที่ ฟีเจอร์ที่ไม่รองรับอาจทำให้ลักษณะภาพเปลี่ยนไป currentColor จะเปลี่ยนสีพื้นและสีเส้นขอบแบบทึบ และสืบทอดสีเมื่อใช้แบบ inline ส่วนภาพตัวอย่างใช้บริบทสีของตัวเอง