แรสเตอร์และเวกเตอร์เป็นสองวิธีที่ต่างกันในการเก็บรูป และการรู้ความแตกต่างบอกคุณเป๊ะ ๆ ว่าเมื่อไหร่ควรแปลงระหว่างกัน รูปแรสเตอร์ PNG, JPG, WebP เป็นกริดพิกเซลสีตายตัว รูปเวกเตอร์ SVG เป็นชุดคำสั่ง วาดพาธนี้ เติมด้วยสีนี้ วางวงกลมนี้ตรงนี้ เพราะเวกเตอร์อธิบายรูปทรงด้วยคณิตศาสตร์แทนพิกเซล มันจึงยังคมที่ขนาดใด ๆ ในขณะที่แรสเตอร์เบลอทันทีที่คุณดันมันเกินความละเอียดพื้นเมือง
"แรสเตอร์เป็นเวกเตอร์" หมายถึงการลากเส้น (tracing) เอนจินอ่านพิกเซลและคิดหารูปทรงที่ซ่อนอยู่ในนั้น แล้วเขียนรูปทรงเหล่านั้นออกเป็นพาธเวกเตอร์ ทำในสถานการณ์ที่ถูกต้องมันมีประโยชน์จริง ทำในสถานการณ์ที่ผิดมันสร้างความยุ่งเหยิง คู่มือนี้ครอบคลุมทั้งสอง
การลากเส้นเหมาะกับอะไร
การลากเส้นต้องการอินพุตที่แบนและขอบสะอาด โลโก้ ไอคอน ภาพประกอบง่าย ๆ ลายเส้น การเขียนตัวอักษรด้วยมือ พวกนี้มีพาเลตต์จำกัดและขอบเขตชัด ตัวลากเส้นจึงหาแต่ละบริเวณของสีและวาดพาธเรียบร้อยรอบมันได้ ผลลัพธ์คือ SVG กะทัดรัดที่มีรูปทรงไม่กี่อัน คมที่ทุกสเกล ขนาดไฟล์เล็ก และแก้ไขได้ภายหลัง ถ้าเป้าหมายของคุณคือโลโก้ที่ใช้ได้ตั้งแต่ favicon ถึงบิลบอร์ด การลากเส้นพาคุณไปถึงที่นั่น
ทำไมภาพถ่ายถึงไม่เหมาะ
ภาพถ่ายคือสิ่งตรงข้ามกับที่ตัวลากเส้นต้องการ มันมีสีที่ผันแปรเล็กน้อยนับพันและไม่มีขอบคม โทนต่อเนื่อง เพื่อทำให้มันเป็นเวกเตอร์ เอนจินต้องประมาณทุกการไล่เฉดด้วยหยดสีแบนที่ซ้อนและเหลื่อมกัน สามสิ่งผิดพลาดพร้อมกัน SVG กลายเป็นมหึมา มักใหญ่กว่า JPG ต้นฉบับหลายเท่า มันดูเปื้อนและเป็นปื้นสีแทนที่จะเหมือนภาพถ่าย และมันแก้ไขยากทรมานเพราะมันทำจากรูปทรงไร้ความหมายนับพัน สำหรับภาพถ่าย ฟอร์แมตแรสเตอร์คือคำตอบที่ถูกล้วน ๆ บีบอัด JPG หรือแปลงเป็น WebP แทน เวกเตอร์มีไว้สำหรับกราฟิก ไม่ใช่ภาพถ่าย
พรีเซ็ตและจำนวนสี
จำนวนสีที่ตัวลากเส้นได้รับอนุญาตให้ใช้คือคันโยกที่ใหญ่ที่สุดต่อผลลัพธ์ พรีเซ็ตตั้งมันให้คุณ แบน / โลโก้ คงสีน้อยสำหรับเครื่องหมายง่าย ๆ รายละเอียด อนุญาตมากขึ้นสำหรับภาพประกอบที่รวยกว่า ปื้นสี ยุบภาพเป็นแถบสีแบนหนา ๆ และ ขาวดำ ลดทุกอย่างเหลือสองโทนสำหรับลายเส้นและเงา สีน้อยกว่าหมายถึงไฟล์ที่สะอาดกว่าและเล็กกว่า สีมากขึ้นจับความละเอียดอ่อนโดยแลกกับพาธและน้ำหนักที่เพิ่ม การลองสองพรีเซ็ตกับภาพเดียวกันและเปรียบเทียบตัวอย่างก่อน/หลังคือวิธีที่เร็วที่สุดในการหาสมดุลที่ถูก
ในเครื่องทั้งหมด ไม่มีการอัปโหลด
การแปลงทั้งหมดรันในเบราว์เซอร์ของคุณด้วยเอนจิน imagetracer ภาพถูกอ่านจากแคนวาสบนเครื่องของคุณเอง ลากเส้นที่นั่น และส่งกลับเป็น SVG ไม่มีการอัปโหลด ไม่มีบัญชี และเมื่อหน้าโหลดแล้วมันทำงานโดยปิดเครือข่ายได้ นั่นควรค่าแก่การมีสำหรับโลโก้หรือกราฟิกภายในที่คุณอยากไม่ส่งไปยังเซิร์ฟเวอร์ของคนอื่น
ขอชี้แจงหนึ่งอย่าง เพราะคำว่า "แปลง" ชวนให้เข้าใจผิด นี่คือการลากเส้นจริง ไม่ใช่การวาดใหม่ด้วย AI มันตามพิกเซลที่คุณให้และไม่คิดค้นเวอร์ชันที่สะอาดกว่าของงานศิลป์ของคุณ ต้นฉบับที่คม แบน สีน้อยให้ผลลัพธ์ที่คม ต้นฉบับที่เบลอหรือมีนอยส์ให้พาธที่เบลอและมีนอยส์
หลังการลากเส้น
เพราะผลลัพธ์เป็น SVG มาตรฐานของพาธและการเติมสีที่มีชื่อ คุณทำงานกับมันต่อในโปรแกรมแก้ไขเวกเตอร์ใดก็ได้ Illustrator, Inkscape, Figma ลงสีทั้งบริเวณใหม่ด้วยการแก้การเติมสีอันเดียว ตั้งสีแบรนด์ที่แม่นยำ ลบรูปทรงที่หลงมา หรือปรับพาธ นั่นคือประเด็นของการไปเวกเตอร์ ภาพเลิกเป็นรูปตายตัวและกลายเป็นวัตถุที่คุณเป็นเจ้าของและปรับรูปได้ที่ขนาดใด ๆ โดยไม่เบลอ