Softonic

เครื่องมือสร้างกริด SVG

ขั้นตอน 1 / 3
ถัดไป

พื้นหลังแบบกริดเป็นองค์ประกอบหลักในเครื่องมือออกแบบต่างๆ เช่น Figma และ Framer หน้าล็อนดิ้งที่ออกแบบสำหรับนักพัฒนา เช่น Linear และ Vercel รวมถึงอินเทอร์เฟซทุกประเภทที่ต้องการให้ดูคล้ายแบบร่างหรือกระดาษกราฟิก นอกจากนี้ยังเป็นหนึ่งในพื้นหลังที่มีขนาดเล็กที่สุดที่สามารถใช้งานได้ โดยใช้รูปแบบ <pattern> ที่ซ้ำกันสองครั้ง และมีขนาดไฟล์ไม่เกิน 300 ไบต์ เครื่องมือนี้สามารถสร้างโครงสร้างกริดได้ตามขนาดเซลล์ ความหนาของเส้น และสีที่ต้องการ ทำให้คุณสามารถปรับแต่งให้ได้ทั้งสไตล์กริดแบบ Figma ที่เรียบง่าย หรือลักษณะแบบร่างที่เด่นชัด

วิธีการสร้างกริด

  1. 1

    ตั้งขนาดของผืนผ้าใบ

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

  2. 2

    เลือกขนาดเซลล์

    เลือกได้ตั้งแต่ 5 ถึง 500 พิกเซล ลองใช้ 20–40 พิกเซลสำหรับพื้นหลังเรียบง่าย, 8–12 พิกเซลสำหรับกระดาษกราฟ และ 60–80 พิกเซลสำหรับไวร์เฟรมที่เด่นชัด

  3. 3

    เลือกความกว้างและสีของเส้น

    เส้นที่มีความหนา 0.5–1 พิกเซล จะแสดงเป็นเส้นที่เรียบเนียน ส่วนเส้นที่มีความหนาเกิน 2 พิกเซลจะเริ่มดูเหมือนถูกวาดขึ้นมา

  4. 4

    ตั้งค่าพื้นหลัง

    เลือกสีพื้นหลังทึบที่ SVG จะสร้าง หากต้องการวางซ้อน ให้คัดลอก SVG แล้วแก้ไขหรือลบ `<rect>` พื้นหลังในโค้ดของคุณเอง

  5. 5

    คัดลอกไฟล์ SVG

    วางภาพลงในช่องทำเครื่องหมาย หรือแทรกแบบ inline ใน URL ข้อมูล CSS เพื่อใช้เป็นภาพพื้นหลังที่สามารถจัดเรียงเป็นแผ่นได้

องค์ประกอบรูปแบบ

เซลล์แต่ละเซลล์ประกอบด้วยองค์ประกอบ <path> เพียงหนึ่งตัว ซึ่งทำหน้าที่วาดขอบด้านขวาและขอบด้านล่าง การนำแผ่นเดียวกันนี้มาซ้ำจะสร้างโครงข่ายทั้งหมด โดยใช้เส้นตรงเพียงสองเส้นต่อเซลล์ ไม่ใช่สี่เส้น

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cccccc" stroke-width="1"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

ความมหัศจรรย์อยู่ที่เส้นทางของ M 40 0 L 0 0 0 40: เริ่มจากจุด (40, 0) ไปตามแนวเส้นตรงถึง (0, 0) แล้วต่อไปอีกครั้งถึง (0, 40) เส้นนี้จะวาดเส้นด้านบนไปยังมุมซ้ายบนเพียงเท่านั้น ก่อนจะค่อยๆ ทอดลงด้านซ้าย เมื่อนำมาใช้ในการจัดเรียงเป็นแผ่นกริด จะสร้างโครงข่ายที่สมบูรณ์โดยไม่มีเส้นที่ซ้ำกัน

คู่มือการกำหนดขนาดรูปแบบ

กรณีการใช้งาน ขนาดเซลล์ เส้น สีที่เหมาะสม
ผ้าใบสไตล์ Figma 20–30 พิกเซล 1 พิกเซล #e5e7eb บน #fafafa
กระดาษกราฟ 10–12 พิกเซล 0.5 พิกเซล #cbd5e1 บน #ffffff
แบบแปลน 40–60 พิกเซล 1 พิกเซล #bfdbfe บน #1e3a8a
กรอบเส้น 80 พิกเซล 1.5 พิกเซล #9ca3af บน #ffffff
เทอร์มินัลแบบเรโทร 16 พิกเซล 1 พิกเซล #22c55e บน #000000

โครงข่ายหลักและโครงข่ายรอง

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

