จัดโลโก้กึ่งกลางด้วยสายตาโดยเก็บไฟล์หลักเดิม

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

การจัดกลางเชิงสายตาคือการปรับตำแหน่งเมื่อระยะขอบเท่ากันทางเรขาคณิตไม่ได้สมดุลที่ต้องการ ต้องใช้วิจารณญาณกับรูปนี้ในบริบทนี้ การคำนวณจุดศูนย์กลางพื้นที่หรือเลื่อนพิกเซลคงที่อาจให้จุดเริ่ม แต่ไม่ยืนยันตำแหน่งสวยที่สุดสากล

ตัวอย่างใช้เครื่องหมายไม่สมมาตรต้นฉบับหนึ่งรูปในกรอบ 200 คูณ 140 ตัวด้านซ้ายกว้างและปลายขวาแคบ ทำให้วัดกรอบเท่ากันและเทียบตัวเลือกง่าย คุณทำไฟล์ด้านล่างได้โดยไม่ใช้โปรแกรมออกแบบเสียเงิน

วางจุดเริ่มเรขาคณิตก่อนตัดสินสมดุล

กรอบขอบเขตคือสี่เหลี่ยมเล็กสุดที่ขนานแกนและล้อมรูปทรงที่วัด จุดกลางช่วยวางเริ่มต้น แต่ไม่ได้บอกพื้นที่เติมแต่ละด้านหรือส่วนที่ดึงสายตา

ตัวอย่างออกแบบเชิงสายตาของ Rafal Tomal แสดงกรณีที่ตำแหน่งตามสายตาต่างจากจัดตามตัวเลข สนับสนุนให้เทียบผลจริง ไม่ได้ให้ค่าปรับเดียวสำหรับทุกโลโก้

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

สำหรับมิติ SVG getBBox() ให้ขอบในระบบพิกัดผู้ใช้ขององค์ประกอบ ไม่รวมการแปลงของตัวเองหรือแม่ การวัด viewport เบราว์เซอร์ตอบอีกคำถาม คู่มือกรอบขอบเขต SVG อธิบายการแยกมิติ

เทียบเครื่องหมายเดิมในกรอบเท่ากัน

พาธต้นฉบับด้านล่างอยู่ x = 20 ถึง 140 และ y = 20 ถึง 80 จึงกว้าง 120 สูง 60 มีจุดกลาง (80, 50) กรอบกลางคือ (100, 70) เลื่อนกลุ่มด้วย (20, 20) จัดกรอบรูปกลางได้

บันทึกเป็น logo-geometric.svg แล้วเปิดในเบราว์เซอร์ สี่เหลี่ยมจางคือกรอบวาง ไม่ใช่ส่วนของโลโก้

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="140" viewBox="0 0 200 140">
  <rect x="0.5" y="0.5" width="199" height="139"
        rx="8" fill="#f7f9fc" stroke="#cad4e2"/>
  <g transform="translate(20 20)">
    <path fill="#193b59"
          d="M20 20H70V35H140L70 55V80H20Z"/>
  </g>
</svg>

ภาพที่เห็นตอนนี้อยู่ x = 40 ถึง 160 และ y = 40 ถึง 100 ให้ขอบแนวนอน 40 หน่วยเท่ากันและแนวตั้ง 40 หน่วยเท่ากัน นี่คือฐานเปรียบเทียบ ไม่ใช่ข้อบังคับตำแหน่งสุดท้าย

ทำตัวเลือกสายตาโดยบันทึกไฟล์ที่สองใช้ transform="translate(32 20)" การขยับขวา 12 หน่วยเปลี่ยนเฉพาะตำแหน่ง คงค่า d สีเติม กรอบ และขนาดแสดงเหมือนกัน การเลื่อน SVG ย้ายระบบพิกัด ไม่ต้องเขียนพาธใหม่

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

ตรวจโดยซ่อนเส้นกำกับและใช้ขนาดจริง

เทียบในกรอบและพื้นหลังจริง ซ่อนเส้นกลางกับกรอบวัดก่อนตัดสิน มิฉะนั้นอาจมองแต่ระยะขอบแทนเครื่องหมาย

1. เปิดแบบเรขาคณิตกับแบบทดลองที่ขนาดเท่ากัน
2. ดูทีละแบบในเลย์เอาต์ที่ตั้งใจ แล้วเทียบร่วมกัน
3. ตรวจจุดวางเล็กที่โลโก้จะใช้จริง คงสัดส่วนกรอบและเนื้อหารอบ
4. ยืนยันว่าการย้ายรักษาพื้นที่ว่างอนุมัติและไม่คลิป
5. บันทึกระยะที่เลือกกับการใช้งานที่เกี่ยวข้อง กลับฐานเรขาคณิตหากทดลองแล้วไม่สมดุลแบบใหม่

กรอบกว้าง 200 px ทำให้การขยับ 12 หน่วยเป็น 12 px ที่กรอบ 100 px การขยับ SVG เดิมเป็น 6 px ตาม viewBox การเพิ่ม CSS offset คงที่ 12 px ทุกขนาดเป็นกฎต่างกัน

