SVGator MCP

resmi

Yapay zeka asistanınızdan SVGator animasyonları (SVG, Lottie, GIF, video) oluşturun, düzenleyin ve dışa aktarın; ayrıca düzenleyicide istediğiniz zaman açabileceğiniz düzenlenebilir bir proje saklayın.

SVGator MCP ile neler yapabilirsiniz?

  • SVGator projelerinize göz atın ve arayınlist_projects projeleri en yeniden eskiye, düzenleyici derin bağlantılarıyla döndürür; get_project ise tuval boyutunu, zaman çizelgesini ve dışa aktarma ayarlarını alır.
  • Bir projenin yapısını ağır veri olmadan inceleyinget_skeleton yalnızca anahtar kare sayılarıyla bir öğe ağacı döndürür; read_part belirli bir yoldaki tam değerleri okur.
  • Projeleri kademeli olarak düzenleyinedit_part bir yolda doğrulanmış tek bir güncelleme, ekleme, taşıma veya silme işlemi uygular ve kalıcı hale getirir.
  • Projelerin tamamını oluşturun, çoğaltın, taşıyın veya değiştirincreate_project, replace_project, duplicate_project ve move_project tam proje işlemlerini yönetir.
  • Yeniden kullanılabilir varlıkları ve klasörleri yönetinlist_assets, create_asset, update_asset, list_folders, create_folder ve update_folder kitaplığınızı düzenler.
  • Teslim edilebilir formatlara dışa aktarınexport_project animasyonlu SVG, Lottie, React Native, Flutter, video veya GIF çıktısı verir; get_render raster indirmeleri yoklar.

Dokümantasyon

SVGator MCP Sunucusu — Dokümantasyon

MCP sunucusu, yapay zeka asistanınızı doğrudan çevrimiçi SVG animasyon aracı olan SVGator ile bağlar. Buradan asistanınız, projelerinizin içinde çalışarak sizin için göz atabilir, inceleyebilir, düzenleyebilir, oluşturabilir ve dışa aktarabilir; basit bir “renkleri bu marka kitine göre düzenle”den, eksiksiz bir “bana animasyonlu bir logo açılışı yap ve yalnızca CSS dosyası olarak dışa aktar”a kadar her şeyi yönetir.

  • Uç Nokta: https://mcp.svgator.com/mcp
  • Protokol: Akışkan HTTP üzerinden Model Bağlam Protokolü
  • Kimlik Doğrulama: OAuth 2.1 (SVGator hesabınızla oturum açın — bkz. Başlarken)

Yapabilecekleriniz

YetenekAraçlarÖrnek komut
Projelerinize göz atmalist_projects, get_project, get_profile"SVGator projelerimi listele"
Bir projenin yapısını incelemeget_skeleton, read_part"X projesinde hangi öğeler var ve hangileri animasyonlu?"
Bir projeyi adım adım düzenlemeedit_part"Daireyi kırmızı yap ve zıplamasını sonsuza kadar döngüye al"
Tüm projeleri oluşturma veya değiştirmecreate_project, replace_project"Bana yeni bir animasyonlu yükleme döndürücüsü yap"
Projeleri çoğaltma, taşıma ve yeniden adlandırmaduplicate_project, move_project"X projesini 'Taslaklar' klasörüme kopyala"
Yeniden kullanılabilir varlıkları yönetmelist_assets, get_asset, create_asset, update_asset"Bu simgeyi yeniden kullanılabilir bir varlık olarak kaydet"
Projeleri klasörlere düzenlemelist_folders, get_folder, create_folder, update_folder"Bir 'Pazarlama' klasörü oluştur ve bu projeyi onun altına dosyala"
Yazım referansına bakmadescribe_shape(asistan tarafından tam JSON şekillerini almak için kullanılır)
Teslim edilebilir formatlara dışa aktarmaexport_project, get_render"X projesini MP4 video olarak dışa aktar"
Hareket tasarımı zanaat rehberliği almabeceri kaynakları + komut"Bir logo açılışını sanatsal olarak yönet, sonra inşa et"

Sunucunun döndürdüğü her proje bir editor_url içerir — projeyi SVGator düzenleyicisinde açan bir derin bağlantı, böylece asistanın kaldığı yerden her zaman elle devam edebilirsiniz.

Araçlar

Sunucu 22 araç sunar. Tam parametre ve çıktı tabloları için Araçlar referansına bakın.

