Ücretsiz SVG iyileştirici ve dönüştürücü: SVG'yi (toplu) küçültün ve temizleyin, SVG'yi PNG, JPG, React JSX veya veri URI'sine dönüştürün, yolları düzenleyin, viewBox'ı kırpın, yeniden renklendirin, sprite oluşturun, artı dalga, blob, desen, ağ degradesi ve gürültü oluşturucular. Yükleme yok.
23 araç içeren ücretsiz, özel bir SVG çalışma alanı. SVG'leri SVGO stilinde optimize edin ve küçültün (toplu olarak, öncesi/sonrası kontrolleri ile), Figma ve Illustrator dışa aktarımlarını temizleyin ve SVG'yi PNG, JPG, WebP, React bileşenlerine veya veri URI'lerine dönüştürün. Ayrıca tarayıcınızda dosyaları doğrulayabilir, yolları düzenleyebilir, viewBox'ı kırpabilir, yeniden renklendirebilir, hareketli görüntüler oluşturabilir ve dalgalar, lekeler, desenler, örgü degradeleri, gren dokuları ve bölücüler oluşturabilirsiniz.
SVG Forge, normalde beş web sitesine yaydığınız SVG işlerini tek bir sayfaya getirir: toplu ZIP dışa aktarma özelliğine sahip SVGO tarzı bir iyileştirici, bir küçültücü, temizleyici ve biçimlendirici; SVG'den PNG, JPG, WebP'ye, React bileşenlerine ve veri URI'lerine dönüştürücüler; bir doğrulayıcı; görsel bir yol düzenleyici, viewBox kırpıcı, renk değiştirici ve hareketli grafik oluşturucu; ve dalgalar, lekeler, desenler, ağ geçişleri, damar dokuları ve bölüm bölücüler için on üreteç. Herhangi bir sonuç tek tıklamayla bir sonraki araca aktarılabilir. Sekmeler arasında kopyalayıp yapıştırmaya gerek kalmadan bir blob oluşturabilir, yeniden renklendirebilir, optimize edebilir ve bir React bileşeni olarak dışa aktarabilirsiniz.
Özellikler
23 SVG aracı: optimize edin, dönüştürün, düzenleyin ve oluşturun
SVGO tarzı optimize edici: 21 geçiş, ön ayar, toplu ZIP ve görsel fark
16–512 piksel simge seti de dahil olmak üzere herhangi bir boyutta SVG'den PNG, JPG ve WebP'ye
React / React Native bileşeni için SVG (TSX veya JSX)
Veri URI kodlayıcı ve kod çözücü, CSS arka planı ve CSS maskesi çıkışı
Doğrulayıcı: güvenlik, erişilebilirlik, boyut ve gzip raporu
Bağlantı noktaları, mutlak dönüşüm ve simgeye sığdırma özelliklerine sahip yol düzenleyici
ViewBox içeriğe göre kırpma, renk değiştirici (ton, gri tonlama, currentColor) ve hareketli grafik oluşturucu
Dalga, damla, desen, örgü gradyanı, gürültü, bölücü, çokgen, yıldız, spiral ve dalgalı çizgi oluşturucuları
Önce yerel: dosyalar hiçbir zaman yüklenmez
SVG Optimize Edici, Dönüştürücü ve Oluşturucu nasıl kullanılır?
1
Bir araç seçin
Kenar çubuğunda (veya mobil cihazdaki seçicide) Optimize Et, Dönüştür, Düzenle veya Oluştur arasından seçim yapın. Her aracın #svg'den png'ye gibi kendi bağlantısı da vardır.
2
SVG'nizi ekleyin
İşaretlemeyi yapıştırın, bir veya daha fazla .svg dosyasını yükleyin veya sürükleyip bırakın ya da panodan okuyun. Jeneratörler, rastgele seçebileceğiniz hazır bir tasarımla başlar.
3
Ayarlayın ve kontrol edin
Ön ayarları, kaydırıcıları ve geçişleri ayarlayın. Önizleme güncellemeleri canlı olarak yapılır ve optimize edici, orijinali ve sonucu bayt ve gzip tasarruflarıyla yan yana gösterir.
4
İhracat veya devretme
SVG, React, veri URI'si, Base64 veya CSS olarak kopyalayın, .svg'yi indirin, PNG/JPG/WebP'ye aktarın veya sonucu "Şununla aç..." ile doğrudan başka bir araca gönderin.
Yaygın kullanım durumları
Üretime göndermeden önce simgeleri ve çizimleri optimize edin ve küçültün
Figma, Illustrator, Inkscape veya Sketch'ten şişirilmiş SVG dışa aktarımlarını temizleyin
Bir simge klasörünün tamamını toplu olarak sıkıştırın ve ZIP olarak indirin
E-posta, sosyal medya veya favicon seti için SVG logosunu PNG'ye dönüştürün
SVG simgelerini yazılı React veya React Native bileşenlerine dönüştürün
Mümkün olan en küçük veri URI'si olarak CSS'deki satır içi küçük simgeler
viewBox'ı içeriğine sığdırarak SVG'nin etrafındaki boş alanı kırpın
Bir SVG'yi marka paletine göre yeniden renklendirin veya currentColor'a değiştirin
Simgeleri yeniden kullanılabilir tek bir <symbol> hareketli grafiğinde paketleyin
Açılış sayfaları için dalga, blob, mesh-gradyan ve grenli arka planlar oluşturun
Ayrıntılı kılavuz
Hangi SVG aracına ihtiyacım var?
Aracın adıyla değil, işle başlayın. Bir dosyayı küçültmek için Optimize Et'i kullanın. Bitmap, kod veya CSS isteyen bir yerde SVG kullanmak için Convert'i kullanın. Mevcut bir SVG'yi düzeltmek veya yeniden biçimlendirmek için Düzenle'yi kullanın. Kaydırıcılardan yeni resimler oluşturmak için Oluştur'u kullanın.
Grup
Aletler
Şunun için en iyisi:
Optimize edin ve temizleyin
Optimize Edici, Küçültücü, Temizleyici, Formatlayıcı, Yol Basitleştirici
Simgeler ve resimler gönderilmeden önce küçültülüyor
Dönüştürme ve inceleme
SVG → PNG/JPG/WebP, SVG → React (JSX/TSX), Veri URI kodlayıcı/kod çözücü, Görüntüleyici ve Doğrulayıcı
Uygulamanızın, e-postanızın veya CSS'nizin ihtiyaç duyduğu formatta bir SVG alma
Düzenlemek
Yol Düzenleyici, ViewBox ve Kırpma, Renk Değiştirici, Sprite Oluşturucu
Yolları düzeltme, boşlukları kırpma, simgeleri yeniden renklendirme ve paketleme
Oluştur
Dalgalar, Damla, Desen, Ağ Gradyanı, Gürültü ve Tahıl, Şekil Bölücü, Çokgen, Yıldız, Spiral, Dalgalı Çizgi
Arka planlar, kahraman bölümleri, bölücüler ve dekoratif şekiller
SVG optimize edici nasıl çalışır ve hangi ayarlar güvenlidir?
Optimize edici, dosyanızı tarayıcıda gerçek bir XML belgesine ayrıştırır ve SVGO'da modellenen 21 optimizasyonu uygular. Her biri açılıp kapatılabilir ve üç ön ayar (Dengeli, Maksimum, Yalnızca Temiz) genel durumları kapsar. Yan yana görsel kontrol, orijinal ve optimize edilmiş görüntüyü gösterir, böylece indirmeden önce hiçbir şeyin değişmediğini doğrulayabilirsiniz. Onlarca dosyayı aynı anda bırakıp tek bir ZIP olarak geri alabilirsiniz. Illustrator, Inkscape veya Figma'dan yapılan tipik dışa aktarımlar %30-70 oranında küçülür ve sunucunuzun gerçekte gönderdiği şey bu olduğundan gzip boyutu gösterilir.
Optimizasyon
Ne işe yarar
Görsel risk
Düzenleyici verilerini ve meta verileri kaldırın
Inkscape, Sodipodi, Illustrator, Sketch ve Figma ad alanlarını, <meta verileri> ve yorumları siler
Hiçbiri
Yuvarlak sayılar / yolları sıkıştır
Koordinatları seçtiğiniz hassasiyete yuvarlar ve yol verilerini mutlak veya göreli biçimde daha kısa biçimde yeniden yazar
2-3 ondalık sayılarda yok; 0-1'deki küçük simgeleri kontrol edin
Kullanılmayan tanımları ve kimlikleri kaldırın
Hiçbir şeyin referans vermediği degradeleri, klip yollarını ve kimlikleri bırakır
Hiçbiri
Grupları daralt / varsayılanları kaldır
Boş <g> sarmalayıcılarını açar ve fill-opacity="1" gibi değerleri kaldırır
Hiçbiri
Stiller → nitelikler, renkleri kısaltın
style = "doldur:#ffffff", dolgu = "#fff" olur
Yok (<style> bloğu mevcut olduğunda otomatik olarak atlanır)
Duyarlı (damla genişliği/yüksekliği)
CSS'nin boyutu kontrol etmesi için yalnızca viewBox'ı tutar
Sabit boyuta güvendiyseniz düzen değişebilir
<title>/<desc> öğesini kaldır
Erişilebilir adları çıkarır
Görsel olarak yok, ancak ekran okuyucu kullanıcılarına zarar veriyor
Figma, Illustrator veya Inkscape'den dışa aktarılan SVG kodunu temizleyin
Tasarım araçları, SVG dışa aktarımlarını oluşturucu yorumlar, XML bildirimleri, düzenleyici ad alanları, Layer_1 ve SVGID_1_ gibi katman kimlikleri, boş gruplar, arka planı etkinleştirme stilleri ve altı ondalık sayılarla doldurur. SVG Temizleyici bu karışıklığı ortadan kaldırır ancak işaretlemenizi girintili ve okunabilir halde tutar; bu, dosyayı elle düzenlediğinizde veya canlandırdığınızda kullanışlıdır. Optimize Edici üretim için daha da ileri gider ve Doğrulayıcı, içinde ne olduğunu tam olarak listeler (öğe sayıları, renkler, yazı tipleri, gömülü bitmapler, komut dosyaları ve harici bağlantılar), böylece bir dosyanın neden ağır veya güvensiz olduğunu onu kullanmadan önce görebilirsiniz.
SVG'den PNG'ye, React bileşeni veya veri URI'si: hangi formatın kullanılacağı
SVG, web'deki simgeler ve resimler için en iyi seçimdir. Ancak bazı yerlerin hâlâ bir bitmap'e veya koda ihtiyacı var. Dönüştürücüler her durumu yükleme olmadan ele alır.
İhracat
Ne zaman kullan
Notlar
PNG / WebP
E-posta, sosyal paylaşımlar, uygulama mağazaları, site ikonları, SVG'nin kabul edilmediği her yer
8192 piksele kadar herhangi bir boyut, şeffaf arka plan, toplu ZIP ve tek tıklamayla 16-512 piksel simge seti
JPEG
Küçük, opak bir görüntüye ihtiyaç duyan yerler
Saydamlığın yerini alan arka plan rengini seçin
Yerel Tepki / Tepki
React, Next.js veya Expo kod tabanı içindeki simgeler
camelCase nitelikleri, stil nesneleri, {...props}, isteğe bağlı currentColor ve erişilebilir bir başlık desteği
Veri URI'si (URL kodlu)
Ekstra istek gerektirmeden CSS veya HTML'de satır içi küçük simgeler
Genellikle Base64'ten yaklaşık %30 daha küçüktür. CSS maskesi çıktısı arka plan rengiyle yeniden renklendirmenize olanak tanır
SVG grafiği
Bir sitede birçok simge yeniden kullanıldı
<use href="#id"> ile başvurulan <symbol> dosyalarından biri
Oluşturucular, bitmap dışa aktarmaları yerine temiz, elle düzenlenebilir SVG üretir. Katmanlı dalgalar ve geçiş blobları, JavaScript olmadan <img> ve CSS arka planlarında çalışan SMIL ile canlandırılabilir. Desen oluşturucu, arka plan tekrarı için tek bir döşeme olarak veya tam bir tuval olarak 16 kesintisiz motifi dışa aktarır. Kafes degrade ve gürültü oluşturucular, modern açılış sayfalarında popüler olan yumuşak degrade ve film grenli görünümleri oluşturur ve şekil bölücü, bölüm kenarları için yapıştırmaya hazır bir HTML ve CSS pasajıyla birlikte gelir. Her çıktı SVG, React, veri URI veya CSS olarak kopyalanabilir veya PNG'ye aktarılabilir.
Ayrıştırma, optimize etme, rasterleştirme ve sıkıştırma işlemlerinin tümü tarayıcınızda standart web API'leri (DOMParser, Canvas ve CompressionStream) ile gerçekleşir. Çiziminiz hiçbir zaman bir sunucuya ulaşmaz; bu nedenle araçlar aynı zamanda NDA kapsamında müşteri çalışmaları için de çalışır. Önizlemeler yalıtılmış bir <img> aracılığıyla oluşturulur, böylece yapıştırdığınız bir SVG'deki komut dosyaları çalıştırılamaz ve optimize edici, siz sitenize bir dosya yerleştirmeden önce <script> etiketlerini ve olay işleyicilerini kaldırabilir.
Sık sorulan sorular
Hangi SVG araçları dahildir?
Yirmi üç, dört alana gruplandırılmış. Optimize Etme: Optimize Edici, Küçültücü, Temizleyici, Formatlayıcı ve Yol Basitleştirici. Dönüştürme: SVG'den PNG/JPG/WebP'ye, SVG'den React'e, Veri URI'sine ve Görüntüleyici ve Doğrulayıcı. Düzenleme: Yol Düzenleyici, ViewBox ve Kırpma, Renk Değiştirici ve Sprite Oluşturucu. Oluştur: Dalga, Blob, Desen, Ağ Degradesi, Gürültü, Şekil Bölücü, Çokgen, Yıldız, Spiral ve Dalgalı.
Bir SVG dosyasını ücretsiz olarak nasıl optimize edebilirim?
Optimize Edici'yi açın, SVG'nizi yapıştırın veya bir veya daha fazla .svg dosyasını bırakın ve bir ön ayar seçin (yalnızca Dengeli, Maksimum veya Temiz) veya 21 optimizasyondan herhangi birine geçiş yapın. Araç, orijinal, optimize edilmiş ve gzip ile sıkıştırılmış boyutların yanı sıra yan yana görsel kontrol gösterir. Ardından sonucu kopyalayın, indirin veya her dosyayı ZIP olarak indirin.
SVG dalgasını veya blobunu nasıl yaparım?
Dalga veya Blob oluşturucuyu kullanın, kaydırıcıları (katmanlar, genlik, karmaşıklık, rastgelelik) ve renkleri ayarlayın; vektör güncellemelerini canlı olarak yapın. Çeşitleri keşfetmek için Rastgele'ye basın, geçiş efekti için animasyonu açın, ardından SVG'yi kopyalayın veya dışa aktarın.
SVG'yi CSS arka planı veya Veri URI'si olarak alabilir miyim?
Evet. Her sonuçta ham SVG, React, kompakt bir URL kodlu Veri URI'si, Base64 ve yapıştırmaya hazır bir CSS kuralının yanı sıra .svg ve PNG/JPG/WebP indirmeleri için dışa aktarma sekmeleri bulunur. Veri URI aracı ayrıca bir CSS maskesi pasajı üretir ve bir veri URI'sinin kodunu tekrar SVG'ye dönüştürebilir.
SVG temizleyici neyi temizler?
Inkscape, Sodipodi, Illustrator, Sketch, Serif ve Figma'dan XML bildirimleri, DOCTYPE, yorumlar, <meta veriler> ve düzenleyici ad alanları ve nitelikleri. İşaretlemeyi girintili ve okunabilir tutar; dolayısıyla dosyayı elle düzenlemek istediğinizde doğru seçimdir.
SVG'im bir sunucuya yüklendi mi?
Hayır. Optimize etme, PNG oluşturma ve ZIP oluşturma dahil her şey tarayıcınızda yerel olarak çalışır. Dosyalarınız cihazınızdan asla ayrılmaz, bu nedenle özeldir ve anındadır.
Bir SVG dosyasını nasıl küçültebilirim veya optimize edebilirim?
SVG'nizi ve optimize edici şerit düzenleyici meta verilerini, yorumları, kullanılmayan tanımları ve yedek kodu yapıştırın veya yükleyin, sayıları yuvarlar ve yol verilerini sıkıştırır (SVGO gibi). Bu genellikle bir dosyayı görünüşünü değiştirmeden %30-70 oranında küçültür ve bunların tümü tarayıcınızda çalışır.
Dağınık SVG kodunu Figma veya Illustrator'dan nasıl temizlerim?
Tasarım araçları, oluşturucu yorumları, katman kimlikleri, boş gruplar ve altı ondalık sayılar gibi şişkinlikler ekler. Hafif, web'e hazır işaretleme elde etmek için dışa aktarmayı Temizleyici'ye (okunabilir kalmasını sağlar) veya Optimize Edici'ye (en küçük çıktı) yapıştırın.
Bir SVG'yi veri URI'sine dönüştürebilir miyim?
Evet. Herhangi bir sonuçta Veri URI aracını veya Veri URI sekmesini kullanın. Genellikle Base64'ten yaklaşık %30 daha küçük olan URL kodlamasını kullanır ve ayrıca size Base64, bir CSS arka plan kuralı ve bir <img> etiketi verir.
SVG'yi şeffaf bir arka plana sahip PNG'ye nasıl dönüştürebilirim?
SVG'yi PNG / JPG olarak açın, dosyalarınızı ekleyin, PNG'yi ve bir ölçek (ör. 4×) ya da tam bir genişlik veya yükseklik seçin ve Şeffaf arka planı açık tutun. Birçok SVG'yi toplu olarak bir ZIP'e dönüştürebilir, bunun yerine JPG veya WebP'yi seçebilir veya sık kullanılan simgeler ve uygulama simgeleri için 16-512 piksel PNG'leri dışa aktarmak üzere Simge kümesini seçebilirsiniz.
Bir SVG'yi React bileşenine nasıl dönüştürebilirim?
SVG'yi SVG to React'a (JSX) yapıştırın, bileşeni adlandırın ve TypeScript veya JavaScript, React veya React Native'i seçin. Nitelikler camelCase'e dönüştürülür, satır içi stiller nesneler haline gelir ve {...props} kökte yayılır. Ayrıca renkleri currentColor olarak değiştirebilir ve erişilebilir bir başlık desteği ekleyebilirsiniz.
Optimize etmek SVG'min görünüşünü değiştirecek mi?
Varsayılan Dengeli ön ayarıyla değil. İçindeki her optimizasyon yalnızca görünmez verileri kaldırır veya değerleri eşit şekilde yeniden yazar. Çok düşük hassasiyet (0-1 ondalık sayılar), küçük simgelerin üzerindeki noktaları hafifçe hareket ettirebilir; bu nedenle optimize edici, indirmeden önce orijinali ve sonucu yan yana gösterir.
Bir SVG'nin etrafındaki boş alanı nasıl kaldırırım?
ViewBox & Crop'u açın, SVG'yi yapıştırın ve İçeriğe kırp'a tıklayın. Araç, çizimin gerçek sınırlarını ölçer, seçtiğiniz dolguyla sıkı bir viewBox ayarlar ve genişlik ve yükseklik niteliklerini güncelleyebilir veya kaldırabilir.
Bir SVG'nin renklerini nasıl değiştirebilirim?
Renk Değiştirici her dolgu, kontur ve degrade rengini (hex, rgb(), hsl() ve adlandırılmış renkler) algılar ve her birinin ne sıklıkta göründüğünü listeler. Bunları tek tek yeniden eşleyebilir, tüm dosya için renk tonunu, doygunluğu ve açıklığı değiştirebilir, gri tonlamaya dönüştürebilir veya tersine çevirebilir veya simgenin CSS metin renginizi takip etmesi için her şeyi currentColor ile değiştirebilirsiniz.
SVG hareketli grafiği nedir ve onu nasıl kullanırım?
Hareketli grafik, <symbol> öğeleri olarak birçok simge içeren bir SVG dosyasıdır. Simgelerinizi Sprite Oluşturucu'ya ekleyin ve ardından her birine <svg><use href="#icon-id"/></svg> ile başvurun. Araç, degrade çakışmalarını önlemek ve renkleri currentColor'a dönüştürmek için dahili kimliklere önek ekleyebilir ve sizin için kullanım kodunu oluşturur.
Bilinmeyen bir kaynaktan SVG yapıştırmak güvenli midir?
Evet. Önizlemeler, komut dosyalarının çalıştırılamadığı yalıtılmış bir <img> içinde oluşturulur. Doğrulayıcı, <script> etiketlerini, olay işleyicilerini ve harici bağlantıları işaretler ve optimize edici, siz dosyayı bir siteye yerleştirmeden önce varsayılan olarak komut dosyalarını ve işleyicileri kaldırır.
Oluşturulan dalgaları ve lekeleri canlandırabilir miyim?
Evet. Wave ve Blob oluşturucularda bağımsız bir SMIL dönüşümü ekleyen bir Animate geçiş düğmesi bulunur. <img> içindeki tarayıcılarda, CSS arka planlarında ve satır içi SVG'de, JavaScript veya CSS gerekmeden oynatılır.
