Softonic

เครื่องสร้างรูปจุดแบบ SVG

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

ลวดลายจุดถือเป็นองค์ประกอบพื้นฐานที่ใช้กันอย่างแพร่หลายในพื้นหลังเว็บไซต์สมัยใหม่ เช่น เครือข่ายจุดเล็กๆ ที่ปรากฏบนหน้าเอกสารของ Notion จุดดอกไม้บนส่วนฮีโร่ หรือพื้นผิวคล้ายเม็ดธัญพืชบนการ์ด โปรแกรมสร้างลวดลายนี้สร้างไฟล์ SVG เพียงไฟล์เดียวโดยใช้คำจำกัดความ <pattern> แบบฝังตรง ในทำนองนี้ไฟล์จะมีขนาดเล็กมาก (โดยทั่วไปไม่เกิน 500 ไบต์) และสามารถแสดงผลได้อย่างสมบูรณ์ทุกขนาด ผู้ใช้สามารถควบคุมพื้นที่การแสดงผล ระยะห่างระหว่างจุด รัศมี สีของจุด และพื้นหลังได้

วิธีสร้างลวดลายจุด

  1. 1

    ตั้งค่าผืนผ้าใบ

    ความกว้างและความสูงในหน่วยพิกเซล สำหรับพื้นหลังแบบ CSS ค่าดังกล่าวสามารถเล็กได้ (เช่น 800×600) และสามารถจัดเรียงเป็นแผ่นซ้อนกันได้

  2. 2

    เลือกระยะห่าง

    ระยะห่างระหว่างจุดศูนย์กลางของจุดที่อยู่ติดกัน: เมื่อเท่ากับ 20–40 พิกเซล จะให้ผลลัพธ์ที่เรียบร้อย ในขณะที่เมื่อเท่ากับ 10 พิกเซล จะให้ผลลัพธ์ที่ไม่สม่ำเสมอหรือมีความรบกวน

  3. 3

    ตั้งรัศมีของจุด

    1–3 พิกเซลสำหรับเนื้อผิวที่ละเอียดอ่อน และ 4–8 พิกเซลสำหรับจุดพอลก้าที่ออกแบบมาอย่างตั้งใจ

  4. 4

    เลือกสี

    การเติมจุด (ส่วนหน้า) และพื้นหลังของผืนผ้าวาดภาพ ให้ตั้งค่าพื้นหลังเป็น `transparent` เพื่อให้ได้รูปแบบการทับซ้อนที่ถูกต้อง

  5. 5

    คัดลอกไฟล์ SVG

    ให้วางข้อมูลไว้ในไฟล์ HTML ของคุณ หรือใช้ชื่อ `background-image: url("data:image/svg+xml,...")` ใน CSS

วิธีการกำหนดรูปแบบ

เครื่องกำเนิดจะสร้างองค์ประกอบ <pattern> ภายในองค์ประกอบ <defs> และเติมข้อมูลจากองค์ประกอบ fill="url(#dots)" เข้าไปในองค์ประกอบ <rect> ที่มีพื้นที่แสดงผลเต็ม

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse" จำกัดขนาดของไทล์ไว้ที่หน่วยพิกเซล ดังนั้นการปรับขนาดไฟล์ SVG แม่จะไม่ทำให้จุดในภาพบิดเบี้ยว

แบบฟอร์มช่วยจำการปรับแต่งรูปแบบ

ดู ระยะห่าง รัศมี ความต่างของสี
กระซิบ (มองเห็นได้ยากมาก) 30–40 1–1.5 ความทึบ 5–10%
พื้นหลังแบบละเอียดอ่อน 25–30 2 ความทึบ 15–20%
ลวดลายจุดแบบตรง 20 2–3 สีเต็มรูปแบบ
ลวดลายจุดพอลก้าแบบออกแบบมาโดยเฉพาะ 40–60 8–15 สีเต็มรูปแบบ
ผลฮาล์ฟโทน 10 1 การเติมสีแบบเกรเดียนต์

การใช้เป็นพื้นหลังใน CSS

เข้ารหัสไฟล์ SVG เป็น URL ของข้อมูล และนำไปใช้กับองค์ประกอบใดๆ ก็ได้:

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

การใช้ CSS เพื่อจัดเรียงภาพในรูปแบบ SVG จะรวดเร็วกว่าการส่งไฟล์ PNG เนื่องจากเบราว์เซอร์จะแปลงรูปแบบนี้ให้อยู่ในรูปแบบราสเตอร์ตามขนาดการแสดงผลสุดท้าย ทำให้ภาพคงความคมชัดได้แม้บนหน้าจอทุกระดับ (1x, 2x, 3x)

เมื่อจุดทำให้การอ่านยากขึ้น

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

  • เพิ่มระยะห่างให้มากกว่า 40 พิกเซล เพื่อให้จุดปรากฏอยู่ระหว่างบรรทัด หรือ
  • ลดความทึบของลวดลายให้ต่ำกว่า 10% หรือ
  • วางข้อความไว้ภายในการ์ดแบบเต็มที่เหนือลวดลาย

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

ตั้งสีพื้นหลังเป็น transparent แล้วสีที่ปรากฏจะเป็นเพียงจุดเท่านั้น จากนั้นวางไฟล์ SVG ไว้เหนือสีหรือภาพใดก็ตามที่คุณต้องการแสดง

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

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

ให้แทนค่า fill="#hex" ในวงกลมด้วย fill="url(#gradient-id)" และเพิ่มคำนิยามของ <linearGradient> ไว้ภายใน <defs> เดียวกัน จากนั้นจุดแต่ละจุดจะแสดงผลด้วยเกรเดียนต์นั้น, ซึ่งอาจทำให้เกิดค่าใช้จ่ายสูงหากพื้นผิวการแสดงผลมีจุดหลายพันจุด

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

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

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

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

สร้างกระดาษบรรทัดห้าเส้น

สร้างกระดาษบรรทัดห้าเส้นสำหรับพิมพ์ ทั้งบรรทัดเปล่า กุญแจซอลหรือกุญแจฟา บรรทัดคู่สำหรับเปียโน หรือแท็บกีตาร์ เลือกจำนวน ระยะห่างเส้น A4 หรือ Letter และขอบกระดาษ แล้วดาวน์โหลด PDF หรือ SVG

เครื่องมือทำภาพโมเสกจากตัวต่อ LEGO

เปลี่ยนรูปถ่ายเป็นแบบโมเสกจัตุรัส 16, 32, 48 หรือ 64 ช่องต่อด้าน ดูสีโดยประมาณ นับแผ่นตัวต่อ 1×1 และดาวน์โหลดคู่มือประกอบที่มีหมายเลขกำกับ

เครื่องมือสร้างอวตาร

สร้างอวตารภาพประกอบแบบแบนในเบราว์เซอร์ของคุณ เลือกโทนสีผิว ผม ดวงตา ปาก เสื้อผ้า พื้นหลัง และชื่อที่แสดง แล้วดาวน์โหลดเป็น SVG หรือ PNG

ปรับขนาด PNG

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

เครื่องมือสร้างบัตรจับรางวัล

สร้างแผ่นบัตรสองส่วนแบบส่วนตัวที่มีหมายเลขเรียงลำดับสำหรับงานแบบไม่เป็นทางการ พิมพ์ทุกหน้า A4 หรือ US Letter หรือดาวน์โหลดหน้าปัจจุบันได้

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