Projeler

  • list_projects — Kimliği doğrulanmış kullanıcının SVGator projelerini (en yeni önce) listeleyin, satır başına bir editor_url derin bağlantısı ve sayfalama için toplam sayı ile birlikte.
  • get_project — Tek bir proje özeti alın: başlık, önizleme, klasör, zaman damgaları, tuval boyutu, arka plan rengi, animasyon zaman çizelgesi ve kaydedilmiş dışa aktarma ayarları.
  • create_project — Tam bir proje JSON'undan, kimliği doğrulanmış kullanıcıya ait yeni bir SVGator projesi oluşturun.
  • replace_project — Mevcut bir projenin tüm JSON'unu sağlanan tam bir proje ile değiştirin (doğrulama herhangi bir değişiklikten önce çalışır).
  • duplicate_project — Mevcut bir projenin bir kopyasını, isteğe bağlı olarak farklı bir klasöre veya yeni bir başlık altında oluşturun.
  • move_project — Bir projeyi farklı bir klasöre taşıyın ve/veya yeniden adlandırın.

Bir projeyi inceleme ve düzenleme

  • get_skeleton — Bir projenin ucuz, token açısından hafif bir yapı haritasını alın (yalnızca adları ve ana kare sayılarını içeren öğe ağacı, asla değerler) — düzenleme döngüsünün 1. adımı.
  • read_part — Bir kimlikle sabitlenmiş yoldaki tam değeri veya öğeyi okuyun — düzenleme döngüsünün 2. adımı.
  • edit_part — Bir yolda doğrulanmış bir düzenlemeyi (güncelleme, ekleme, taşıma veya silme) uygulayın ve kalıcı hale getirin — düzenleme döngüsünün 3. adımı.
  • describe_shape — Yazmadan önce bir yapı taşının (öğe veya animatör) tam JSON şeklini alın, böylece alan adları asla tahmin edilmez.

Varlıklar

  • list_assets — Kimliği doğrulanmış kullanıcının yeniden kullanılabilir varlıklarını (statik veya animasyonlu SVG öğeleri) en yeni önce olacak şekilde listeleyin.
  • get_asset — Tam data ({document, definitions}) yükü dahil olmak üzere tek bir varlığı alın.
  • create_asset — Bir varlık belgesinden yeni bir yeniden kullanılabilir varlık oluşturun.
  • update_asset — Mevcut bir varlığın tüm belgesini değiştirin.

Klasörler

  • list_folders — Kimliği doğrulanmış kullanıcının klasörlerini (projelerin altında dosyalandığı etiketler) listeleyin.
  • get_folder — Kimliğine göre tek bir klasörü (kimlik, başlık, zaman damgaları) alın.
  • create_folder — Projeleri düzenlemek için yeni bir klasör oluşturun.
  • update_folder — Mevcut bir klasörü yeniden adlandırın.

Dışa aktarma ve hesap

  • export_project — Bir projeyi teslim edilebilir bir formata (SVG, Lottie, React Native, Flutter, video veya GIF) isteğe bağlı dışa aktarma başına geçersiz kılmalarla dışa aktarın.
  • get_renderexport_project tarafından başlatılan bir raster (video/GIF) işlemenin durumunu yoklayın ve bittiğinde imzalı indirme URL'sini alın.
  • get_profile — Kimliği doğrulanmış müşteri profilini alın: ad, e-posta, plan ve ekipler.

Dokümantasyon haritası

BelgeKimler içinKapsamı
BaşlarkenHerkesclaude.ai, Claude Desktop, Claude Code ve diğer MCP istemcilerinden bağlanma; kimlik doğrulama; gizlilik
Araçlar referansıEntegratörler / meraklılarTam parametre ve çıktı tablolarıyla her araç
Projeleri düzenlemeEntegratörler / ileri düzey kullanıcılarGezin → oku → düzenle → doğrula döngüsü, yol adresleme, yazım kuralları
Projeleri dışa aktarmaHerkesFormatlar, teslim modları, dışa aktarma seçenekleri, işleme yoklaması
Beceri ve kaynaklarEntegratörlerHareket tasarımı zanaat becerisi, MCP kaynakları ve komut
Sorun gidermeHerkesBağlantı sorunları, yaygın hatalar ve anlamları

Gereksinimler

  • Bir SVGator hesabı (kaydol). Dışa aktarmalar, tıpkı düzenleyicide olduğu gibi planınızın limitlerine sayılır.
  • claude.ai / Claude Desktop'tan bağlanmak için özel bağlayıcılar bir Claude Pro, Max, Team veya Enterprise planı gerektirir. Claude Code ve diğer MCP istemcileri doğrudan uç noktaya bağlanır.

Nasıl çalışır (tek paragraf)

