SVGator MCP

SVGator MCP Server — เอกสารประกอบ

MCP server เชื่อมต่อผู้ช่วย AI ของคุณเข้ากับ SVGator โดยตรง ซึ่งเป็นเครื่องมือสร้างแอนิเมชัน SVG ออนไลน์ จากนั้น ผู้ช่วยของคุณสามารถทำงานภายในโปรเจกต์ของคุณเพื่อ เรียกดู ตรวจสอบ แก้ไข สร้าง และส่งออก โปรเจกต์เหล่านั้นให้คุณ จัดการทุกอย่างตั้งแต่ "แก้ไขสีตามชุดแบรนด์นี้" ง่ายๆ ไปจนถึง "สร้างการเปิดเผยโลโก้แบบเคลื่อนไหวและส่งออกเป็นไฟล์ CSS-only" แบบสมบูรณ์

• Endpoint: https://mcp.svgator.com/mcp
• โปรโตคอล: Model Context Protocol ผ่าน Streamable HTTP
• การรับรองความถูกต้อง: OAuth 2.1 (ลงชื่อเข้าใช้ด้วยบัญชี SVGator ของคุณ — ดู การเริ่มต้นใช้งาน)

สิ่งที่คุณทำได้

ความสามารถ	เครื่องมือ	ตัวอย่างพร้อมท์
เรียกดูโปรเจกต์ของคุณ	list_projects, get_project, get_profile	"แสดงรายการโปรเจกต์ SVGator ของฉัน"
ตรวจสอบโครงสร้างของโปรเจกต์	get_skeleton, read_part	"มีองค์ประกอบอะไรบ้างในโปรเจกต์ X และองค์ประกอบใดมีแอนิเมชัน"
แก้ไขโปรเจกต์ทีละส่วน	edit_part	"ทำให้วงกลมเป็นสีแดงและวนการเด้งตลอดไป"
สร้างหรือแทนที่โปรเจกต์ทั้งหมด	create_project, replace_project	"สร้างสปินเนอร์โหลดแบบเคลื่อนไหวใหม่ให้ฉัน"
ทำซ้ำ ย้าย และเปลี่ยนชื่อโปรเจกต์	duplicate_project, move_project	"คัดลอกโปรเจกต์ X ไปยังโฟลเดอร์ 'Drafts' ของฉัน"
จัดการทรัพยากรที่ใช้ซ้ำได้	list_assets, get_asset, create_asset, update_asset	"บันทึกไอคอนนี้เป็นทรัพยากรที่ใช้ซ้ำได้"
จัดระเบียบโปรเจกต์ลงในโฟลเดอร์	list_folders, get_folder, create_folder, update_folder	"สร้างโฟลเดอร์ 'Marketing' และจัดเก็บโปรเจกต์นี้ไว้ข้างใต้"
ค้นหาข้อมูลอ้างอิงการสร้าง	describe_shape	(ผู้ช่วยใช้เพื่อรับรูปร่าง JSON ที่แน่นอน)
ส่งออกเป็นรูปแบบที่ส่งมอบได้	export_project, get_render	"ส่งออกโปรเจกต์ X เป็นวิดีโอ MP4"
รับคำแนะนำด้านงานออกแบบโมชัน	ทรัพยากรสกิล + พร้อมท์	"กำกับศิลป์การเปิดเผยโลโก้ จากนั้นสร้างมันขึ้นมา"

ทุกโปรเจกต์ที่เซิร์ฟเวอร์ส่งคืนจะมี editor_url — ลิงก์ deep link ที่เปิดโปรเจกต์ใน ตัวแก้ไข SVGator เพื่อให้คุณสามารถทำงานต่อด้วยตนเองจากจุดที่ผู้ช่วยทำค้างไว้ได้เสมอ

เครื่องมือ

เซิร์ฟเวอร์มีเครื่องมือ 22 รายการ ดู ข้อมูลอ้างอิงเครื่องมือ สำหรับตารางพารามิเตอร์และผลลัพธ์แบบเต็ม

โปรเจกต์

