Softonic

โปรแกรมสร้างเส้นทางสำหรับไฟล์ SVG

ขั้นตอน 1 / 2

คลิกพื้นที่ว่างเพื่อเพิ่มจุด ลากจุดเพื่อย้าย และลบจุดล่าสุดด้วยปุ่ม

ถัดไป

แอตทริบิวต์ d บนไฟล์ SVG <path> เป็นภาษาเฉพาะด้านขนาดเล็ก: M 10 10 L 100 10 C 120 10 120 60 100 60 Z โดยตัวอักษรแต่ละตัวคือคำสั่ง (moveto, lineto, cubic Bezier, close-path) และตัวเลขแต่ละตัวคือพิกัดหรือจุดควบคุม เครื่องมือสร้างนี้ให้คุณคลิกบนผืนผ้าใบเพื่อวางจุดยึดและลากเพื่อปรับรูปทรง พร้อมดูเส้นทางถูกวาดขึ้นแบบเรียลไทม์ เปิดการทำให้เรียบเพื่อเปลี่ยนส่วนเส้นตรงให้เป็นเส้นโค้งเบซิเยร์กำลังสาม ปิดรูปทรง แล้วคัดลอกแอตทริบิวต์ d ที่สร้างขึ้นหรือ SVG ทั้งหมด

วิธีการสร้างเส้นทาง

  1. 1

    คลิกเพื่อเพิ่มจุด

    ทุกครั้งที่คลิกจะเป็นการวางจุดยึดบนผืนผ้าใบ เส้นทางจะเชื่อมจุดเหล่านั้นตามลำดับ โดยเริ่มจาก `M` (moveto)

  2. 2

    ลากเพื่อปรับรูปทรง

    ลากจุดใดก็ได้เพื่อย้ายตำแหน่ง และลบจุดล่าสุดด้วยปุ่ม ต้องมีอย่างน้อยสองจุด

  3. 3

    เส้นตรงหรือเส้นเรียบ

    ปล่อยให้จุดเชื่อมกันด้วยส่วนเส้นตรง `L` หรือเปิด "ทำให้เรียบ" เพื่อแปลงเป็นเส้นโค้งเบซิเยร์กำลังสาม `C`

  4. 4

    ปิดหรือเปิดไว้

    เปิด "ปิดเส้นทาง" เพื่อเพิ่ม `Z` กลับไปยังจุดเริ่มต้น หรือปล่อยเปิดไว้สำหรับเส้นหลายเส้น (polyline) หรือเส้นเดี่ยว (stroke)

  5. 5

    คัดลอกแอตทริบิวต์ `d`

    สตริง `d` ที่สร้างขึ้นสะอาดและคั่นด้วยช่องว่าง พร้อมวางลงในไฟล์ SVG ใดๆ และคุณยังคัดลอกหรือดาวน์โหลด SVG ทั้งหมดได้ด้วย

ตารางสรุปคำสั่งเส้นทาง SVG

เครื่องมือสร้างแบบมองเห็นด้านบนจะสร้างคำสั่ง M, L, C และ Z (moveto, เส้นตรง, เบซิเยร์กำลังสาม และ close-path) ส่วนคำสั่งที่เหลือด้านล่างเป็นข้อมูลอ้างอิงสำหรับอ่านและแก้ไขสตริง d ที่คุณนำไปวางที่อื่นด้วยตนเอง ตัวพิมพ์ใหญ่ใช้พิกัดสัมบูรณ์ ส่วนตัวพิมพ์เล็กใช้ค่าเบี่ยงเบนสัมพัทธ์จากตำแหน่งของปากกาในปัจจุบัน

คำสั่ง ชื่อ รูปแบบการเขียน
M / m Moveto M x y
L / l Lineto L x y
H / h เส้นแนวนอน H x
V / v เส้นแนวตั้ง V y
C / c เบซิเยร์กำลังสาม C x1 y1 x2 y2 x y
S / s เบซิเยร์กำลังสามแบบเรียบ S x2 y2 x y
Q / q เบซิเยร์กำลังสอง Q x1 y1 x y
T / t เบซิเยร์กำลังสองแบบเรียบ T x y
A / a อาร์ก A rx ry x-axis-rot lg sweep x y
Z / z Closepath Z

