SVG'den CSS Arka Planına Dönüştürücü – Veri URI Kodu
Kullanıma hazır, veri URI'li bir CSS background-image oluşturmak için bir SVG yapıştırın veya sürükleyip bırakın. URL kodlaması, minimal ve okunabilir bir sonuç için tercih edilen seçenektir; Base64 de kullanılabilir. Tırnak stilini seçin, hafif SVG küçültme uygulayın, background-size, background-repeat ve background-position ayarlayın, ardından canlı önizlemeyi kontrol edin.
SVG'den CSS Arka Planına Dönüştürücü, SVG işaretlemesini veri URI'si içeren, kullanıma hazır bir CSS background-image bildirisine dönüştürür. Çıktıyı oluşturmak için bir SVG yapıştırın veya sürükleyip bırakın, ardından incelemek için canlı önizlemeyi kullanın. Bu, ayrı bir resim dosyası olarak başvurmak yerine bir SVG'yi CSS arka planı olarak kullanmak istediğinizde kullanışlıdır.
Dönüştürücü, veri URI'si için URL kodlaması ve Base64 sunar. Minimal ve okunabilir bir sonuç için URL kodlaması tercih edilir; Base64 ise alternatif olarak kullanılabilir. Ayrıca tırnak stili seçebilir, hafif SVG küçültme uygulayabilir ve background-size, background-repeat ve background-position ayarlayabilirsiniz. Bu seçenekler, dönüşümün temel amacını değiştirmeden oluşturulan CSS'yi ve önizlemeyi şekillendirmeye yardımcı olur.
SVG, işaretleme tabanlı bir vektör resim biçimidir; CSS ise web sayfaları için sunum kurallarını tanımlamakta kullanılır. Bir veri URI'si, içeriği URI içinde temsil eder ve SVG içeriğinin CSS background-image değerinde görünmesine olanak tanır. Bu temsiller arasında dönüştürme, bir stil sayfasına arka plan olarak bir SVG yerleştirmek ve görünümünü CSS arka plan özellikleriyle yapılandırmak istediğinizde yardımcı olabilir.
Dönüştürücü tamamen tarayıcınızda çalışır: girdiniz cihazınızda işlenir ve sunucuya gönderilmez. Ayrıca sayfa yüklendikten sonra çevrimdışı çalışır, böylece aktif bir bağlantı olmadan SVG dönüştürebilirsiniz. Geliştiriciler ve DevOps mühendisleri, yerel olarak hiçbir şey kurmadan masalarında veya başka bir makinede çalışırken hızlı dönüştürmeler için kullanabilir.
Adım 1: SVG'nizi giriş alanına yapıştırın veya sürükleyip bırakın. Dönüştürücü, bir CSS background-image veri URI'si oluşturmak için bu içeriği kullanır.
Adım 2: Veri URI'si için URL kodlaması veya Base64 seçin. Minimal ve okunabilir bir sonuç için URL kodlaması tercih edilir.
Adım 3: Tırnak stili ve hafif SVG küçültme dahil mevcut seçenekleri ayarlayın. Gerektiği gibi background-size, background-repeat ve background-position belirleyin.
Adım 4: Sonucu kontrol etmek için canlı önizlemeyi inceleyin, ardından oluşturulan CSS'yi projenizde kullanmak üzere kopyalayın.
Kullanım senaryosu: Yerel bir araç kurmadan bir SVG'yi stil sayfası için CSS background-image'e dönüştürün.
Kullanım senaryosu: Alışık olduğunuz geliştirme ortamınızın olmadığı bir makinede çalışırken arka plan grafiği hazırlayın.
Kullanım senaryosu: Kurum içi bir SVG'yi içeriğini üçüncü taraf bir hizmete yapıştırmadan dönüştürün.
Kullanım senaryosu: Bir SVG'yi CSS'de nasıl temsil edeceğinizi seçerken URL kodlamalı ve Base64 veri URI'lerini karşılaştırın.
Kullanım senaryosu: background-size, background-repeat ve background-position ayarlayın, ardından sonucu kontrol etmek için canlı önizlemeyi kullanın.
Kullanım senaryosu: Bir CSS kuralı için SVG arka planı hazırlarken hafif SVG küçültme uygulayın.