• list_projects — แสดงรายการโปรเจกต์ SVGator ของผู้ใช้ที่รับรองความถูกต้องแล้ว (ใหม่สุดก่อน) พร้อมลิงก์ deep link editor_url ต่อแถวและจำนวนรวมสำหรับการแบ่งหน้า
• get_project — รับสรุปโปรเจกต์เดียว: ชื่อเรื่อง ตัวอย่าง โฟลเดอร์ การประทับเวลา ขนาดผืนผ้าใบ สีพื้นหลัง ไทม์ไลน์แอนิเมชัน และการตั้งค่าการส่งออกที่บันทึกไว้
• create_project — สร้างโปรเจกต์ SVGator ใหม่จาก JSON โปรเจกต์แบบเต็ม ซึ่งเป็นของผู้ใช้ที่รับรองความถูกต้องแล้ว
• replace_project — แทนที่ JSON ทั้งหมดของโปรเจกต์ที่มีอยู่ด้วยโปรเจกต์แบบเต็มที่ให้มา (การตรวจสอบความถูกต้องจะทำงานก่อนการเปลี่ยนแปลงใดๆ)
• duplicate_project — ทำสำเนาของโปรเจกต์ที่มีอยู่ โดยสามารถเลือกใส่ในโฟลเดอร์อื่นหรือภายใต้ชื่อเรื่องใหม่ได้
• move_project — ย้ายโปรเจกต์ไปยังโฟลเดอร์อื่น และ/หรือ เปลี่ยนชื่อ

การตรวจสอบและแก้ไขโปรเจกต์

• get_skeleton — รับแผนผังโครงสร้างของโปรเจกต์ที่ประหยัดโทเค็น (เฉพาะแผนผังองค์ประกอบพร้อมชื่อและจำนวนคีย์เฟรม ไม่มีค่าใดๆ) — ขั้นตอนที่ 1 ของวงจรการแก้ไข
• read_part — อ่านค่าหรือองค์ประกอบที่แน่นอน ณ พาธที่ยึดด้วย id — ขั้นตอนที่ 2 ของวงจรการแก้ไข
• edit_part — ใช้การแก้ไขที่ตรวจสอบแล้วหนึ่งรายการ (อัปเดต แทรก ย้าย หรือลบ) ที่พาธและบันทึก — ขั้นตอนที่ 3 ของวงจรการแก้ไข
• describe_shape — รับรูปร่าง JSON ที่แน่นอนของบล็อกส่วนประกอบหนึ่งชิ้น (องค์ประกอบหรือแอนิเมเตอร์) ก่อนการสร้าง เพื่อไม่ต้องเดาชื่อฟิลด์

ทรัพยากร

• list_assets — แสดงรายการทรัพยากรที่ใช้ซ้ำได้ของผู้ใช้ที่รับรองความถูกต้องแล้ว (รายการ SVG แบบคงที่หรือเคลื่อนไหว) ใหม่สุดก่อน
• get_asset — รับทรัพยากรเดียวรวมถึงเพย์โหลด data ({document, definitions}) แบบเต็ม
• create_asset — สร้างทรัพยากรที่ใช้ซ้ำได้ใหม่จากเอกสารทรัพยากร
• update_asset — แทนที่เอกสารทั้งหมดของทรัพยากรที่มีอยู่

โฟลเดอร์

• list_folders — แสดงรายการโฟลเดอร์ของผู้ใช้ที่รับรองความถูกต้องแล้ว (ป้ายกำกับที่จัดเก็บโปรเจกต์)
• get_folder — รับโฟลเดอร์เดียว (id, ชื่อเรื่อง, การประทับเวลา) ด้วย id ของมัน
• create_folder — สร้างโฟลเดอร์ใหม่เพื่อจัดระเบียบโปรเจกต์
• update_folder — เปลี่ยนชื่อโฟลเดอร์ที่มีอยู่

การส่งออกและบัญชี

• export_project — ส่งออกโปรเจกต์เป็นรูปแบบที่ส่งมอบได้ (SVG, Lottie, React Native, Flutter, วิดีโอ หรือ GIF) พร้อมการแทนที่ต่อการส่งออกที่เป็นทางเลือก
• get_render — โพลสถานะของการเรนเดอร์แรสเตอร์ (วิดีโอ/GIF) ที่เริ่มโดย export_project และรับ URL ดาวน์โหลดที่ลงนามเมื่อเสร็จสิ้น
• get_profile — รับโปรไฟล์ลูกค้าที่รับรองความถูกต้องแล้ว: ชื่อ อีเมล แผน และทีม

แผนผังเอกสาร