หมายเหตุวิธีทดสอบ: เราเรนเดอร์ SVG เต็มทั้งสองใน Chromium เทียบขอบ viewport ที่กว้าง 200 px และ 100 px และตรวจพาธเหมือนกัน แบบเรขาคณิตมีขอบซ้ายขวา 40 px ที่เต็มขนาด แบบทดลองซ้าย 52 px ขวา 28 px และขยับสัมพัทธ์ 6 px ที่ครึ่งขนาด นี่เป็นตรวจรูปทรงกับการเทียบบรรณาธิการ ไม่ใช่งานศึกษาการรับรู้มนุษย์

หากโลโก้เปลี่ยนรูป ให้คืนไฟล์หลักแล้วเปลี่ยนเฉพาะ transform วาง หากปลายถูกคลิป ให้ดู viewport และ offset ก่อนแก้โลโก้ หากชุดโลโก้หรือพื้นหลังอื่นเปลี่ยนสมดุล ให้ทบทวนกรณีนั้นแยก สำหรับกรอบกว้างหรือสูง ดูคู่มือชุดโลโก้ SVG แบบ responsive

เก็บไฟล์หลักและการตัดสินใจตำแหน่ง

เก็บโลโก้ต้นทางแยกจากตัวครอบวางของเลย์เอาต์ จดขนาดกรอบ ขนาดอ้างอิง transform และพื้นหลัง ตัวอย่างนี้จดได้ว่า “เครื่องหมายเดิม 120 คูณ 60; กรอบวาง 200 คูณ 140; transform ทดลอง (32, 20); ทบทวนอีกเมื่อใช้ชุดอื่น”

ไฟล์แบรนด์อนุมัติอาจมีการแก้สายตาในรูปหรือกรอบส่งออกอยู่แล้ว ใช้ไฟล์และแนวทางที่ให้ อย่าออกแบบโลโก้เดิมใหม่เพียงเพราะวัดขอบไม่เท่ากัน

การวางทั้งเครื่องหมายต่างจากจัดข้อความที่แก้ได้ตามเส้นฐาน หากเป็นป้ายในส่วนควบคุม ใช้คู่มือจัดแนวตั้งข้อความ SVG ขั้นตอนต้นทางและส่งมอบอื่นดูคู่มือบล็อก

PerfectVector ช่วยตรงไหนก่อนวาง

PerfectVector ช่วยกู้รูปเวกเตอร์จากโลโก้ราสเตอร์ก่อนเทียบตำแหน่งได้ ตรวจรูปเงา ช่อง และเศษพื้นหลังกับต้นแบบก่อน กระบวนการเวกเตอร์โลโก้ เป็นขั้นกู้ต้นทาง ส่วนตำแหน่งตามสายตายังเป็นการตัดสินใจของคุณ

หากมีเวกเตอร์หลักอนุมัติ วางไฟล์นั้นโดยตรง หากลากเส้นแล้วเปลี่ยนส่วนไม่สมมาตรที่ตั้งใจ ให้แก้ต้นทางก่อนตัดสินศูนย์กลาง คู่มือเวกเตอร์โลโก้ อธิบายการตรวจ ไฟล์ย่อขยายได้ทำให้แก้ตำแหน่งสะดวก แต่ไม่เลือกว่าคนจะรู้สึกสมดุลอย่างไร

คำถามที่พบบ่อย

โลโก้ไม่สมมาตรควรมีระยะขอบเท่ากันหรือไม่?

ขอบเท่ากันให้ฐานเรขาคณิตที่วัดได้ โลโก้ไม่สมมาตรบางรูปอาจดูดีขึ้นเมื่อมีการขยับที่บันทึกไว้ เทียบในขนาดใช้และเก็บภาพอนุมัติไม่เปลี่ยน

จุดศูนย์กลางพื้นที่คือศูนย์กลางสายตาหรือไม่?

จุดศูนย์กลางเรขาคณิตอธิบายการกระจายรูปทรงหรือพื้นที่แบบหนึ่ง ช่วยลองวางได้ แต่ไม่ยืนยันสมดุลที่รับรู้ของทุกโลโก้ในทุกกรอบและพื้นหลัง

ควรแก้พาธเพื่อย้ายโลโก้หรือไม่?

สำหรับเทียบตำแหน่ง เก็บพาธเดิมแล้วใช้ transform หรือจุดวางแยก ทำให้ไฟล์หลักเดิมและเทียบหรือย้อนปรับง่าย

แหล่งข้อมูล

1. Rafal Tomal — ทำแบบให้เหมาะกับสายตา — ตัวอย่างของนักออกแบบที่แก้ภาพต่างจากจัดตัวเลข
2. MDN — SVGGraphicsElement getBBox() — อธิบายขอบพิกัดท้องถิ่นที่ใช้เป็นฐานเรขาคณิต
3. MDN — SVG transform — อธิบายเลื่อนพาธเดิมผ่านกลุ่มวาง

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