พื้นหลังลวดลายกริด SVG

พื้นหลังลวดลายประกอบด้วยอะไรบ้าง

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

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

เลือกค่าที่ใช้เป็นพื้นหลังได้ดี

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

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

ตัวอย่างการคำนวณ

สำหรับส่วนฮีโร่ที่กว้าง 1200 px และสูง 800 px ช่อง 40 px จะให้ 30 คอลัมน์และ 20 แถว รวม 600 ช่อง เพราะ 1200 และ 800 หารด้วย 40 ลงตัวทั้งคู่ กริดจึงจบเรียบร้อยทั้งสองขอบ ช่อง 50 px จะได้ 24 คูณ 16 ช่อง ซึ่งเรียบร้อยเช่นกัน ส่วนช่อง 45 px จะทำให้เหลือช่องไม่เต็มทางขวาและด้านล่าง เพราะ 1200 หารด้วย 45 ได้ 26.67

การนำผลลัพธ์ไปใช้

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

ให้พื้นหลังสอดคล้องกับเลย์เอาต์

หากคอลัมน์เนื้อหากว้าง 960 px ช่อง 32 px หรือ 40 px จะทำให้กริดและขอบคอลัมน์สอดคล้องกัน เพราะ 960 หารลงตัวทั้งสองค่า การจัดกริดให้ตรงกับเลย์เอาต์ทำให้เส้นดูเหมือนถูกออกแบบมา ไม่ใช่สุ่มขึ้นมา