.grid {
  background:
    url("data:image/svg+xml,<svg>... major grid...</svg>"),
    url("data:image/svg+xml,<svg>... minor grid...</svg>");
}

เบราว์เซอร์สามารถรวมองค์ประกอบทั้งหมดเข้าด้วยกันในการวาดครั้งเดียว โดยไม่ส่งผลกระทบต่อประสิทธิภาพการทำงานแต่อย่างใด

ความสามารถในการเข้าถึง

กริดนี้มีไว้เพื่อการตกแต่งเท่านั้น ให้ประยุกต์ใช้กับองค์ประกอบปลอม (::before ร่วมกับ position: absolute; inset: 0; z-index: -1;) เพื่อให้โปรแกรมอ่านหน้าจอและเครื่องมือวิเคราะห์เนื้อหาสามารถมองเห็นเฉพาะเนื้อหาหลักได้ โดยไม่รวมพื้นหลัง

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

เส้น SVG ที่สร้างด้วยความกว้างต่ำกว่าพิกเซลอาจเกิดการแอนตี้แอลิแอส (anti-aliasing) ได้ ให้ปรับความกว้างของเส้นให้เท่ากับพิกเซลเต็มจำนวน (เช่น 1 หรือ 2 พิกเซล) และเลื่อนเส้นไปทางด้านข้าง 0.5 พิกเซล (สำหรับเส้นที่มีความกว้าง 1 พิกเซล) เพื่อให้ตรงกับโครงข่ายพิกเซล

ไม่สามารถใช้เครื่องกำเนิดนี้ได้ เครือข่ายเฮกซาโกนต้องใช้แผ่นที่มีความกว้างเท่ากับรากทศนิยมสองของ 3 เท่าของความสูง และเส้นทางที่วาดเป็นรูปเฮกซาโกนครึ่งหนึ่ง ควรใช้เครื่องมือสำหรับสร้างเครือข่ายเฮกซาโกนโดยเฉพาะ หรือวาดโดยตรงใน Figma

ตัวแก้ไขนี้สร้างพื้นหลังทึบ หากต้องการวางซ้อน ให้คัดลอก SVG แล้วเปลี่ยน <rect> พื้นหลังตัวแรกเป็น fill="transparent" หรือลบออกในโค้ดของคุณเอง

ใช่ กริดในรูปแบบ SVG มีขนาดเพียง 200–500 ไบต์ สามารถปรับขนาดได้อย่างแม่นยำตามอัตรา DPR และคุณสามารถเปลี่ยนสีได้โดยใช้ตัวแปร CSS ส่วนกริดในรูปแบบ PNG มักมีขนาดประมาณ 5–20 กิโลไบต์ และจะแสดงผลเป็นพิกเซลบนจอ Retina

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

เครื่องมือที่เกี่ยวข้อง

ตัวเลือกสี Material Design

สำรวจพาเลตสีของ Material Design คัดลอกเฉดสีใดก็ได้ (ตั้งแต่ 50 ถึง A700) ในรูปแบบ HEX, RGB หรือ HSL เพียงแตะครั้งเดียว

โปรแกรมแปลงรูปแบบภาพ

แปลงรูปภาพเป็น JPG, PNG หรือ WebP ได้ทันทีในเบราว์เซอร์ พร้อมควบคุมคุณภาพสำหรับรูปแบบบีบอัดและรักษาความโปร่งใสใน PNG และ WebP

เครื่องสร้างกระดาษเส้นบรรทัด

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

เครื่องมือแบ่งกริดรูปภาพ Instagram

แบ่งรูปภาพขนาดใหญ่ให้เป็นกริด Instagram ขนาด 3×3 หรือกี่แถวก็ได้ แต่ละแผ่นภาพมีหมายเลขกำกับ จึงอัปโหลดแบบย้อนลำดับได้ง่าย

ตัวแปลง JPG เป็น Word

แปลงภาพถ่าย JPG หรือภาพหน้าจอของข้อความเป็นเอกสาร Word ที่แก้ไขได้ เครื่องมืออ่านคำด้วย OCR แล้วจัดวางเพื่อให้คุณเขียนใหม่ จัดรูปแบบ และนำกลับมาใช้ได้

เครื่องแปลงค่าจาก Pantone เป็น HEX

แปลงสี Pantone PMS ให้เป็นค่า HEX, RGB และ CMYK ที่ใกล้เคียงที่สุด เพื่อให้สอดคล้องกันระหว่างการแสดงผลบนหน้าจอและการพิมพ์ โดยพร้อมดูตัวอย่างสีแบบสวัตช์

เครื่องมือนี้มีให้บริการในภาษาอื่น