Sunucu uzak bir MCP sunucusudur: MCP istemciniz (Claude veya Akışkan HTTP konuşan herhangi bir istemci) https://mcp.svgator.com/mcp adresine bağlanır ve SVGator'ın normal OAuth girişi aracılığıyla oturumunuzu açar. SVGator kimlik bilgileriniz yalnızca sunucu tarafında kalır — yapay zeka modeli erişim jetonunuzu veya gizli anahtarınızı asla görmez; yalnızca araç sonuçlarını (proje listeleri, yapı haritaları, dışa aktarılan dosyalar) alır. Araç girdileri yayınlanmış şemalara göre doğrulanır ve geçersiz istekler, asistanın okuyup düzeltebileceği açıklayıcı hatalar döndürür.

⚙️ Yetenekler

MCP sunucusu, SVGator'ı düz bir dille yönetebileceğiniz bir şeye dönüştürür. Düzenleyicide tıklamak yerine, ne istediğinizi tarif edersiniz ve yapay zeka asistanınız bunu yapar: bir projeyi açmak, bir rengi değiştirmek, bir logoyu canlandırmak veya bitmiş bir dosyayı dışa aktarmak.

Animasyonun tekrarlayan kısımlarını halletmesi için bir asistan isteyen tasarımcılar, her küçük değişiklik için bir tasarımcı beklemeden web'e hazır animasyonlara ihtiyaç duyan pazarlama ekipleri ve doğrudan bir ürüne eklenebilecek üretime hazır dışa aktarmalar (Lottie, React Native, Flutter veya SVG) isteyen geliştiriciler için inşa edilmiştir. Her proje doğrudan bir düzenleyici bağlantısıyla gelir, böylece her zaman açıp elle bitirebilir, token tasarrufu yapabilirsiniz.

Asistanınız bağlandıktan sonra yapabilecekleri şunlardır:

🗂️ Projeler ve Varlıklar

  • Projeleri listeleme: en yeni önce, her biri doğrudan düzenleyici bağlantısıyla
  • Büyük kütüphanelerde arama ve sayfalama
  • Proje ayarlarını okuma: tuval boyutu, arka plan, zaman çizelgesi ve dışa aktarma ayarları
  • Tam bir tanımdan proje oluşturma
  • Mevcut bir projenin üzerine yazma
  • Bir projeyi çoğaltma: aynı veya başka bir klasöre
  • Bir projeyi taşıma veya yeniden adlandırma
  • Projeleri klasörlere düzenleme
  • Yeniden kullanılabilir varlıkları yönetme: listeleme, okuma, oluşturma ve güncelleme

🔍 Yapı ve İnceleme

  • Bir projenin yapısını haritalama: ana kare sayılarıyla öğe ağacı, ağır veri yok
  • Neyin animasyonlu olduğunu görme: her öğede hangi kanalların ana kare taşıdığı
  • Tam değerleri okuma: herhangi bir özellik, ana kare veya öğe
  • Yazım şekillerine bakma: herhangi bir öğe veya konsept için tam JSON

🔷 Şekiller ve Öğeler

  • Dikdörtgenler
  • Daireler ve elipsler
  • Çizgiler, çoklu çizgiler ve çokgenler
  • Özel yollar
  • Metin ve çok satırlı metin
  • Görüntüler
  • Yeniden kullanılan semboller ve örnekler
  • Gruplar
  • Maskeler ve kırpma yolları

🎨 Dolgular, Konturlar ve Renk

  • Düz renk dolgular: statik veya animasyonlu
  • Gradyan dolgular
  • Konturlar: düz veya gradyan, statik veya animasyonlu
  • Birleştirme: karışım modları ve opaklık
  • Bulanıklık gibi filtre efektleri

🎞️ Animasyon ve Ana Kareler

  • Belirli zamanlarda, değerlerle ana kare ekleme
  • Hareket gerekmediğinde statik değerler ayarlama
  • Ana kareleri okuma, inceleme ve kaldırma
  • Ana kare başına yumuşatma ayarlama: kübik bezier
  • Dönüşümleri canlandırma: konum, döndürme, ölçek ve eğme
  • Dolgu, kontur, birleştirme ve filtre kanallarını canlandırma
  • Bir şekli diğerine dönüştürme

