Her gün elinin altında olan geliştirici araçları, hepsi tek yerde.

Dönüştürücüler, formatlayıcılar, hash'ler, doğrulayıcılar ve sürekli yeniden açtığın küçük yardımcılar sekmeler arasında kaybolmak yerine bir arada duruyor.

GitHub

/ Araçlar

■

/ Araç Bulucu

109 araç

/ SVG Görüntüleyici

SVG Kodu

Önizleme Genişliği (px)

Önizleme Yüksekliği (px)

/ Seçili Araç

■

SVG Görüntüleyici - ücretsiz formatlayıcı aracı

SVG kodunu sözdizimi vurgulamasıyla görüntüleyin ve önizleyin

■ 01

SVG Nedir?

SVG (Scalable Vector Graphics), iki boyutlu grafikler için XML tabanlı bir vektör görsel formatıdır. Raster görsellerin aksine, SVG'ler kalite kaybı olmadan herhangi bir boyuta ölçeklenebilir, bu da onları logolar, ikonlar ve illüstrasyonlar için ideal kılar…

■ 02

Nasıl çalışır?

SVG kodunuzu metin alanına yapıştırın. Araç, canlı bir önizleme oluşturur ve kodu sözdizimi vurgulamasıyla görüntüler. SVG'nin nasıl ölçeklendiğini görmek için önizleme boyutlarını ayarlayın. SVG kodunu kopyalamak için Kopyala düğmesini kullanın…

■ 03

Örnek Durumlar

Basit daire ve Path öğesi durumlarını kapsar, böylece yaygın girdileri ve çıktıları hızlıca karşılaştırabilirsiniz.

/ İlgili Araçlar

/ Kod

■

Seçili araca ait kaynak kodu; sağdaki canlı sürümün yanında burada gösteriliyor.

/ Kaynak Kodu

TypeScript

typescript

// No external dependencies needed - SVG is native to browsers

// Create an SVG programmatically
function createSvg(width: number, height: number): string {
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
  <!-- Add your SVG elements here -->
</svg>`;
}

// Example: Create a circle SVG