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 เพียงแตะครั้งเดียว

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

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

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

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

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

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

ปรับขนาด PNG

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

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

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

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