ข้ามไปที่เนื้อหา

SVG → PNG

ตัวแปลง SVG เป็น PNG

ลากไฟล์เวกเตอร์มาวางแล้วรับ PNG ที่ความละเอียดตามงานต้องการ การแรสเตอร์ไรซ์เกิดในแท็บนี้ งานออกแบบจึงอยู่ระหว่างคุณกับเครื่องของคุณ

ลาก SVG มาวางที่นี่

หรือ

PNG มีพิกเซลตายตัว: ขยายภายหลังจะนุ่มลง ขณะที่ SVG ยังคมทุกขนาด พื้นที่โปร่งใสถูกเก็บไว้ ไม่ได้ถูกเติมสี

วิธีแปลง SVG เป็น PNG

1

โหลดไฟล์เวกเตอร์

ลากไฟล์ .svg มาวางหรือวางจากคลิปบอร์ด ไฟล์ที่ส่วนหัวไม่ได้ประกาศความกว้างและความสูงจะถูกเรนเดอร์ในวิวพอร์ต 1024 พิกเซลแทน

2

เลือกขนาดพิกเซล

กำหนดความกว้างหรือความสูงที่ต้องการ — 256 สำหรับไอคอนแอป 2400 สำหรับกราฟิกงานพิมพ์ — แล้วอีกด้านจะปรับตามอัตราส่วนภาพ การส่งออกจะไม่ถูกขยายเกินขนาดที่ไฟล์ประกาศไว้

3

ส่งออกไฟล์ PNG

บันทึกภาพแรสเตอร์แล้วนำไปใช้ที่ใดก็ได้ที่มีการรับ PNG: สไลด์ ไปป์ไลน์ favicon ไฟล์ README หรือหน้าร้านที่รับเฉพาะภาพแรสเตอร์

เปลี่ยนเวกเตอร์ให้เป็นพิกเซล

SVG คือ XML: คำสั่งเส้นทาง สีเติม และข้อความ ที่ตัวเรนเดอร์ตีความได้ทุกระดับการซูม จึงเป็นเหตุผลที่โลโก้และไอคอนถูกวาดเป็นเวกเตอร์ ส่วน PNG คือตารางพิกเซลที่เสร็จสมบูรณ์แล้ว การแรสเตอร์ไรซ์จึงหมายถึงการตรึงขนาดตารางก่อน เส้นโค้งทุกเส้นถูกสุ่มลงบนตารางนั้น และความละเอียดที่คุณเลือกคือความละเอียดที่คุณได้

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

คำถามเกี่ยวกับการแปลง SVG เป็น PNG

จะเลือกความละเอียด PNG อย่างไร

คิดถึงที่ที่มันจะปรากฏใหญ่ที่สุด: 16–64 px สำหรับ favicon, 256–512 px สำหรับไอคอนแอป, 1000 px หรือมากกว่าสำหรับงานพิมพ์ กำหนดด้านหนึ่งแล้วอีกด้านจะตามอัตราส่วน การส่งออกใหม่ที่ขนาดอื่นมีต้นทุนต่ำเพราะต้นฉบับยังคม

เสียอะไรไปเมื่อเทียบกับ SVG

ความสามารถในการย่อขยายและการแก้ไข: PNG เป็นตารางตายตัว ขยายแล้วจะเบลอ และรูปทรงก็ไม่ใช่ข้อความที่ปรับสไตล์ได้อีก มองการส่งออกเป็นสำเนาสำหรับนำไปใช้ที่ขนาดหนึ่ง แล้วเก็บไฟล์ .svg ต้นฉบับไว้

SVG ของฉันไม่มีความกว้างและความสูง จะเกิดอะไรขึ้น

มันถูกเรนเดอร์ลงในวิวพอร์ต 1024 พิกเซล และนั่นกลายเป็นขนาดเนื้อในของมัน ไฟล์ที่มีแค่ viewBox จึงถือว่ากว้าง 1024 px กำหนดขนาดพิกเซลให้ชัดเจนที่นี่ หรือเพิ่มความกว้างและความสูงในมาร์กอัป เมื่อต้องการค่าที่แน่นอน

PNG รักษาความโปร่งใสไหม และไฟล์ของฉันถูกอัปโหลดหรือเปล่า

ความโปร่งใสอยู่ครบ เพราะ PNG มีช่องแอลฟาจริง โลโก้บนพื้นหลังโปร่งแสงจึงยังโปร่งแสง และไม่มีการอัปโหลด: งานศิลป์ถูกเรนเดอร์และเข้ารหัสในแท็บนี้ ไม่เกิน 64 MB ต่อไฟล์ และหน้าก็ทำงานแบบออฟไลน์ได้เมื่อโหลดเสร็จ

ตัวแปลงที่เกี่ยวข้อง