Çevrimiçi SVG Düzenleyici

Tamamen tarayıcınızda çalışan profesyonel bir SVG düzenleyici

Tools 4 All'un SVG Düzenleyicisi, indirme, hesap veya yükleme olmadan anında açılan tam bir vektör grafik uygulamasıdır. Logolar, simgeler, illüstrasyonlar, diyagramlar ve arayüz varlıkları çizmek ya da mevcut SVG dosyalarınızı temizleyip ince ayar yapmak için kullanın. Doğrudan SVG biçimi üzerine kurulmuştur; böylece dışa aktardığınız dosya düzenlediğiniz belgenin ta kendisidir: tescilli biçim yok, gizli dönüştürme yok.

Neler yapabilirsiniz

• Hassas çizin: Bézier eğrili kalem aracı, yumuşatmalı serbest kurşun kalem, köşeleri bağımsız olarak yuvarlatılmış, pahlı veya ters çevrilmiş dikdörtgenler, elipsler, çizgiler, damla fırçası, silgi, bıçak ve makas ile düzenlenebilir şekiller: çokgenler, yıldızlar, üçgenler, artılar, çerçeveler, halkalar, pasta dilimleri, hilaller, oklar, konuşma balonları, dişliler, kalpler, bulutlar, çiçekler ve spiraller ile metin.
• Yolları düğüm düğüm düzenleyin: düğümleri ve tutamaçları taşıyın, köşe, yumuşak ve simetrik düğümler arasında dönüştürün, düğüm ekleyin ve silin, yolları birleştirin ve kırın, bölümleri doğrudan bükün ve tutamaçları teğetlere yaslayın.
• Şekilleri birleştirin: birleştirme, çıkarma, kesişim, dışlama ve bölme; ayrıca konturu anahatta dönüştürme, yolu kaydırma, sadeleştirme ve tersine çevirme; hepsi arka planda çalışan, eğrileri koruyan kendi geometri motorumuzla hesaplanır.
• Her şeye stil verin: düz renkler, tuval üzerinde tutamaçlı doğrusal ve dairesel degradeler, desenler, dolgu ve kontur başına opaklık, kesik çizgiler, uçlar, birleşimler, ok başı işaretçileri, karışım modları, bulanıklık ve gölge efektleri, kırpma yolları ve maskeler.
• Düzenli kalın: sürükleyerek yeniden sıralama, yeniden adlandırma ve iç içe yerleştirme özellikli katmanlar paneli, kilitleme ve gizleme, gruplama ve grubu çözme, seçime, çalışma yüzeyine veya anahtar nesneye göre hizalama ve dağıtma, belge renk örnekleri ve yeniden kullanılabilir semboller.
• Bir profesyonel gibi çalışın: mesafe etiketli ve eşit aralık ipuçlu akıllı kılavuzlar, ızgaraya, piksellere, cetvel kılavuzlarına, düğümlere ve yollara yaslama, sayısal X/Y/G/Y/döndürme alanları, sınırsız geri alma ve Figma ve Illustrator tarzı kısayollar.
• Kod ve dışa aktarma: iki yönlü SVG kod görünümü, boyut göstergeli optimize edilmiş SVG dışa aktarımı, her ölçekte PNG/JPEG/WebP ve SVG, veri URI'si, React (JSX veya TSX), Tailwind SVG ya da CSS arka planı olarak kopyalama.
• Web üretimi için yapıldı: tek tıkla değiştirme ve currentColor'a dönüştürme özellikli belge renkleri, metni anahatta dönüştürme, konturu anahatta dönüştürme, dönüşümleri düzleştirme ve grubu çözme, tuvali içeriğe sığdırma ve gürültülü yolları sadeleştirme.
• Gerçek bir çalışma alanı: her biri kendi geri alma geçmişine sahip sekmelerde birkaç çizim, alt menülü kısa menüler, katlanabilen bir yan panel (Ctrl/⌘+B) ve telefonlarda ve masaüstünde tam ekran düzenleme.

SVG'ye özgü bir düzenleyici neden önemli

Birçok tasarım aracı SVG'yi bir dışa aktarma biçimi olarak ele alır: kendi modellerinde çizersiniz ve SVG en sonda üretilir. Bu basit simgeler için işe yarar. Mevcut bir dosyayı düzenlemeniz, CSS veya JavaScript kodunuzun bağlı olduğu kimlikleri korumanız ya da bir dosyanın neden olması gerekenden on kat büyük olduğunu anlamanız gerektiğinde işler bozulur. Bu düzenleyici doğrudan SVG belgesi üzerinde çalışır. Gruplar grup, degradeler degrade olarak kalır ve beş kez kullanılan bir <symbol> tek bir sembol olarak kalır. Bir katmanı yeniden adlandırdığınızda öğenin id değerini ayarlamış olursunuz.

