Softonic

SVG Şekil Oluşturucu

Adım 1 / 2

Çoğu tasarım sistemi yalnızca küçük bir şekil sözcük dağarcığına ihtiyaç duyar: bir avatar için daire, bir durum çipi için kare, bir oynat simgesi için üçgen, bir derecelendirme için yıldız, bir rozet için altıgen. Bu oluşturucu, yedi standart şeklin (daire, kare, üçgen, yıldız, altıgen, beşgen, kalp) hepsini kusursuz şekilde kalibre edilmiş geometriyle işler, yıldız uçları doğru iç yarıçapta, altıgenler ve beşgenler ucu yukarı yönlendirilmiş, kalp tuvale ortalanmış, ve yapıştırmaya hazır <svg> çıkarır.

Bir şekil nasıl oluşturulur

  1. 1

    Bir şekil seçin

    Daire, kare, üçgen, yıldız, beşgen, altıgen veya kalp.

  2. 2

    Boyut ve çizgiyi ayarlayın

    Piksel cinsinden tuval boyutu. Çizgi kalınlığı dış hat ağırlığını kontrol eder; 0 dış hattı kaldırır.

  3. 3

    Dolgu ve çizgi rengini seçin

    Herhangi bir hex renk. İçi boş şekiller için dolguyu `none` olarak ayarlayın.

  4. 4

    Yıldızlar için noktaları ayarlayın

    Yıldız temel öğesi 3-12 nokta kabul eder. Beş klasiktir; yedi bir şerif rozeti görünümü verir.

  5. 5

    SVG'yi kopyalayın

    İşaretleme, minimum bayt için uygun SVG temel öğesini (`<circle>`, `<rect>`, `<polygon>`, `<path>`) kullanır.

Bir bakışta şekil geometrisi

Şekil SVG temel öğesi Önemli parametreler
Daire <circle> yarıçap, dolgu, çizgi
Kare <rect> genişlik, yükseklik, çizgi (burada rx yok)
Üçgen <polygon> (3 nokta) eşkenar, yukarı bakan
Yıldız <polygon> (N × 2) noktalar (3-12), iç/dış yarıçap oranı
Beşgen <polygon> (5 nokta) nokta yukarı yönlendirilmiş
Altıgen <polygon> (6 nokta) nokta yukarı yönlendirilmiş (düz için 30° döndürün)
Kalp Bézier’li <path> tuvale ortalanmış, simetrik

Örnek çıktı: beş noktalı bir yıldız

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,2 118.65,73.57 191.98,73.57 132.66,117.86 151.31,189.43 100,145.14 48.69,189.43 67.34,117.86 8.02,73.57 81.35,73.57"
    fill="#6366f1" stroke="#312e81" stroke-width="2"/>
</svg>

İç yarıçap, dış yarıçapın %40’ında sabittir, bu da bayrak ve kupa yıldızlarında kullanılan klasik orantılarla eşleşir.

Kullanım alanları

  • Avatarlar ve maskeler, profil fotoğrafları için clip-path olarak daire.
  • Durum çipleri, basit bir bayrak göstergesi olarak kare (CSS border-radius veya sonradan rx ile yuvarlatılmış).
  • Derecelendirme UI’ları, 0-5 ölçekleri için dolu, yarı dolu ve çizgili yıldızlar.
  • Rozetler ve armalar, iç metin veya simgeli altıgen.
  • Beğeni düğmeleri, beğeniler, istek listeleri ve kaydetmeler için kalp.

Neden genel bir yol yerine SVG temel öğeleri

Eşdeğer <path> yerine <circle> veya <polygon> kullanmak:

  • Basit şekiller için bayt olarak daha küçüktür (10-30 bayt).
  • Canlandırması daha kolaydır, r, cx, cy, points gibi öznitelikler CSS veya GSAP ile doğrudan tweenlenebilir.
  • İnceleyicilerde ve diff’lerde daha net okunur.

Karmaşık şekiller için (blob’lar, simgeler, logolar) yollar kazanır, çünkü tek bir öğede eğrileri ve karışık segmentleri tanımlayabilirler.

Erişilebilirlik

Oluşturulan tüm SVG’ler varsayılan olarak dekoratiftir. Şekil anlam taşıyorsa (kırmızı daire = hata, yeşil onay = başarı), onu role="img" ve bir aria-label’lı bir üst öğeyle sarın ya da SVG içine bir <title> çocuğu ekleyin.

Sık Sorulan Sorular

İç yarıçap, her kolun “tombulluğunu” belirler. Bu oluşturucu, dengeli bir görünüm için iç = dışın %40’ını kullanır. Daha keskin bir yıldız için çıktı SVG’sindeki oranı düşürün (örneğin %25); daha küt, Lego tuğlası bir yıldız için %60’a yükseltin.

Bu oluşturucu düz bir <rect> çıkarır. Köşeleri yuvarlatmak için dikdörtgene rx="8" ry="8" ekleyin ya da SVG’yi sararsanız CSS border-radius özelliğini kullanın.

Evet, SVG’yi transform: rotate(30deg)’li bir üst öğeyle sarın ya da yolu düzenleyin: başlangıç açısını 30° kaydırın. Oluşturucu, çoğu rozet tasarımıyla eşleştiği için varsayılan olarak nokta yukarıdır.

Evet. SVG uygun viewBox, tam piksel koordinatları ve minimum uzunlukta işaretleme kullanır. Onu React, Vue, Astro, e-posta veya düz HTML’e değişiklik yapmadan bırakabilirsiniz.

Hayır. Şekil parametreleri mevcut istek için SVG’yi işlemek üzere kullanılır ve atılır.

İlgili Araçlar

Çizgili Kağıt Oluşturucu

Ücretsiz yazdırılabilir çizgili kağıt oluşturun. Kolej, geniş veya dar çizgi seçin, satır aralığını mm cinsinden ayarlayın, kağıt boyutunu ve bir kenar boşluğu çizgisi belirleyin, ardından yazdırın veya SVG olarak indirin.

Material Design Renk Seçici

Material Design renk paletini gezin. Herhangi bir tonu (50'den A700'e kadar) tek dokunuşla HEX, RGB veya HSL biçiminde kopyalayın.

Kareli kağıt oluşturucu

Çevrimiçi yazdırılabilir kareli kağıt oluşturun: kare veya nokta ızgarası seçin, aralığı mm cinsinden ayarlayın, A4 veya Letter ile özel bir çizgi rengi belirleyin, ardından yazdırın veya net bir SVG indirin.

Kanaviçe Şablonu Oluşturucu

JPEG, PNG veya WebP görselini 10–150 ilmek, 2–40 özel renk, semboller, kesin sayımlar ve kumaş ölçüleri içeren yazdırılabilir kanaviçe şemasına dönüştürün.

Fotoğraflardaki Yüzleri Çevrimiçi Bulanıklaştırın

Yüzlerin veya hassas ayrıntıların üzerine kutular çizin, ardından bulanıklaştırın, pikselleştirin ya da siyah kutuyla kapatın. İşlem tarayıcıda yapılır ve sonuç JPEG olarak indirilir.

Görüntü Formatı Dönüştürücü

Görselleri doğrudan tarayıcıda JPG, PNG veya WebP biçimine dönüştürün; kayıplı biçimlerde kaliteyi siz kontrol edin, PNG ve WebP'de şeffaflık korunur.

Araç diğer dillerde mevcuttur