เครื่องมือนี้ทำอะไร
เครื่องมือนี้แปลงโค้ด SVG หรือไฟล์ .svg เป็นรูป PNG, JPG หรือ WebP วางมาร์กอัป ลากไฟล์มาวาง เลือกสเกลหรือความกว้างที่ต้องการ แล้วดาวน์โหลดภาพบิตแมป การเรนเดอร์เกิดขึ้นในเบราว์เซอร์ของคุณ ไอคอน โลโก้ และไดอะแกรมจึงไม่ออกจากเครื่องของคุณ
มีประโยชน์ทุกครั้งที่ปลายทางไม่รับ SVG เช่น ไอคอนแอป รูปสำหรับโซเชียลมีเดีย สไลด์ เอกสาร ลายเซ็นอีเมล หรือซอฟต์แวร์รุ่นเก่า คุณจะเห็นพรีวิวแบบเรียลไทม์บนพื้นลายตารางหมากรุก จึงรู้ได้ชัดว่าส่วนไหนโปร่งใส
วิธีใช้งาน
- วางโค้ด
<svg>ลงในเอดิเตอร์ คลิก อัปโหลด เพื่อเปิดไฟล์ หรือลากไฟล์มาวางบนหน้า ตัวอย่าง จะโหลดโลโก้เล็ก ๆ - เลือก ขนาด: 1× ใช้ขนาดของ SVG เอง 2×–4× คูณขนาดนั้น หรือพิมพ์ ความกว้างกำหนดเอง เป็นพิกเซล ความสูงจะเป็นไปตามสัดส่วนภาพ
- เลือก รูปแบบ: PNG สำหรับเอาต์พุตแบบไม่สูญเสียคุณภาพพร้อมความโปร่งใส JPG สำหรับภาพถ่ายและความเข้ากันได้ WebP สำหรับไฟล์ขนาดเล็ก
- เลือก พื้นหลัง: โปร่งใส ขาว หรือสีใดก็ได้
- คลิก ดาวน์โหลด บรรทัดใต้พรีวิวแสดงขนาดพิกเซลสุดท้าย รูปแบบ และขนาดไฟล์
ขนาดคำนวณอย่างไร
เครื่องมือดูที่อิลิเมนต์ <svg> ระดับบนสุด width และ height ในหน่วย px, pt, mm, cm, in หรือ em จะถูกแปลงเป็นพิกเซล หากไม่มีหรือระบุเป็นเปอร์เซ็นต์ จะใช้ความกว้างและความสูงของ viewBox แทน จากนั้นจึงใช้สเกลหรือความกว้างกำหนดเองที่เลือก และเขียน SVG ใหม่ด้วยขนาดพิกเซลที่ชัดเจน เพื่อให้ทุกเบราว์เซอร์วาดออกมาเหมือนกัน
ตัวอย่าง
ไอคอนที่มี viewBox="0 0 24 24" และไม่มี width หรือ height จะกลายเป็น PNG ขนาด 24 × 24 ที่ 1× ที่ 4× จะเป็น 96 × 96 และเมื่อกำหนดความกว้าง 512 จะได้ PNG ขนาด 512 × 512 ที่เหมาะกับไอคอนบน app store โดยยังคมชัดสมบูรณ์ เพราะเรนเดอร์จากเวกเตอร์ ไม่ใช่การขยายภาพ
เคล็ดลับ
- XML ที่ไม่ถูกต้องจะถูกแจ้งพร้อมเลขบรรทัด คุณจึงกระโดดไปยังจุดที่มีปัญหาได้ทันที
- รูปภาพแรสเตอร์ที่ฝังไว้ (
<image href="data:...">) ใช้ได้ แต่ลิงก์ภายนอกใช้ไม่ได้ - ข้อความใช้ฟอนต์ที่ติดตั้งในคอมพิวเตอร์ของคุณ หากต้องการผลลัพธ์ที่เหมือนกันทุกพิกเซลในทุกที่ ให้แปลงข้อความเป็น outline ในโปรแกรมออกแบบก่อน
- เอาต์พุตที่ใหญ่ที่สุดถูกจำกัดด้วยขนาด canvas ของเบราว์เซอร์ ประมาณ 16,000 พิกเซลต่อด้าน
คำถามที่พบบ่อย
› SVG ถูกอัปโหลดไปที่ไหนหรือไม่?
ไม่ เบราว์เซอร์ของคุณวาด SVG ลงบน canvas แล้วบันทึกผลลัพธ์ โค้ดและรูปภาพอยู่บนอุปกรณ์ของคุณเท่านั้น
› จะได้ PNG ที่คมชัดขึ้นอย่างไร?
เลือกสเกล 2×, 3× หรือ 4× หรือพิมพ์ความกว้างที่ต้องการ SVG เป็นรูปแบบเวกเตอร์ การเรนเดอร์ที่ขนาดใหญ่ขึ้นจึงได้ขอบคมชัดบนหน้าจอความละเอียดสูง 2× เป็นค่าเริ่มต้นที่ดีสำหรับจอ retina
› ทำไมรูปภาพหรือฟอนต์บางส่วนหายไปในผลลัพธ์?
ด้วยเหตุผลด้านความปลอดภัย เบราว์เซอร์จะไม่โหลดไฟล์ภายนอก (รูปภาพที่ลิงก์ไว้ เว็บฟอนต์ CSS) เมื่อวาด SVG เป็นรูปภาพ ให้ฝังรูปภาพเป็น data URL และแปลงข้อความเป็น path หรือใช้ฟอนต์ของระบบ
› คงพื้นหลังโปร่งใสไว้ได้ไหม?
ได้ เลือก โปร่งใส กับเอาต์พุต PNG หรือ WebP ส่วน JPG ไม่รองรับความโปร่งใส พื้นที่โปร่งใสจึงถูกเติมด้วยสีขาวหรือสีที่คุณเลือก
› SVG ของฉันไม่มี width หรือ height จะใช้ขนาดเท่าไร?
เครื่องมือจะอ่าน viewBox แล้วใช้ความกว้างและความสูงจากนั้น หากไม่มีทั้งขนาดและ viewBox จะใช้ขนาดเริ่มต้นของเบราว์เซอร์ 300 × 150 และแจ้งให้ทราบ