SVG / Simgeler

SVG Sprite Oluşturucu: Semboller ve Simge Kullanımı

Bir sembol sprite'ı oluşturmak için birden fazla SVG simgesini sürükleyip bırakın. İşaretlemeyi temizleyin, dosya adı ID'lerini tekilleştirin, viewBox'ları koruyun, isteğe bağlı olarak fill değerlerini currentColor'a dönüştürün ve sprite.svg'yi indirin.

SVG Sprite Oluşturucu: Semboller ve Simge Kullanımı: Bir SVG simgesi grubunu ekleyerek her biri için bir sembol içeren tek bir sprite dosyası ve her simgenin kullanım kodunu elde edin. Script'ler, harici kaynaklar ve güvenli olmayan her şey kaldırılır; gerektiğinde boyutlardan bir viewBox oluşturulur ve simgelerin metin rengine uyması için fill değerleri currentColor'a dönüştürülebilir. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori
Geliştirici araçları
Çalıştırma sayısı
Tarayıcınızda
Maliyet
Ücretsiz · kayıt gerekmez
Kullanılabilirlik
Kullanıma hazır
SVG simge sprite'ıYerel işleme

Tamamen tarayıcınızda çalışır

En fazla 60 simge · her biri 1 MB · dosya seçmek mevcut grubu değiştirir

Betikler, olay işleyicileri, harici kaynaklar, gömülü görseller, metin ve desteklenmeyen öğeler kaldırılır. Temel satır içi stiller sunum özniteliklerine dönüştürülür. Eksik viewBox için sayısal genişlik ve yükseklik kullanılır; eksik boyutların her biri için varsayılan değer 24 birimdir. Kullanmadan önce her önizlemeyi kontrol edin.

Bir SVG simgesini düzenle

Semboller ve yeniden kullanım

SVG 2, symbol ve use öğelerini ve bunların viewBox davranışını belirtir: https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement

Yerel işleme ve boyama

Her simge, güvenli SVG öğeleri ve özniteliklerinden oluşan bir listeden yeniden oluşturulur; böylece betikler, olay işleyicileri ve harici kaynaklar sprite'a erişemez. Üçüncü taraf simge seti dahil edilmez. SVG boyama ve currentColor, https://www.w3.org/TR/SVG2/painting.html adresinde belirtilir. Yüklenen simgelerin lisanslarından kullanıcı sorumludur.

Nasıl kullanılır?

  1. Her biri 1 MB'dan küçük, en fazla 60 SVG simgesini sürükleyip bırakın.
  2. Temizlenmiş önizlemeleri inceleyin ve isteğe bağlı olarak fill değerlerini currentColor'a dönüştürün.
  3. Sprite'ı indirin ve kullanım kodunu kopyalamak için bir simge seçin.

Gizlilik ve sınırlamalar

SVG dosyalarınız yerel kalır. Araç, gömülü URL'lere erişmez veya simgeleri yüklemez.

İlgili araçlar

SVG DüzenleyiciSVG TemizleyiciSVG'den JSX'e

Sık sorulan sorular

Sprite'ı nasıl kullanırım?

Sayfada gizli bir kapsayıcıya SVG'sini bir kez ekleyin, ardından kopyalanan satır içi kod parçacıklarını kullanın. Ayrı bir dosya için bunun yerine href olarak sprite.svg#id kullanın.

viewBox eksik olduğunda ne olur?

px birimleri dahil sayısal genişlik ve yükseklik, yeni bir viewBox tanımlar. Eksik veya desteklenmeyen boyutlar varsayılan olarak 24 birim kabul edilir. Önizleme, kırpılma olup olmadığını kontrol edebilmeniz için onarılan viewBox'ları işaretler.

Her simge görünümünü tam olarak korur mu?

Hayır. Temel şekiller, gruplar, degradeler, kırpma ve maskeler korunur; ancak script'ler, metin, gömülü görseller, use öğeleri ve desteklenmeyen stiller kaldırılır. Önizlemeyi kontrol edin. Yüklenen çalışmaların lisanslarından sorumlu olmaya devam edersiniz.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez