SVG'yi React bileşenine nasıl dönüştürürüm?

Dosyayı yapıştırın ve React çıktısını seçin. Öznitelikler JSX biçimlerine çevrilir, işaretleme bir bileşene sarılır ve props aktarılır; böylece boyut ve renk çağrı yerinden ayarlanabilir. Hiçbir şey yüklenmez, dönüştürme sekmenin içinde çalışır.

Neden yolları birleştirmiyor veya dönüşümleri düzleştirmiyor?

Çünkü bunlar bayt kazandırır ama dosyanın görünümünü değiştirebilir ya da başka bir şeyin başvurduğu bir id'yi bozabilir. Farklı görünen daha küçük bir simge kazanç değildir; bu yüzden optimize edici bunu riske atan her şeyden önce durur.

SVG'yi Android VectorDrawable'a dönüştürür mü?

Evet. VectorDrawable yalnızca yolları çizdiği için dikdörtgenler, daireler ve çokgenler önce yola dönüştürülür. Gradyanların, filtrelerin ve metnin karşılığı yoktur; sessizce silinmek yerine bildirilir.

Frontend StüdyosuSVG araç setiAracı değiştir

SVG araçları

Bir SVG'nin içindeki editör artıklarını silin, sayılarını yuvarlayın, sonra onu React, Vue, React Native, Flutter ya da Android bileşeni olarak alın. Her şey bu sekmede olur; dosya hiçbir yere yüklenmez.

Çıktılar: 10 biçim
Dosyanız: Sekmeden asla çıkmaz
Tipik kazanç: Baytların %40-60'ı

SVG'niz

Kodu yapıştırın ya da bir .svg dosyasını kutuya bırakın.

Bileşen adıÜretilen bileşenin adını belirler, örn. Icon.Ondalık basamak: 2Daha az basamak, daha küçük dosya. Simgeler için iki basamak güvenlidir.

Daha fazla temizleme seçeneği

Kullanılmayan id'leri kaldırBaşvurulan id'ler her zaman korunur.Genişlik ve yüksekliği kaldırSimgenin boyutunu CSS'e bırakır. viewBox korunur.

Önizleme

560 B → 272 B, %51 daha küçük

Arka plan

1 yorum kaldırıldı
3 editör özniteliği kaldırıldı

Çıktı

Bir biçim seçin, sonra kodu kopyalayın veya indirin.

272 B · Icon.svg

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g><circle cx="24" cy="24" r="20" fill="#2563eb"/><path d="M16 24.5L21.5 30L33 17.5" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

Hiçbir şey yüklenmedi; dönüştürme bu sekmede çalıştı.

Optimize edici neleri siler

Yorumları, meta veri bloklarını, çizim programlarının geride bıraktığı ad alanlı öznitelikleri ve boş grupları. Sayılar seçtiğiniz hassasiyete yuvarlanır; dosyada yoksa bir viewBox eklenir.

Bilerek yapmadıkları

Yolları birleştirmez, dönüşümleri düzleştirmez ve başka bir şeyin başvurduğu id'leri silmez. Bunlar bayt kazandırır ama dosyanın görünümünü değiştirebilir; farklı görünen daha küçük bir simge kazanç sayılmaz.

Android çıktısı hakkında

VectorDrawable yalnızca yolları çizer; bu yüzden dikdörtgenler, daireler ve çokgenler önce dönüştürülür. Gradyanların, filtrelerin ve metnin karşılığı yoktur; bunlar sessizce silinmek yerine bildirilir.

Sıkça sorulan sorular

SVG'yi React bileşenine nasıl dönüştürürüm?: Dosyayı yapıştırın ve React çıktısını seçin. Öznitelikler JSX biçimlerine çevrilir, işaretleme bir bileşene sarılır ve props aktarılır; böylece boyut ve renk çağrı yerinden ayarlanabilir. Hiçbir şey yüklenmez, dönüştürme sekmenin içinde çalışır.
Optimize edici gerçekte neleri siler?: Yorumları, meta veri bloklarını, çizim programlarının bıraktığı ad alanlı öznitelikleri ve boş grupları. Sayılar seçtiğiniz hassasiyete yuvarlanır; dosyada yoksa bir viewBox eklenir.
Neden yolları birleştirmiyor veya dönüşümleri düzleştirmiyor?: Çünkü bunlar bayt kazandırır ama dosyanın görünümünü değiştirebilir ya da başka bir şeyin başvurduğu bir id'yi bozabilir. Farklı görünen daha küçük bir simge kazanç değildir; bu yüzden optimize edici bunu riske atan her şeyden önce durur.
SVG'yi Android VectorDrawable'a dönüştürür mü?: Evet. VectorDrawable yalnızca yolları çizdiği için dikdörtgenler, daireler ve çokgenler önce yola dönüştürülür. Gradyanların, filtrelerin ve metnin karşılığı yoktur; sessizce silinmek yerine bildirilir.