ตัวแปลง SVG เป็นรูปภาพ

ใช่ เนื่องจาก SVG เป็นรูปแบบเวกเตอร์ หมายความว่ารูปทรงถูกกำหนดโดยเส้นทางทางคณิตศาสตร์แทนที่จะเป็นพิกเซล เมื่อคุณเรนเดอร์เป็นรูปแบบ Raster เช่น PNG เครื่องมือจะวาด SVG ด้วยขนาดพิกเซลที่แม่นยำตามที่คุณระบุ ตราบใดที่คุณเรนเดอร์ในขนาดที่เท่ากับหรือใหญ่กว่าจุดที่คุณวางแผนจะใช้งานรูปภาพ คุณภาพก็จะสมบูรณ์แบบ ให้ใช้การตั้งค่า Scale เพื่อเรนเดอร์ที่ 2x หรือ 3x สำหรับหน้าจอ retina/high-DPI โดยไม่มีการลดทอนคุณภาพที่มองเห็นได้

Scale จะคูณขนาดของผลลัพธ์ หาก SVG ของคุณมี viewBox ขนาด 100x100 พิกเซล และคุณตั้งค่า Scale เป็น 2 ผลลัพธ์ PNG จะเป็นขนาด 200x200 พิกเซล นี่คือวิธีสร้างรูปภาพคุณภาพ retina: การปรับสเกล 2x หมายความว่าแต่ละพิกเซลเชิงตรรกะจะกลายเป็น 4 พิกเซลทางกายภาพบนหน้าจอ Retina ช่วยให้รูปภาพคมชัด สำหรับการใช้งานเว็บส่วนใหญ่ 2x คือจุดที่เหมาะสมที่สุด ให้ใช้ 3x เฉพาะเมื่อคุณต้องการรูปภาพขนาดใหญ่มากหรือผลลัพธ์สำหรับการพิมพ์เท่านั้น

คุณสามารถใช้พื้นหลังโปร่งใส (เฉพาะ PNG และ WebP) หรือเลือกสีพื้นหลังแบบทึบโดยใช้เครื่องมือเลือกสี พื้นหลังโปร่งใสจะคงพื้นที่โปร่งใสใดๆ ใน SVG ของคุณไว้ และเหมาะสำหรับไอคอน โลโก้ และภาพประกอบที่ต้องวางซ้อนบนเนื้อหาอื่น JPG ไม่รองรับความโปร่งใส — หากคุณแปลงเป็น JPG ด้วย SVG ที่มีความโปร่งใส พื้นที่โปร่งใสจะกลายเป็นสีขาวโดยเริ่มต้น

ได้ ช่อง Width และ Height ช่วยให้คุณระบุขนาดพิกเซลที่แน่นอน โดยปกติ Auto จะใช้ขนาดธรรมชาติของ SVG จากแอตทริบิวต์ viewBox การตั้งค่าขนาดเฉพาะจะยืดหรือหด SVG เพื่อให้เต็มขนาดที่ระบุ หากคุณตั้งค่าเฉพาะความกว้างหรือเฉพาะความสูง อีกมิติจะปรับสเกลตามสัดส่วนเพื่อรักษาอัตราส่วนเดิม สิ่งนี้มีประโยชน์สำหรับการสร้างรูปภาพขนาดย่อ (thumbnails) ขนาดเฉพาะสำหรับโซเชียลมีเดีย หรือชุดไอคอนในหลายความละเอียดจากแหล่งข้อมูล SVG เดียว

ข้อความที่เรนเดอร์ด้วยฟอนต์มาตรฐานของระบบ (Arial, Helvetica, Times New Roman, monospace) จะแปลงได้อย่างถูกต้อง ข้อความที่ใช้ฟอนต์เฉพาะซึ่งอ้างถึงด้วย @font-face หรือ URL ของ Google Fonts อาจไม่แสดงผลอย่างถูกต้องหากไม่มีการติดตั้งฟอนต์เหล่านั้นในระบบของคุณ — เบราว์เซอร์จะแทนที่ด้วยฟอนต์ที่ใกล้เคียงที่สุดที่มีอยู่ เพื่อหลีกเลี่ยงปัญหาการแทนที่ฟอนต์ ให้แปลงข้อความเป็นเส้นทาง/โครงร่าง (paths/outlines) ในเครื่องมือออกแบบของคุณก่อน (Illustrator: Type > Create Outlines, Inkscape: Path > Object to Path) ก่อนทำการแปลง

ได้ ให้สลับไปที่แท็บ SVG Code และวาง Markup ของ SVG ของคุณลงในเครื่องมือแก้ไขโดยตรง วิธีนี้มีประโยชน์เมื่อ SVG ถูกฝังอยู่ในไฟล์ HTML, สร้างขึ้นโดยไลบรารี หรือมาจากฟีเจอร์ "Copy SVG" ของเครื่องมือออกแบบ คลิก Convert หลังจากวาง และเครื่องมือจะเรนเดอร์ด้วยวิธีเดียวกันกับไฟล์ที่อัปโหลด

ไม่ การแปลงทั้งหมดเกิดขึ้นในเครื่องของคุณผ่านเบราว์เซอร์โดยใช้ HTML5 Canvas API ขั้นตอนคือ: SVG ของคุณจะถูกวาดลงบนองค์ประกอบ canvas ตามขนาดที่ระบุ จากนั้นจะถูกส่งออกเป็นรูปภาพโดยใช้เมธอด canvas toDataURL หรือ toBlob ไม่มีการส่งข้อมูลออกจากอุปกรณ์ของคุณเลยในขั้นตอนใดๆ คุณสามารถแปลงโลโก้ที่มีลิขสิทธิ์ แผนภาพที่เป็นความลับ หรือผลงานเวกเตอร์ที่อ่อนไหวได้อย่างปลอดภัย