MoreOnlineTools
ESC

SVG İş Akışı

SVG dosyalarını 5 adımda görüntüleyin, optimize edin ve dışa aktarın

SVG İş Akışı

SVG'lerle çalışmak birçok farklı görevi kapsar: ham kodu incelemek, tasarım araçlarından gelen şişkinliği temizlemek, raster formatlara dışa aktarmak, önizleme görselleri hazırlamak ve web'e yerleştirmek. Bu iş akışı bunların hepsini sırayla kapsar.

5 adım ~20 dk 5 araç
01

SVG kaynak kodunu incele

Bir SVG'yi değiştirmeden önce yapısını anlamanız gerekir — hangi öğelerin mevcut olduğunu, ID veya sınıf kullanıp kullanmadığını ve dışa aktarma aracının hangi meta verileri eklediğini.

SVG Kod Görüntüleyici
SVG'nizi yapıştırın veya yükleyin; canlı önizlemeyle biçimlendirilmiş XML kaynağını yan yana görün.
Aracı Aç
02

Optimize et ve dosya boyutunu küçült

Illustrator veya Figma'dan dışa aktarılan SVG'ler, dosya boyutunu ikiye katlayabilen gereksiz meta veri, editör yorumları ve fazladan öznitelikler içerir.

SVG Optimize Edici
SVG'nizi yükleyin; gereksiz veriler otomatik olarak temizlensin ve daha küçük boyutlu, temiz bir sürüm elde edin.
Aracı Aç
03

Raster görüntü olarak dışa aktar

Bazı bağlamlarda PNG veya JPEG gereklidir — e-posta istemcileri, belirli İYS'ler ve sosyal medya platformları SVG'yi güvenilir şekilde işlemez.

SVG'yi Görüntüye Çevir
Optimize edilmiş SVG'nizi, raster görüntü gerektiren durumlar için seçtiğiniz çözünürlükte PNG veya JPEG'e dönüştürün.
Aracı Aç
04

Sunum veya belgeler için güzelleştir

Beyaz arka plan üzerindeki SVG'lerin düz ekran görüntüleri yarım kalmış görünür. Arka plan, dolgu ve gölge eklemek onları sunum için hazır hale getirir.

Ekran Görüntüsü Güzelleştirici
Dışa aktarılan görüntüyü yükleyin, stillendirilmiş bir arka plan ve çerçeve ekleyin, ardından gösterişli sürümü indirin.
Aracı Aç
05

Satır içi yerleştirme için Base64'e kodla

SVG'leri CSS veya HTML'de Base64 veri URI'si olarak yerleştirmek bir HTTP isteğini ortadan kaldırır; bu, performans açısından kritik bağlamlarda küçük simgeler için faydalıdır.

Resmi Base64'e Çevir
SVG'nizi veya dışa aktarılan PNG'yi yükleyin; yerleştirmeye hazır Base64 kodlu veri URI dizesini alın.
Aracı Aç

Profesyonel İpuçları

  • SVG kaynağını önce her zaman inceleyin — optimize araçları bazen olağandışı yapıya veya animasyonlara sahip SVG'leri bozabilir.
  • PNG'ye dönüştürürken yüksek DPI ekranlarda keskinliği korumak için 2x veya 3x çözünürlükte dışa aktarın.
  • Base64 kodlaması dosya boyutunu yaklaşık %33 artırır, bu nedenle yalnızca HTTP isteğini ortadan kaldırmanın değer verdiği küçük simgeler için kullanın.

Sıkça Sorulan Sorular

Bozabilir. Animasyon özniteliklerinin ve JavaScript kancalarının bozulmadan kaldığını doğrulamak için optimizasyondan sonra kod görüntüleyicide çıktıyı inceleyin.

Web kullanımı için, ekran boyutunun 2 katı (örneğin 400 piksellik bir yuva için 800 piksel genişliğinde) retina ekranlarda net sonuçlar verir.

Evet. Biçim şöyledir: background-image: url("data:image/svg+xml;base64,..."). Resim Base64 aracı tam veri URI dizesini oluşturur.

Yazı tipi oluşturma farklılıkları ve eksik web yazı tipleri en yaygın nedendir. Bunu önlemek için dışa aktarmadan önce SVG'nizdeki yazı tiplerini gömün veya ana hatlarıyla çizin.

Güvenlik ve Gizlilik

Verilerinizin güvenliği bizim önceliğimiz

Yerel İşleme

Tüm işlemler tarayıcınızda gerçekleşir

Veri Transferi Yok

Verileriniz sunucularımıza gönderilmez

Veri Depolama Yok

Hiçbir veri depolanmaz veya paylaşılmaz

SSL Şifreleme

Güvenli bağlantı için SSL şifreleme