พรีวิว / แก้ไข SVG

SVG Preview / Editor ทำงานอย่างไร

เครื่องมือนี้ทำอะไร

SVG Preview / Editor เรนเดอร์มาร์กอัป SVG แบบสดขณะคุณแก้ไข และดึงเมทาดาทา (width, height, viewBox, จำนวนองค์ประกอบ) เพื่อการตรวจดูอย่างรวดเร็ว มีสวิตช์เพิ่มพื้นหลังลายตารางเพื่อให้เห็นบริเวณโปร่งใสได้ชัดเจน เครื่องมือนี้ยังสร้าง data URI แบบเข้ารหัส URL ซึ่งเหมาะสำหรับใช้โดยตรงใน CSS background-image หรือแอตทริบิวต์ src ของ HTML

กรณีการใช้งานทั่วไปของนักพัฒนา

นักออกแบบไอคอนทดสอบคณิตศาสตร์ของ viewBox และความหนาเส้น (stroke) ที่ขนาดต่าง ๆ นักพัฒนา Frontend ตรวจสอบว่าไอคอน SVG ที่แก้ด้วยมือยังเรนเดอร์ถูกต้องหลังการปรับให้เหมาะสม (ทำเองหรือผ่าน SVGO) นักพัฒนาอีเมลสร้างเวอร์ชัน data URI ที่กะทัดรัดของโลโก้แบรนด์เพื่อฝังใน HTML ผู้สอนสาธิตว่าแอตทริบิวต์อย่าง preserveAspectRatio และ overflow ส่งผลต่อการเรนเดอร์อย่างไร

รูปแบบข้อมูล ชนิด หรือรูปแบบย่อย

อินพุตคือมาร์กอัป SVG XML แบบดิบ เอาต์พุตคือ SVG เดิมที่เรนเดอร์ใน iframe แบบแซนด์บ็อกซ์ พร้อม data URI แบบเข้ารหัส URL (data:image/svg+xml;charset=utf-8,… ) เมตริกจำนวนองค์ประกอบจะนับทุกแท็กเปิด (รวมถึง defs, g, gradients และองค์ประกอบซ้อนกันที่คล้ายกัน) เพื่อให้เห็นภาพคร่าว ๆ ของความซับซ้อน ค่าของแอตทริบิวต์ที่ดึงออกมาจะแสดงในรูปแบบดิบ

ข้อผิดพลาดที่พบบ่อยและกรณีขอบ

ทรัพยากรภายนอกที่อ้างอิงโดยองค์ประกอบ `use` หรือ `image` ผ่าน href จะไม่โหลดภายใน iframe แบบแซนด์บ็อกซ์ JavaScript แบบ inline ภายในองค์ประกอบ script ถูกบล็อกโดยแซนด์บ็อกซ์ — แอนิเมชันควรพึ่งพา SMIL หรือ CSS keyframes SVG ที่พึ่งพาฟอนต์เฉพาะซึ่งไม่ได้ติดตั้งในระบบจะ fallback ไปใช้ค่าเริ่มต้น; ฝังฟอนต์หรือใช้ฟอนต์ระบบสำหรับพรีวิว

เมื่อใดควรใช้เครื่องมือนี้แทนการเขียนโค้ด

ใช้เครื่องมือบนเบราว์เซอร์สำหรับการออกแบบไอคอนแบบครั้งเดียว การดีบัก หรือการสร้าง data URI สำหรับแอสเซ็ตในโปรดักชัน ให้รัน SVG ผ่าน SVGO ด้วยคอนฟิกที่ปรับจูนเพื่อเอาเมทาดาทาออกและย่อมาร์กอัป และใช้ระบบสไปรต์หรือการผสานกับบันเดลเลอร์ที่เหมาะสมเพื่อโหลดไอคอนในแอปของคุณ แทนการฝัง data URI ไปทุกที่