Canlı önizleme yalnızca görüntü için bir xmlns özniteliği ekler; bu yüzden böyle bir özniteliği olmayan SVG'yi de gösterir. PNG dışa aktarımı ve kopyalanan Data URI bunu eklemez. Bir stil sayfası için SVG Data URI kopyalarken ya da PNG dışa aktarırken bunu aklınızda tutun: güzel görünen bir önizleme, dosyanın görsel olarak yükleneceğini kanıtlamaz.
Eksik xmlns tuzağı
PNG için tarayıcı kodunuzu bir görsel olarak yükler. xmlns="http://www.w3.org/2000/svg" olmadan bu genellikle başarısız olur. O zaman indirme başlamaz ve bir hata iletisi görünür. Özniteliği ekleyin ve düğmeye yeniden basın.
Kopyala, dönüştür, kontrol et: adımlar
- SVG kodunu metin alanına yapıştırın. Alan bir örnekle, beyaz yıldızlı mavi bir daireyle başlar.
- Önizlemeye bakın. Açık renkli şekiller görünür kalsın diye koyu damalı bir arka planın üzerindedir.
data:image/svg+xml,...dizesi için Data URI'yi kopyala'ya ya dadata:image/svg+xml;base64,...için Base64'ü kopyala'ya basın. İki düğme dedata:önekiyle birlikte tam URI'yi kopyalar.- PNG için piksel cinsinden bir boyut girin ve PNG olarak indir'e basın. Dosya adı boyutu taşır, örneğin
vector-512x512.png.
SVG Data URI mi Base64 mü: hangisini yapıştırmalı
İlk düğme yüzde kodlaması kullanır ve tek ile çift tırnakları da kaçırır; böylece dize bir CSS url() içine veya bir HTML özniteliğine sığar. SVG için bu biçim çoğunlukla daha kısadır. İkinci düğme metin uzunluğuna yaklaşık üçte bir ekler ama yalnızca güvenli karakterler içerir ve ASCII dışı metni işler. Araç SVG'nizi küçültmez. URI kodunuzu olduğu gibi, yalnızca kodlanmış hâliyle taşır. Özel bir seçim kutusu için 400 baytlık küçük bir ok gibi küçük bir simge, bu şekilde bir istek tasarruf ettirir.
PNG ve önizleme kodunuza ne yapar
PNG her zaman karedir. Grafik, boyut çarpı boyut bir tuvale kendi oranlarıyla çizilir ve ortalanır; yani geniş bir çizim esnetilmez. Boş kenar boşluğu, arka planın geri kalanı gibi saydam kalır. Boş veya geçersiz bir boyut 512'ye döner, ondalık bir sayı tam sayıya kesilir. SVG'nin bağlandığı harici görseller, yazı tipleri ve stil sayfaları yüklenmez. Çok büyük boyutlar, tarayıcının tuval sınırına bağlı olarak başarısız olabilir.
Her şey cihazınızda çalışır. Bir düğmeye basmak hiçbir istek göndermez, kopyalama düğmeleri panonuza yazar. Önizleme bir data URI içeren görsel öğesidir; bu yüzden yapıştırılan koddaki betikler ve olay işleyicileri çalışmaz.