เอกสาร	สำหรับ	ครอบคลุม
การเริ่มต้นใช้งาน	ทุกคน	การเชื่อมต่อจาก claude.ai, Claude Desktop, Claude Code และไคลเอนต์ MCP อื่นๆ; การรับรองความถูกต้อง; ความเป็นส่วนตัว
ข้อมูลอ้างอิงเครื่องมือ	ผู้ผสานรวม / ผู้ที่สนใจ	ทุกเครื่องมือพร้อมตารางพารามิเตอร์และผลลัพธ์แบบเต็ม
การแก้ไขโปรเจกต์	ผู้ผสานรวม / ผู้ใช้ระดับสูง	วงจร navigate → read → edit → verify, การระบุที่อยู่พาธ, กฎการสร้าง
การส่งออกโปรเจกต์	ทุกคน	รูปแบบ, โหมดการจัดส่ง, ตัวเลือกการส่งออก, การโพลการเรนเดอร์
สกิลและทรัพยากร	ผู้ผสานรวม	สกิลด้านงานออกแบบโมชัน, ทรัพยากร MCP และพร้อมท์
การแก้ไขปัญหา	ทุกคน	ปัญหาการเชื่อมต่อ, ข้อผิดพลาดทั่วไป และความหมาย

ข้อกำหนด

• บัญชี SVGator (ลงทะเบียน) การส่งออกจะนับรวมกับขีดจำกัดของแผนของคุณ เช่นเดียวกับในตัวแก้ไข
• ในการเชื่อมต่อจาก claude.ai / Claude Desktop ตัวเชื่อมต่อแบบกำหนดเองต้องใช้แผน Claude Pro, Max, Team หรือ Enterprise Claude Code และไคลเอนต์ MCP อื่นๆ เชื่อมต่อโดยตรงกับ endpoint

วิธีการทำงาน (หนึ่งย่อหน้า)

เซิร์ฟเวอร์เป็นเซิร์ฟเวอร์ MCP ระยะไกล: ไคลเอนต์ MCP ของคุณ (Claude หรือไคลเอนต์ใดๆ ที่ใช้ Streamable HTTP) เชื่อมต่อกับ https://mcp.svgator.com/mcp และลงชื่อเข้าใช้คุณผ่านการเข้าสู่ระบบ OAuth ปกติของ SVGator ข้อมูลประจำตัว SVGator ของคุณจะอยู่ ฝั่งเซิร์ฟเวอร์เท่านั้น — โมเดล AI ไม่เคยเห็นโทเค็นการเข้าถึง หรือคีย์ลับของคุณ; จะได้รับเฉพาะผลลัพธ์ของเครื่องมือ (รายการโปรเจกต์, แผนผังโครงสร้าง, ไฟล์ที่ส่งออก) อินพุตของเครื่องมือจะถูกตรวจสอบกับสคีมาที่เผยแพร่ และคำขอที่ไม่ถูกต้องจะส่งคืน ข้อผิดพลาดเชิงพรรณนาที่ผู้ช่วยสามารถอ่านและแก้ไขได้

⚙️ ความสามารถ

MCP server เปลี่ยน SVGator ให้เป็นสิ่งที่คุณสามารถขับเคลื่อนด้วยภาษาธรรมดา แทนที่จะ คลิกผ่านตัวแก้ไข คุณอธิบายสิ่งที่คุณต้องการและผู้ช่วย AI ของคุณจะทำ: ดึง โปรเจกต์ขึ้นมา เปลี่ยนสี ทำให้โลโก้เคลื่อนไหว หรือส่งออกไฟล์ที่เสร็จแล้ว

มันถูกสร้างขึ้นสำหรับนักออกแบบที่ต้องการผู้ช่วยจัดการส่วนที่ซ้ำซากของการสร้างแอนิเมชัน สำหรับ ทีมการตลาดที่ต้องการแอนิเมชันที่พร้อมใช้งานบนเว็บโดยไม่ต้องรอนักออกแบบสำหรับทุกการเปลี่ยนแปลงเล็กน้อย และสำหรับนักพัฒนาที่ต้องการการส่งออกที่พร้อมใช้งานจริง (Lottie, React Native, Flutter หรือ SVG) ที่สามารถนำไปใช้ในผลิตภัณฑ์ได้ทันที ทุกโปรเจกต์มาพร้อมกับลิงก์ตัวแก้ไขโดยตรง คุณจึง สามารถเปิดและทำงานต่อด้วยตนเองได้เสมอ ประหยัดโทเค็น

นี่คือสิ่งที่ผู้ช่วยของคุณสามารถทำได้เมื่อเชื่อมต่อแล้ว:

🗂️ โปรเจกต์และทรัพยากร