Büyük dosyalarda hızlı

Hız, kodun ilk satırından itibaren bir tasarım hedefiydi. Çizim, tarayıcınız tarafından yalıtılmış bir katman içinde yerel olarak oluşturulur. Seçim tutamaçları, üzerine gelme anahatları ve kılavuzlar ayrı bir kaplamada çizilir; böylece fareyi hareket ettirmek belgenize asla dokunmaz. Uzamsal bir dizin (R-ağacı), on binlerce şekil olsa bile imlecin altındakini mikrosaniyeler içinde bulur. Ağır belgelerde kaydırma ve yakınlaştırma GPU birleştiricisine devredilir ve durduğunuzda vektörler keskin olarak yeniden oluşturulur. Boole işlemleri, yol kaydırma ve SVG optimizasyonu gibi maliyetli işler bir Web Worker'da çalışır; böylece arayüz duyarlı kalır.

Vektör çalışmaları için hassas araçlar

Köşeler için tıklamak ve yumuşak eğriler sürüklemek için kalem aracını kullanın. 45° açıları korumak için Shift, bir tutamacı kırmak için Alt tuşunu basılı tutun. Düğüm aracıyla bir bölümü bükmek için sürükleyebilir, düğüm eklemek için çift tıklayabilir veya birkaç düğüm seçip hizalayabilirsiniz. Akıllı kılavuzlar, bir nesne komşularının kenarları veya merkezleriyle hizalandığında ve nesneler arasındaki boşluk eşit olduğunda gösterilir. Cetvellerden kılavuz da sürükleyebilirsiniz. Kesin değerler için Tasarım paneline X, Y, genişlik, yükseklik ve döndürme yazın. Alanlar 120+16 veya 200/3 gibi aritmetik ifadeleri kabul eder.

Temiz, küçük dışa aktarımlar

Düzenleyiciler kaydettikleri dosyalarda genellikle meta veriler, kullanılmayan tanımlar, gereksiz gruplar ve aşırı hassas sayılar bırakır. Dışa aktarma iletişim kutusu arka planda SVGO tarzı bir optimize edici çalıştırır. Sayıları seçtiğiniz hassasiyete yuvarlar, yol verilerini en kısa biçimine dönüştürür, düzenleyici meta verilerini ve kullanılmayan tanımları kaldırır, kimlikleri ve renkleri kısaltır ve işe yaramayan grupları birleştirir. Her optimizasyon kapatılabilir ve iletişim kutusu dosya boyutunu öncesi ve sonrasıyla gösterir. Raster çıktı için saydam arka planlı veya arka plansız olarak 1×, 2×, 4× ya da tam piksel boyutunda PNG, JPEG veya WebP seçin.

Web üretimi için yapıldı

Web sitelerinde ve uygulamalarda kullanılan SVG'ler, baskı çalışmalarından farklı şeylere ihtiyaç duyar. Belge renkleri listesi dosyanın kullandığı her rengi gösterir: birini değiştirin, onu paylaşan her şey değişsin ya da bir React veya Tailwind simgesi rengini CSS'ten alsın diye currentColor değerine dönüştürün. İçe aktarılan dosyalar genellikle yolları düzenlemeyi zorlaştıran iç içe gruplar ve dönüşümler taşır: Dönüşümleri düzleştir ve grubu çöz bunları tek adımda koordinatlara işler, İçeriğe sığdır ise viewBox'u konturlar dahil çizime göre kırpar. Metni anahatta dönüştür ve Konturu anahatta dönüştür, yazıları ve çizgi kalınlıklarını her yerde aynı görünen düz yollara çevirir; Sadeleştir ise çizilmiş veya serbest elle yapılmış bir şeklin yüzlerce noktasını azaltır.

Dosyalarınız cihazınızda kalır

Düzenleyicinin arkasında bir sunucu yok. Bir dosyayı açmak onu diskinizden sayfaya okur, dışa aktarma ise dosyayı cihazınızda üretir. Otomatik kayıt, son dosyalar listenizi de tutan tarayıcınızın özel IndexedDB depolamasına yazar. Sekmeyi yanlışlıkla kapatırsanız son belgeniz bir sonraki ziyaretinizde geri yüklenir.

Daha fazla görsel aracını keşfedin