📤 Dışa Aktarma ve Teslim

  • Animasyonlu SVG dışa aktarma: JavaScript veya CSS ile yönlendirilen
  • Bir başlangıç tetikleyicisi ayarlama: yükleme, üzerine gelme, tıklama, kaydırma veya programatik
  • Tıklama ve üzerine gelme davranışı ayarlama: dondur, yeniden başlat, tersine çevir veya sıfırla
  • Lottie'ye dışa aktarma
  • React Native veya Flutter kaynağına dışa aktarma
  • Video işleme: MP4, MOV, AVI, MKV veya WebM
  • GIF, WebP, PNG dizisi veya ZIP işleme
  • Döngüyü kontrol etme: yinelemeler, yön, pinpon ve hız
  • Kare hızı, çözünürlük ve kalite ayarlama
  • Saydamlık ve arka plan rengini yönetme

✅ En iyi uygulamalar

SVGator hareket tasarımı becerisini yükleyin, ardından adıyla çağırın: Bu, asistanınızın düz, genel hareket yerine zamanlama, yumuşatma ve kişilik hakkında bilinçli seçimler yapmasına yardımcı olan bir zanaat rehberliğidir. SVGator beceriler deposundan indirin, ardından "bu logoyu canlandırmak için SVGator hareket becerilerini kullan" gibi bir şeyle başlayarak doğrudan komutunuzda tetikleyin. Bunu bilerek manuel olarak çağırırsınız: bu şekilde, yalnızca dışa aktarma yaparken veya küçük düzenlemeler yaparken beceri token kullanımınızın dışında kalır ve yalnızca ekstra sanatsal yönetimi gerçekten istediğinizde yüklenir.

Kendi çiziminizle başlayın, sonra canlandırın: Sıfırdan orijinal şekiller oluşturmak, herhangi bir yapay zeka asistanında doğru yapılması en zor şeydir. En iyi sonuçlar için, SVG'nizi önce SVGator'ın düzenleyicisinde oluşturun veya getirin, ardından asistanınızdan onu canlandırmasını isteyin. Bu, görsel stilinizi tutarlı tutar ve yapay zekanın en iyi yaptığı şeye odaklanmasını sağlar: hareket, zamanlama ve sıralama.

Komut vermeden önce öğelerinizi adlandırın: Asistanınız, bir projenin yapısını anlamak için öğe adlarını okur. "sol_kol", "arkaplan_daire" veya "başlık" gibi net adlar, doğru öğeyi hedeflemesine, hatalardan kaçınmasına ve karmaşık sahnelerde düzenli kalmasına yardımcı olur. Genel adlar işini zorlaştırır ve modele bağlı olarak size daha fazla tokene mal olabilir.

Karmaşık animasyonları adımlara bölün: "Bana tam bir onboarding animasyonu yap" yerine, her seferinde bir parça ilerleyin: öğeleri oluşturun, ana kareler ekleyin, ardından zamanlamayı iyileştirin. Sunucu, düzenleme başına doğrulanmış bir değişiklik uygular, bu nedenle daha küçük adımlar size daha fazla kontrol sağlar ve herhangi bir hatayı yakalayıp düzeltmeyi kolaylaştırır.

Zamanlama ve his konusunda net olun: "Yumuşak bir solma" biraz belirsizdir. "Yavaşlayan bir 400ms solma" asistanınıza üzerinde çalışabileceği somut bir şey verir. Hissi ne kadar çok tarif ederseniz, ister hızlı, ister zıplayan, ister yavaş veya ince olsun, ilk sonuç aklınızdakine o kadar yakın olur.

Dışa aktarma formatını yaşayacağı yere göre eşleştirin: SVG, web için doğru seçimdir, JavaScript veya yalnızca CSS (daha iyi performans için) seçeneğinizle. Lottie, React Native ve Flutter, uygulama ve mobil projelere temiz bir şekilde aktarılır. Video ve GIF, animasyonlu bir SVG'nin oynatılamayacağı sosyal medya ve e-posta için hazırdır. Formatı önceden seçmek, yeniden dışa aktarma turundan tasarruf sağlar.

Büyük deneylerden önce bir projeyi çoğaltın: Yapay zekanın bir şeyi sıfırdan yeniden inşa etmesini istiyorsanız, önce projeyi çoğaltmasını isteyin, ardından değişiklikleri kopya üzerinde yapın. Orijinal tam olarak olduğu gibi kalır, böylece cesur bir deney size asla çalışan sürüme mal olmaz. Editörde tamamlayın: Her proje, doğrudan bir editör bağlantısıyla geri döner. Asistan sizi büyük ölçüde hedefe ulaştırdığında, projeyi açın ve son rötuşları elle yapın. Ağır işi AI yapar, detayların kontrolü ise sizde kalır. Ayrıca, elle yapılan küçük düzeltmeler asistana her birini yaptırmaktan daha hızlı ve ucuz olduğu için token tasarrufu da sağlar.