• แสดงรายการโปรเจกต์: ใหม่สุดก่อน แต่ละรายการมีลิงก์ตัวแก้ไขโดยตรง
• ค้นหาและแบ่งหน้าผ่านไลบรารีขนาดใหญ่
• อ่านการตั้งค่าโปรเจกต์: ขนาดผืนผ้าใบ, พื้นหลัง, ไทม์ไลน์ และการตั้งค่าการส่งออก
• สร้างโปรเจกต์จากคำจำกัดความแบบเต็ม
• เขียนทับโปรเจกต์ที่มีอยู่
• ทำซ้ำโปรเจกต์: ไปยังโฟลเดอร์เดียวกันหรือโฟลเดอร์อื่น
• ย้ายหรือเปลี่ยนชื่อโปรเจกต์
• จัดระเบียบโปรเจกต์ลงในโฟลเดอร์
• จัดการทรัพยากรที่ใช้ซ้ำได้: แสดงรายการ, อ่าน, สร้าง และอัปเดต

🔍 โครงสร้างและการตรวจสอบ

• แมปโครงสร้างของโปรเจกต์: แผนผังองค์ประกอบพร้อมจำนวนคีย์เฟรม ไม่มีข้อมูลหนัก
• ดูว่าอะไรมีแอนิเมชัน: ช่องใดมีคีย์เฟรมในแต่ละองค์ประกอบ
• อ่านค่าที่แน่นอน: คุณสมบัติ, คีย์เฟรม หรือองค์ประกอบใดๆ
• ค้นหารูปร่างการสร้าง: JSON ที่แน่นอนสำหรับองค์ประกอบหรือแนวคิดใดๆ

🔷 รูปร่างและองค์ประกอบ

• สี่เหลี่ยมผืนผ้า
• วงกลมและวงรี
• เส้น, เส้นหลายเส้น และรูปหลายเหลี่ยม
• พาธแบบกำหนดเอง
• ข้อความและข้อความหลายบรรทัด
• รูปภาพ
• สัญลักษณ์และอินสแตนซ์ที่ใช้ซ้ำ
• กลุ่ม
• มาสก์และ clip paths

🎨 การเติมสี, เส้นขีด และสี

• การเติมสีทึบ: แบบคงที่หรือเคลื่อนไหว
• การเติมแบบไล่ระดับสี
• เส้นขีด: ทึบหรือไล่ระดับสี, แบบคงที่หรือเคลื่อนไหว
• การผสมผสาน: โหมดการผสมและความทึบ
• เอฟเฟกต์ฟิลเตอร์ เช่น เบลอ

🎞️ แอนิเมชันและคีย์เฟรม

• เพิ่มคีย์เฟรม ณ เวลาเฉพาะ พร้อมค่า
• ตั้งค่าคงที่เมื่อไม่ต้องการการเคลื่อนไหว
• อ่าน, ตรวจสอบ และลบคีย์เฟรม
• ตั้งค่าการผ่อนแรงต่อคีย์เฟรม: cubic bezier
• ทำให้การแปลงเคลื่อนไหว: ตำแหน่ง, การหมุน, มาตราส่วน และการเอียง
• ทำให้ช่องการเติมสี, เส้นขีด, การผสมผสาน และฟิลเตอร์เคลื่อนไหว
• morph รูปร่างหนึ่งไปเป็นอีกรูปร่างหนึ่ง

📤 การส่งออกและการจัดส่ง

• ส่งออก SVG แบบเคลื่อนไหว: ขับเคลื่อนด้วย JavaScript หรือ CSS
• ตั้งค่าทริกเกอร์เริ่มต้น: โหลด, โฮเวอร์, คลิก, สโครล หรือแบบโปรแกรม
• ตั้งค่าพฤติกรรมการคลิกและโฮเวอร์: หยุด, เริ่มใหม่, ย้อนกลับ หรือรีเซ็ต
• ส่งออกเป็น Lottie
• ส่งออกเป็นซอร์ส React Native หรือ Flutter
• เรนเดอร์วิดีโอ: MP4, MOV, AVI, MKV หรือ WebM
• เรนเดอร์ GIF, WebP, ลำดับ PNG หรือ ZIP
• ควบคุมการวนซ้ำ: จำนวนรอบ, ทิศทาง, ping-pong และความเร็ว
• ตั้งค่าอัตราเฟรม, ความละเอียด และคุณภาพ
• จัดการความโปร่งใสและสีพื้นหลัง

✅ แนวทางปฏิบัติที่ดีที่สุด

