Softonic

เครื่องกำเนิดรูปแบบลาย SVG stripe

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

ลวดลายแถบเรียบเป็นหนึ่งในวิธีที่น่าเชื่อถือที่สุดในการเติมเนื้อหาให้กับส่วนฮีโร่ ช่องแบ่ง หรือการ์ดว่าง โดยไม่ต้องพึ่งพาภาพสำรอง เครื่องสร้างไฟล์นี้จะสร้างไฟล์ SVG ที่มีคุณภาพสูงตามมาตรฐาน <pattern> พร้อมสองสี ความกว้างของแถบที่สามารถปรับได้ และมุมหมุน ทำให้ไฟล์เดียวกันสามารถปรับขนาดได้อย่างแม่นยำ ไม่ว่าจะใช้สำหรับฮีโร่บนมือถือขนาด 320 พิกเซล หรือป้ายโฆษณาบนเดสก์ท็อปความละเอียด 4K

วิธีสร้างลวดลายแถบ SVG

  1. 1

    ตั้งขนาดของเซนเนล

    กรุณาป้อนความกว้างและความสูงที่ต้องการ, SVG ใช้ viewBox ดังนั้นภาพจะยังคงปรับขนาดได้บนหน้าจอ

  2. 2

    กำหนดความกว้างของแถบ

    ค่าที่เล็กจะให้ลวดลายแถบแน่น ส่วนค่าที่ใหญ่จะให้แถบที่มีลักษณะคล้ายร่มเงา

  3. 3

    เลือกมุม

    ใช้ค่า 0 สำหรับแนวราบ ค่า 90 สำหรับแนวตั้ง และค่า 45 สำหรับแนวทแยงแบบคลาสสิก

  4. 4

    เลือกสองสี

    ตั้งค่าค่าเฮกซาเดซิมของส่วนหน้าและส่วนหลัง, แถบโปร่งใสก็ใช้ได้เช่นกัน

  5. 5

    คัดลอกไฟล์ SVG

    วางไว้ในรูปแบบอินไลน์ บันทึกเป็นไฟล์.svg หรือใส่ลงในพื้นหลัง CSS โดยใช้เครื่องมือแปลง SVG เป็น CSS

วิธีการสร้างรูปแบบนี้

SVG จะกำหนดรูปแบบเล็กๆ ของ <pattern> ซึ่งมีขนาดเท่ากับแถบสองแถบ จากนั้นจึงใช้ fill="url(#stripes)" เพื่อเติมเต็มพื้นที่ภาพ (viewbox) ทั้งหมดด้วย <rect> เนื่องจากลวดลายจะถูกซ้ำโดยอัตโนมัติ การเปลี่ยนขนาดของหน้าจอจึงไม่ส่งผลต่อความหนาของแถบ แต่จะเปลี่ยนเพียงจำนวนแถบที่สามารถแสดงได้เท่านั้น

patternTransform="rotate(angle)" เป็นส่วนประกอบที่ช่วยสร้างลวดลายแนวทแยงโดยไม่จำเป็นต้องคำนวณรูปทรงใหม่ ลวดลายนี้ยังสามารถจัดเรียงได้อย่างสมบูรณ์แบบในทุกมุม

*** คู่มือสรุปความกว้างของแถบสไตรป์ ***

ความกว้างแถบสตริป รูปลักษณ์ การใช้งานทั่วไป
2–6 พิกเซล ลายเส้นจัดแน่นละเอียด ใช้สำหรับพื้นหลังรูปทรงและให้ความรู้สึกของเนื้อผิวที่ละเอียดอ่อน
10–20 พิกเซล มุมทแยงสมดุล ส่วนฮีโร่ บัตร และเส้นแบ่ง
30–60 พิกเซล หลังคาแบบตีบด้วยตัวหนา แบนเนอร์บนหน้าลงจอด และภาพประกอบสถานะว่าง
80 พิกเซลขึ้นไป บล็อกขนาดโปสเตอร์ เซตหัวข้อที่ต้องอ่านจากระยะไกล

คำแนะนำ

  • ควรลดระดับความต่างของสีให้น้อยที่สุด (เช่น #f5f5f5 เทียบกับ #ffffff) เมื่อลวดลายอยู่ด้านหลังข้อความ มุม 15, 30 และ 45 องศาให้ความรู้สึกว่าได้รับการออกแบบมาอย่างเป็นระบบมากกว่ามุม 0 หรือ 90 องศาที่ตรงไปตรงมา เพื่อให้แถบมีการเคลื่อนไหว ให้ห่อชิ้นส่วน <rect> ไว้ภายในชิ้นส่วน <g> แล้วเลื่อนด้วยโหมดลูป เนื่องจากใช้ลวดลายแบบแผ่นซ้อนกัน จึงสามารถเลื่อนหน้าจอได้ไม่สิ้นสุดโดยไม่ต้องเสียค่าใช้จ่าย ผลลัพธ์เป็นไฟล์ SVG แบบบริสุทธิ์ โดยไม่มีการอ้างอิงจากแหล่งภายนอก จึงสามารถนำไปใช้โดยตรงใน HTML หรือแม่แบบอีเมลที่มีการลบแท็ก <script> ออกไปได้อย่างปลอดภัย

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

ใช่ ให้บันทึกผลลัพธ์เป็นไฟล์.svg และระบุรหัสอ้างอิงว่า background-image: url(...) หรือ background-repeat: repeat หรือจะนำไฟล์ไปแปลงด้วยเครื่องมือ SVG to CSS เพื่อรับ URL ของข้อมูลแบบฝัง (inline data URL) ก็ได้เช่นกัน

เบราว์เซอร์จะทำการปรับลดปรากฏการณ์แอนตี้อาลีเอส (anti-aliasing) ให้กับเส้นทแยงมุม หากคุณเห็นขอบเส้นที่ไม่สม่ำเสมอ ให้เพิ่มความกว้างของแถบเส้นลง 1–2 พิกเซล หรือแปลงภาพเป็นไฟล์ PNG ที่มีขนาดใหญ่ขึ้นแล้วลดขนาดลง

ตัวเลือกสีให้สีทึบเท่านั้น ดังนั้นหากต้องการให้แถบหนึ่งโปร่งใส ให้แก้ไขไฟล์ SVG ที่ได้ โดยตั้งค่า fill หนึ่งค่าเป็น none หรือเป็นรหัสเฮกซาเดซิมอล 8 หลักที่มีค่าอัลฟา เช่น #00000000 จากนั้นสิ่งที่อยู่ด้านหลังไฟล์ SVG จะปรากฏทะลุออกมา

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

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

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

ตัวเลือกสี 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 ที่ใกล้เคียงที่สุด เพื่อให้สอดคล้องกันระหว่างการแสดงผลบนหน้าจอและการพิมพ์ โดยพร้อมดูตัวอย่างสีแบบสวัตช์

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