ตัวอย่างการใช้งาน: เครื่องหมายถูกแบบมุมโค้ง

M 4 12 L 10 18 L 20 6

ใช้คำสั่งสามคำสั่ง ได้แก่ เคลื่อนไปยัง (4, 12), เลื่อนไปยัง (10, 18), และเลื่อนไปยัง (20, 6) จากนั้นเพิ่ม stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" ลงในเส้นทางการเคลื่อนที่ คุณจะได้กราฟิกเครื่องหมายตรวจสอบที่เรียบร้อย

คำสั่ง arc เป็นคำสั่งที่ซับซ้อนที่สุด

A rx ry x-axis-rotation large-arc-flag sweep-flag x y ใช้ตัวเลขทั้งหมดเจ็ดตัว:

  • rx, ry, รัศมีของวงรี
  • x-axis-rotation, การหมุนของรูปวงรีในหน่วยองศา
  • large-arc-flag, 0 สำหรับอาร์กสั้น, 1 สำหรับอาร์กลง
  • sweep-flag, 0 หมายถึงการหมุนในทิศทางตรงกันข้ามกับทิศนาฬิกา 1 หมายถึงการหมุนตามทิศนาฬิกา
  • x, y, จุดสิ้นสุด

พลิกธงแต่ละธงทีละธง เพื่อดูว่าจุดปลายสองจุดเดียวกันสามารถเชื่อมต่อกันได้ใน 4 วิธีที่แตกต่างกัน

คำแนะนำ

  • ควรใช้ค่าตัวเลขที่เล็กและเป็นจำนวนเต็ม โดยกำหนดพิกัดให้ตรงกับตาข่ายพิกเซลหรือครึ่งพิกเซล และหลีกเลี่ยงการใช้ค่าที่มีทศนิยมถึง 17 ตำแหน่ง
  • ควรใช้คำสั่งที่เขียนเป็นตัวพิมพ์ใหญ่เมื่อเส้นทางเป็นเส้นทางเดี่ยว ส่วนการใช้ตัวพิมพ์เล็ก (แบบสัมพัทธ์) จะเหมาะสมกว่าหากคุณต้องย้ายตำแหน่งเส้นทางในภายหลัง
  • ปิดเฉพาะเมื่อคุณกรอกข้อมูลเท่านั้น หากเส้นทางถูกวาดอย่างสมบูรณ์ Z จะไม่มีการเปลี่ยนแปลงทางภาพใดๆ และจะประหยัดพื้นที่หน่วยข้อมูลหนึ่งไบต์
  • ใช้งานกับ SVGO: ตัวศูนย์ที่อยู่หลังคำสั่ง ช่องว่างซ้ำ และคำสั่งที่ซ้ำกันจะถูกลบหรือปรับให้เป็นรูปแบบที่เหมาะสม

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

พิกัดใน d มีหน่วยวัดเหมือนกับขอบเขตภาพ (viewbox) เส้นทางที่ออกแบบสำหรับ viewBox="0 0 24 24" เมื่อนำไปวางบน viewBox="0 0 100 100" จะปรากฏอยู่ในมุมซ้ายบนของหน้าจอ คุณสามารถปรับขนาดพิกัดหรือเปลี่ยนขนาดของขอบเขตภาพได้

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

ใช่ รหัส <polyline points="0,0 10,10 20,0"> จะเปลี่ยนเป็น <path d="M 0 0 L 10 10 L 20 0" /> ส่วนรหัส Z จะถูกเพิ่มเข้าไปด้วย โดยโปรแกรมปรับแต่งส่วนใหญ่จะดำเนินการนี้โดยอัตโนมัติ เนื่องจากเส้นทางที่ได้มีความหนาแน่นและมีประสิทธิภาพในการบีบอัดข้อมูลมากกว่า

สำหรับเอฟเฟกต์การดึงเข้ามาใช้ CSS stroke-dasharray และ stroke-dashoffset ส่วนการเคลื่อนย้ายองค์ประกอบตามเส้นทางให้ใช้ SMIL <animateMotion> โดยที่ href ชี้ไปยังรหัสเส้นทาง

ไม่ คำสั่ง Path จะถูกคำนวณภายในเบราว์เซอร์ และจะไม่ถูกส่งไปยังที่ใดเลย

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

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

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