Logo อันเดียวกัน ในแถบนำทางเว็บไซต์อาจสูงแค่ 24 พิกเซล แต่พอพิมพ์ลงแบ็กดรอปงานออกบูธต้องขยายกว้างถึงสองเมตร การเลือก PNG หรือ SVG ให้ดูก่อนว่ามันจะเข้าสู่สถานการณ์แบบใด หน้าเว็บและอินเทอร์เฟซผลิตภัณฑ์เลือก SVG ก่อน โลโก้ถูกบันทึกเป็น path ทุกขนาดซอฟต์แวร์วาดใหม่เสมอ ทางเข้าอัปโหลดที่รับเฉพาะบิตแมป (รูปโปรไฟล์โซเชียล เอกสารออฟฟิศบางชนิด) ส่ง PNG พื้นโปร่งใสหนึ่งใบ ส่วนโปสเตอร์ ป้าย และสื่อสิ่งพิมพ์ใช้ SVG หรือไฟล์เวกเตอร์ที่ส่งออกจากมัน ขยายเท่าไรก็ไม่พร่า ถ้ามือมีแค่ PNG ใบเดียวก็ไม่ต้องรื้อทำใหม่ ยืนยันก่อนว่าแต่ละสถานการณ์ต้องการฟอร์แมตใด แล้วค่อยเติมส่วนที่ขาด
ประเด็นสำคัญ
- หน้าเว็บ อินเทอร์เฟซ และโอกาสที่ต้องย่อ-ขยาย เปลี่ยนสีบ่อย ๆ ใช้ SVG กราฟิกบันทึกเป็น path ขยายเมื่อไรก็วาดใหม่ ขอบไม่พร่า
- ทางเข้าที่รับเฉพาะบิตแมป (รูปโปรไฟล์โซเชียล ซอฟต์แวร์ออฟฟิศบางตัว) ใช้ PNG พื้นโปร่งใส ไม่ต้องฝืนให้แพลตฟอร์มรองรับ SVG
- Logo แบบกราฟิกและตัวอักษรโลโก้ควรมีไฟล์หลัก SVG สำรองไว้ ส่วนมาสคอตภาพถ่ายสไตล์และภาพแบรนด์ที่เท็กซ์เจอร์ซับซ้อนเก็บเป็น PNG ความละเอียดสูง
- SVG ไม่จำเป็นต้องเล็กกว่า PNG เสมอไป ขนาดไฟล์ขึ้นกับความซับซ้อนของกราฟิก เกณฑ์เลือกคือการใช้งาน ไม่ใช่ปริมาณไบต์
เริ่มเลือกจากสามสถานการณ์ใช้งาน
งานส่งมอบที่พบบ่อยที่สุดสามแบบ ครอบคลุมปลายทางของไฟล์ Logo เกือบทั้งหมด
โลโก้แถบนำทางเว็บไซต์ โลโก้ในแถบนำทาง ฟุตเตอร์ และอินเทอร์เฟซมือถือ จะแสดงหลายขนาดตามความหนาแน่นหน้าจอที่ต่างกัน SVG เหมาะที่สุดตรงนี้ เบราว์เซอร์วาดตาม path แบบเรียลไทม์ ตั้งแต่ความกว้างไอคอนเล็กจนถึงแบนเนอร์ใหญ่ในฟุตเตอร์ก็คมชัด จะเปลี่ยนสีแก้ตรงในไฟล์หรือโค้ดได้เลย และไฟล์เดียวกันส่งต่อให้ดีไซเนอร์แก้ต่อได้เหมือนเดิม
รูปโปรไฟล์โซเชียลขนาดเล็ก ทางเข้าอัปโหลดรูปโปรไฟล์มักรับเฉพาะ JPG กับ PNG เตรียม PNG พื้นโปร่งใสหนึ่งใบก็พอ เมื่อแพลตฟอร์มครอปเป็นวงกลมหรือสี่เหลี่ยม รอบโลโก้จะไม่ติดก้อนพื้นขาวออกมา ขนาดแสดงผลของรูปโปรไฟล์จำกัดอยู่แล้ว ความคมของบิตแมปเพียงพอเกินไป สถานการณ์นี้ไม่ต้องใช้ SVG
โปสเตอร์ขนาดใหญ่และสื่อสิ่งพิมพ์ โปสเตอร์ ป้าย standee ป้ายหน้าร้าน จะขยายโลโก้ไปหลายสิบเท่า SVG แก้ปัญหาการสเกลจากราก อยู่ที่ path ที่ไม่ผูกกับความละเอียด จะเอาต์พุตใหญ่แค่ไหนเป็นเรื่องของขั้นตอนใช้งาน ถ้ามีแค่ PNG เล็กใบเดียวแล้วขยายตรง ๆ จะเบลอและมีรอยหยัก สถานการณ์นี้แหละที่ต้องการไฟล์เวกเตอร์อย่างแท้จริง
ความต่างของ PNG กับ SVG เห็นได้จากตรงไหน
ความต่างพื้นฐานของสองฟอร์แมตคือวิธีบันทึกกราฟิก PNG ใช้กริดพิกเซล จุดหนึ่งจุดเก็บสีหนึ่งสี ไฟล์จะใหญ่แค่ไหนก็มีจำนวนพิกเซลรวมคงที่ เมื่อขยายเกินพิกเซลต้นฉบับ ซอฟต์แวร์ได้แต่ดึงพิกเซลเดิมออกมาแปะ ขอบภาพจึงเบลอและหยักตามมา SVG บรรยายกราฟิกด้วย path และรูปทรง เส้นเริ่มที่ไหน โค้งงออย่างไร พื้นที่ใส่สีอะไร ตอนขยายซอฟต์แวร์วาดใหม่ตามคำบรรยายเหล่านี้ ขอบจึงเรียบเสมอ
พื้นหลังโปร่งใสทั้งสองฟอร์แมตรองรับ แต่วิธีต่างกัน PNG ใช้ช่องพิกเซลโปร่งใสเก็บช่องว่างรอบโลโก้ SVG ไม่มี "พื้น" มาแต่กำเนิด ตัวกราฟิกคือชุดของ path จุดแบ่งที่ใหญ่กว่าคือการแก้ไขภายหลัง SVG เปิดมาแล้วเปลี่ยนสีทั้งชุด ขยับ anchor แยกประกอบใหม่ได้เลย ส่วน PNG แก้ได้เฉพาะระดับพิกเซล จะแก้สีหนึ่งก้อนต้องเข้าซอฟต์แวร์บิตแมปมาอุดและระบายเอง
ขนาดไฟล์มักถูกตีความผิด กราฟิกเรียบง่าย SVG บันทึก path เพียงเล็กน้อย มักเล็กมาก แต่บิตแมปที่ไล่เฉดจัดเต็มและมี noise ชัด เมื่อแปลงเป็น SVG จะถูกแตกเป็น path เศษจำนวนมหาศาล ขนาดอาจใหญ่กว่า PNG ต้นฉบับไปมาก ประโยคที่ว่า "SVG เล็กกว่า" ไม่จริงเสมอ สิ่งที่จริงคือ "SVG ของกราฟิกเรียบง่ายเล็ก"
ตารางเลือกฟอร์แมตตามสถานการณ์
ชนิดของวัสดุกำหนดทางเลือกได้มากกว่าพารามิเตอร์ของฟอร์แมต คำแนะนำตามกราฟิกแบรนด์ที่พบบ่อยสามกลุ่ม:
| ชนิดวัสดุ | ลักษณะกราฟิก | คำแนะนำ | เหตุผล |
|---|---|---|---|
| Logo แบบกราฟิก ตัวอักษรโลโก้ | ขอบชัด ก้อนสีจำกัด | เตรียมไฟล์หลัก SVG และบันทึก PNG พื้นโปร่งใสเพิ่ม | path สะอาดแก้ไขได้ SVG รองรับการสเกล PNG เป็นตัวรองรับทางเข้าที่ไม่รับ SVG |
| มาสคอตภาพถ่ายสไตล์ | ไล่เฉดต่อเนื่อง เงาจัดเต็ม | เก็บ PNG ความละเอียดสูง | การทำเวกเตอร์จะแตกเป็น path เศษจำนวนมาก แก้ยาก และเสียประโยชน์การสเกลอิสระของ path จำนวนน้อย |
| ภาพแบรนด์เท็กซ์เจอร์ซับซ้อน | รายละเอียดเยอะ เป็นเม็ดชัด | เน้นบิตแมป แปลงเวกเตอร์เฉพาะส่วนเมื่อจำเป็น | การแปลงทั้งภาพมักคุ้มค่าไม่พอเสีย ต้องการขนาดใหญ่กว่าให้ส่งออกบิตแมปความละเอียดสูงใหม่ก่อน |
จำกฎตัดสินข้อเดียวก็พอ ยิ่งขอบชัดและก้อนสีน้อย ยิ่งคุ้มที่จะทำเวกเตอร์ ยิ่งภาพใกล้ภาพถ่าย ยิ่งควรอยู่ในฟอร์แมตบิตแมป
มีแค่ PNG อยู่แล้ว จะเติม SVG อย่างไร
หลังยืนยันว่าต้องใช้ SVG การแปลงเป็นเพียงช่วงสั้น ๆ ของทั้งเรื่อง ใช้ แปลงภาพเป็นเวกเตอร์ อัปโหลด PNG ใบนั้น เครื่องมือรับ PNG, JPG และ WebP กว้างและสูงไม่ต่ำกว่า 256 พิกเซล เมื่อล็อกอินแล้วแปลงครั้งละหนึ่งใบ เสร็จแล้วดาวน์โหลดไฟล์ SVG ภาพหน้าจอทุกขั้นตั้งแต่อัปโหลด ตรวจสอบ จนถึงดาวน์โหลด มีโฟลว์ครบในบทแนะนำชุดเดียวกันเรื่อง "วิธีแปลง PNG และ JPG เป็น SVG" จึงไม่ขอลงซ้ำที่นี่
หลังแปลงเสร็จ ผลลัพธ์ยังต้องจัดตามการใช้งาน แผงผลลัพธ์มีการขยาย 1x, 2x, 4x ก่อนส่งมอบให้ดูจุดโค้ง ช่องโปร่ง และเส้นบางว่าสะอาดหรือไม่ มีสองเรื่องที่ต้องยอมรับไว้ก่อน ตัวอักษรจะกลายเป็น path เส้นขอบ การแปลงไม่คืนค่าฟอนต์ต้นฉบับที่แก้ไขได้ จะแก้ข้อความต้องพิมพ์ใหม่ในเครื่องมือออกแบบ และคุณภาพขอบขึ้นกับภาพต้นฉบับ PNG ที่บีบอัดหนักแปลงออกมาขอบหยาบ ให้เปลี่ยนเป็นภาพต้นฉบับที่ชัดกว่าแล้วค่อยแปลง วิธีจัดภาพต้นฉบับแบบนี้จะเล่าแยกไว้ใน "Logo แปลงเวกเตอร์แล้วขอบหยาบทำอย่างไร"
จัดแพ็กเกจไฟล์ส่งมอบแบรนด์อย่างไร
หลังตัดสินฟอร์แมตแล้ว จัด Logo เป็นชุดไฟล์ที่มีชื่อกำกับ ส่งให้ฝ่ายใดก็ไม่ต้องขอไปขอมอีก แพ็กเกจส่งมอบที่เล็กที่สุดแต่ใช้ได้หน้าตาเป็นแบบนี้:
| ไฟล์ | การใช้งาน | ตัวอย่างการตั้งชื่อ |
|---|---|---|
| ไฟล์หลัก SVG | ไฟล์ต้นทางเดียวสำหรับเว็บ สื่อ การขยาย และการแก้ไขภายหลัง | acme-logo.svg |
| PNG พื้นโปร่งใส | รูปโปรไฟล์โซเชียล เอกสารออฟฟิศ ฯลฯ ที่รับเฉพาะบิตแมป | acme-logo-transparent.png |
| พรีวิวพื้นเข้ม | ตรวจความอ่านง่ายของโลโก้บนพื้นหลังเข้ม | acme-logo-preview-dark.png |
| พรีวิวพื้นอ่อน | ตรวจการแสดงผลของโลโก้บนพื้นหลังอ่อน | acme-logo-preview-light.png |
การตั้งชื่อใช้คำนำหน้าเดียวกันบวกคำลงท้ายบอกการใช้งาน เมื่อเวอร์ชันเปลี่ยนให้อัปเดตหมายเลขเวอร์ชัน อย่าคัดลอกเป็นชื่อใหม่ ไม่อย่างนั้นสักวันในแพ็กเกจจะมีทั้ง logo-final-2.png และ logo-ฉบับสุดท้าย.png อยู่ร่วมกัน พรีวิวพื้นเข้ม-อ่อนแนะนำให้อยู่โฟลเดอร์เดียวกัน ตอนส่งมอบอีกฝ่ายเห็นปุ๊บก็ยืนยันได้ทันทีว่าโลโก้ใช้ได้ทั้งสองพื้นหลังหรือไม่
ไฟล์ของขั้นตอนการพิมพ์ต้องจัดการแยกต่างหาก เมื่อโรงพิมพ์ขอ PDF เวกเตอร์ โหมดสีเฉพาะ หรือขนาดเผื่อขอบ ไฟล์ผลิตเหล่านี้จัดการโดยโฟลว์ออกแบบที่เกี่ยวข้อง โดยใช้ SVG เป็นต้นทาง ทำการแปลงและส่งออกในซอฟต์แวร์ออกแบบ และยืนยันมาตรฐานสีกับโรงพิมพ์ทีละข้อ เครื่องมือแปลงภาพเป็นเวกเตอร์ให้ผลลัพธ์เป็นไฟล์ SVG ไม่ได้สร้างไฟล์ผลิตสำหรับงานพิมพ์โดยตรง
คำถามที่พบบ่อย
SVG เล็กกว่า PNG เสมอไปไหม?
ไม่เสมอไป ขนาดไฟล์ขึ้นกับความซับซ้อนของเนื้อหา SVG ของกราฟิกเรียบง่ายบันทึก path ไม่กี่เส้น มักเล็กมาก ส่วนบิตแมปที่ไล่เฉด เงา และ noise จัดเต็มพอแปลงเป็น SVG จะได้ path เศษมากมาย ขนาดอาจกลับมาใหญ่กว่า เกณฑ์เลือกฟอร์แมตคือการใช้งานและความต้องการสเกล ไม่ใช่ปริมาณไบต์
PNG ขยายแล้วเบลอ ต้องแปลงเป็นเวกเตอร์เสมอไปไหม?
ดูการใช้งานถัดไปของ Logo นี้ ถ้าแค่ขยายครั้งเดียวเป็นครั้งคราว ส่งออก PNG ความละเอียดสูงกว่าใหม่หนึ่งใบก็พอ ถ้าต้องย่อ-ขยายบ่อย เปลี่ยนสีทั้งชุด ใช้งานพิมพ์ หรือเก็บเป็นไฟล์หลักแบรนด์ระยะยาว จึงคุ้มที่จะเติม SVG ส่วน Logo ภาพถ่ายสไตล์แม้แปลงแล้วก็ได้ path เศษที่แก้ยาก การคงบิตแมปความละเอียดสูงใช้งานจริงกว่า
โรงพิมพ์ขอ PDF ทำอย่างไร?
ทำตามข้อกำหนดเฉพาะของโรงพิมพ์ด้วยโฟลว์ออกแบบที่เกี่ยวข้อง นำไฟล์หลัก SVG เข้าซอฟต์แวร์ออกแบบ ส่งออกเป็นชนิด PDF ที่ฝ่ายนั้นระบุ และยืนยันพารามิเตอร์อย่างโหมดสีและขนาดเผื่อขอบกับโรงพิมพ์ทีละข้อ เครื่องมือแปลงภาพเป็นเวกเตอร์ให้ผลลัพธ์เป็นไฟล์ SVG ส่วน PDF สำหรับงานพิมพ์ผลิตทำในขั้นตอนออกแบบ
มีแค่ PNG อยู่แล้ว เติม SVG หนึ่งฉบับก่อน
เริ่มจากรายการที่ขาดในแพ็กเกจส่งมอบ ถ้ามีเฉพาะเวอร์ชัน PNG ให้ใช้ แปลงภาพเป็นเวกเตอร์ เติม SVG หนึ่งฉบับก่อน เอาไปเช็คบนพรีวิวพื้นเข้ม-อ่อนหนึ่งรอบ แล้วจึงตัดสินว่ามันเป็นไฟล์หลักได้หรือไม่ เมื่อขั้นนี้เสร็จ สามสถานการณ์คือเว็บ รูปโปรไฟล์ และโปสเตอร์ ก็มีไฟล์ฟอร์แมตตรงกันครบทุกสถานการณ์แล้ว
