SVG'den Base64'e Dönüştürücü

SVG’yi Base64’e Dönüştürme

SVG (Ölçeklenebilir Vektör Grafikleri), her yakınlaştırma seviyesinde mükemmel şekilde keskin kalan tek web resim formatıdır. Bu araç, SVG dosyalarını CSS, HTML veya JavaScript’te data URI olarak gömmek için Base64’e kodlar.

Nasıl Kullanılır

1. Yükleme alanına bir SVG dosyası bırakın veya göz atmak için tıklayın
2. Araç dosyayı okur ve Base64’e kodlar
3. Çıktı formatınızı seçin: düz Base64, data URI veya CSS arka plan
4. Sonucu kopyalayın

SVG ve Base64: Ne Zaman Mantıklı

SVG, resim formatları arasında benzersizdir çünkü zaten metindir (XML). Bu, PNG veya JPEG gibi ikili formatlarla var olmayan bir seçenek yaratır: SVG’yi Base64, URL kodlu metin veya satır içi işaretleme olarak gömebilirsiniz.

Base64 data URI

background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0...);

SVG baytları Base64’e kodlanır, bir data URI’sine sarılır. Tarayıcı çözer ve SVG’yi işler.

URL kodlu data URI (genellikle daha iyi)

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...");

SVG XML’i yüzde kodlanır. Bu, SVG’ler için tipik olarak Base64’ten daha küçüktür çünkü SVG zaten metindir ve ikiliden metne adımından fayda sağlamaz.

Satır içi SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z"/>
</svg>

HTML’de doğrudan işaretleme. En esnek yaklaşım: CSS ile stillendirebilir, animasyon ekleyebilir ve JavaScript ile manipüle edebilirsiniz. Kodlama gerekmez.

SVG İçin Base64 Ne Zaman Kullanılır

URL kodlaması genellikle daha küçük olmasına rağmen, Base64 SVG data URI’ları şu durumlarda doğru seçimdir:

• SVG, URL kodlamasını desteklemeyen bir bağlama gidiyorsa (bazı e-posta istemcileri, belirli şablon motorları)
• SVG’yi URL kodlu karakterlerin ek kaçış gerektireceği bir JSON yükünde saklamanız gerekiyorsa
• SVG, URL kodlamasında sorunlu karakterler içeriyorsa (tırnak işaretleri, öznitelik değerlerinde açılı ayraçlar)
• CSS’i programatik olarak oluşturuyor ve tüm resim türleri için tutarlı bir kodlama yaklaşımı istiyorsanız

Kodlamadan Önce SVG’leri Optimize Etme

Tasarım araçları şişkin SVG’ler dışa aktarır. Base64 kodlamasından önce SVG’yi bir optimize ediciden geçirin:

SVGO

npx svgo input.svg -o optimized.svg

SVGO, düzenleyici meta verilerini kaldırır, yolları birleştirir, koordinatları yuvarlar ve gereksiz öznitelikleri temizler. Tipik tasarruf: %30-60.

Manuel optimizasyon kontrol listesi

• XML bildirimini kaldırın (<?xml ...?>). Tarayıcılar buna ihtiyaç duymaz
• Erişilebilirlik için gerekli değilse <title>, <desc>, <metadata> kaldırın
• Ölçeklenebilirlik için width/height yerine viewBox kullanın
• Ondalık hassasiyeti azaltarak yol verilerini basitleştirin
• Kullanılmayan <defs> ve gradyanları kaldırın

Simge Sistemlerinde SVG Base64

Modern simge sistemleri genellikle stillendirme esnekliği için SVG’leri doğrudan HTML’de satır içine alır. Ancak yalnızca CSS simge çözümleri için (sözde öğeler, liste işaretçileri), Base64 data URI’ları iyi çalışır:

.alert::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url(data:image/svg+xml;base64,PHN2Zy...);
  background-size: contain;
}

Bu yaklaşım simgeleri CSS’te tutar ve HTML yapısına dokunmaz. Her simge, basit yol tabanlı simgeler için tipik olarak 200-500 baytlık Base64 olan ayrı bir data URI’sidir.

Dosya Boyutu Karşılaştırması

Basit SVG’ler için Base64 ve URL kodlaması arasındaki fark küçüktür. Karmaşık SVG’ler için URL kodlaması tutarlı şekilde kazanır. Gzip sıkıştırması, HTTP dağıtımında farkı daha da daraltır.

Raster resim kodlaması için PNG’den Base64’e, JPG’den Base64’e veya genel Resimden Base64’e dönüştürücüye bakın.