ติดตั้งสกิลการออกแบบโมชัน SVGator จากนั้นเรียกใช้ตามชื่อ: มันเป็นคำแนะนำด้านงานฝีมือที่ช่วยให้ผู้ช่วยของคุณตัดสินใจอย่างรอบคอบเกี่ยวกับจังหวะเวลา, การผ่อนแรง และบุคลิกภาพ แทนที่จะเป็นการเคลื่อนไหวแบบเรียบๆ ทั่วไป ดาวน์โหลดจาก ที่เก็บสกิล SVGator จากนั้นทริกเกอร์ในพร้อมท์ของคุณโดยเริ่มด้วยบางอย่างเช่น "ใช้สกิลโมชัน SVGator เพื่อทำให้โลโก้นี้เคลื่อนไหว" คุณเรียกใช้ด้วยตนเองอย่างตั้งใจ: ด้วยวิธีนี้สกิลจะไม่ใช้โทเค็นของคุณเมื่อคุณเพียงแค่ส่งออกหรือทำการแก้ไขเล็กน้อย และโหลดเฉพาะเมื่อคุณต้องการการกำกับศิลป์เพิ่มเติมจริงๆ

เริ่มจากงานศิลป์ของคุณเอง จากนั้นทำให้เคลื่อนไหว: การสร้างรูปร่างต้นฉบับจากศูนย์เป็นสิ่งที่ทำได้ยากที่สุดในผู้ช่วย AI ใดๆ เพื่อผลลัพธ์ที่ดีที่สุด ให้สร้างหรือนำเข้า SVG ของคุณในตัวแก้ไขของ SVGator ก่อน จากนั้นขอให้ผู้ช่วยของคุณทำให้มันเคลื่อนไหว นั่นจะทำให้สไตล์ภาพของคุณสอดคล้องกันและให้ AI มุ่งเน้นไปที่สิ่งที่มันทำได้ดี: การเคลื่อนไหว, จังหวะเวลา และการจัดลำดับ

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

แบ่งแอนิเมชันที่ซับซ้อนเป็นขั้นตอน: แทนที่จะ "สร้างแอนิเมชัน onboarding แบบเต็มให้ฉัน" ให้ทำทีละส่วน: สร้างองค์ประกอบ, เพิ่มคีย์เฟรม, จากนั้นปรับแต่งจังหวะเวลา เซิร์ฟเวอร์ใช้การเปลี่ยนแปลงที่ตรวจสอบแล้วหนึ่งรายการต่อการแก้ไข ดังนั้นขั้นตอนที่เล็กลงจะให้การควบคุมคุณมากขึ้นและทำให้ข้อผิดพลาดใดๆ จับและแก้ไขได้ง่าย

ระบุเจาะจงเกี่ยวกับจังหวะเวลาและความรู้สึก: "การเฟดที่นุ่มนวล" ค่อนข้างคลุมเครือ "การเฟดเข้า 400ms พร้อม ease-out" ให้สิ่งที่เป็นรูปธรรมแก่ผู้ช่วยของคุณในการทำงาน ยิ่งคุณอธิบายความรู้สึกมากเท่าไหร่ ไม่ว่าจะฉับไว, เด้ง, ช้า หรือละเอียดอ่อน ผลลัพธ์แรกก็จะยิ่งใกล้เคียงกับสิ่งที่คุณคิดไว้มากขึ้นเท่านั้น

จับคู่รูปแบบการส่งออกกับที่ที่มันจะอยู่: SVG เป็นตัวเลือกที่เหมาะสมสำหรับเว็บ โดยคุณสามารถเลือก JavaScript หรือ CSS-only (เพื่อประสิทธิภาพที่ดียิ่งขึ้น) Lottie, React Native และ Flutter ส่งต่อไปยังโปรเจกต์แอปและมือถือได้อย่างสะอาด วิดีโอและ GIF พร้อมสำหรับโซเชียลและอีเมล ซึ่ง SVG แบบเคลื่อนไหวจะไม่เล่น การเลือกรูปแบบล่วงหน้าช่วยประหยัดการส่งออกซ้ำหนึ่งรอบ

ทำซ้ำโปรเจกต์ก่อนการทดลองใหญ่ๆ: หากคุณต้องการให้ AI สร้างบางสิ่งใหม่ทั้งหมด ขอให้มันทำซ้ำโปรเจกต์ก่อน จากนั้นทำการเปลี่ยนแปลงบนสำเนา ต้นฉบับจะคงอยู่เหมือนเดิมทุกประการ ดังนั้นการทดลองที่กล้าหาญจะไม่ทำให้คุณเสียเวอร์ชันที่ใช้งานได้

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