Softonic

SVG Daire Metni Oluşturucu

Adım 1 / 2
Sonraki

Dairesel bir yol üzerindeki metin rozet, mühür ve logolarda sık görülen bir ayrıntıdır. SVG bunu <textPath> ile yapar: metin öğesi görünmez bir yolu izler. Bu araç tarayıcıda eksiksiz bir SVG oluşturur. Metni girin; yarıçapı, yazı boyutunu, harf aralığını, başlangıç konumunu, rengi ve yol yönünü ayarlayın. Ardından SVG’yi kopyalayın veya indirin.

Metin bir dairenin etrafında nasıl kavislendirilir

  1. 1

    Metni yazın

    Kısa ifadeler (3-8 kelime) en iyi okunur; uzun cümleler küçük bir yarıçapta kendi üzerinden taşar.

  2. 2

    Yarıçapı ayarlayın

    Daha büyük yarıçap = daha yumuşak kavis = daha okunaklı harfler. Çok küçükse harfler ağır şekilde eğilir.

  3. 3

    Başlangıç noktasını taşıyın

    İlk karakteri yol boyunca taşımak için Başlangıç ofseti % ayarını kullanın. Bu, serbest açı döndürmesi değil, yol üzerindeki bir konumdur.

  4. 4

    Boyutu, aralığı ve yönü ayarlayın

    Kullanılabilen kontroller yazı boyutunu, harf aralığını, rengi ve yolun saat yönünde veya tersindeki yönünü değiştirir.

  5. 5

    SVG'yi kopyalayın

    Çıktı; görünmez yolu, `<textPath>`'i ve yazı tipi stilini içerir, herhangi bir sayfaya bırakmaya hazırdır.

textPath perde arkasında nasıl çalışır

<svg viewBox="0 0 300 300">
  <defs>
    <path id="ring" d="M 150,150 m -100,0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0" />
  </defs>
  <text font-family="Inter" font-size="24" font-weight="700">
    <textPath href="#ring" startOffset="50%" text-anchor="middle">
      CDEM SOLUTIONS . EST 2024 .
    </textPath>
  </text>
</svg>

d özniteliği, tam bir daire çizmek için m/a (moveto / arc) komutlarını kullanır. <textPath> ardından karakter dizisini onun boyunca yerleştirir. startOffset, yol boyunca bir yüzdedir; text-anchor="middle" ise metni o ofsette ortalar.

Yarıçap ve okunabilirlik

Yarıçap (px) His Şunun için iyi
40-60 Çok dar, bozuk Yalnızca soyut logolar
80-120 Klasik rozet Uygulama simgeleri, madeni paralar
140-200 Yumuşak kavis Kahve logoları, armalar
250+ Neredeyse düz Başlık dekorasyonu

Yaygın ön ayarlar

  • Üst kavis, 180°’de başlayın, dairenin 180°’sini kaplayın. Üst yarı soldan sağa okunur.
  • Çevirmeli alt kavis, yol yönünü tersine çevirin veya metnin baş aşağı doğru okunması için side="right" kullanın.
  • Tam halka, metin bir kez döner. Birleşme noktası rahatsız edici olmasın diye baş ve son boşluğu (.) ekleyin.

Dışa aktarma ipuçları

  • Satır içi SVG, dolguyu currentColor veya bir CSS özel özelliğiyle temalandırmanıza izin verir.
  • SVG içine bir web yazı tipi gömmekten kaçının, bunun yerine onu global CSS’inizde bildirin, böylece tarayıcı yüklemeyi yeniden kullanır.
  • Statik bir görsele (PNG, favicon) ihtiyacınız varsa, SVG’yi ihtiyacınız olan son boyutta bir rasterleştiriciden geçirin; SVG kayıpsız ölçeklenir ama bazı platformlar yine de bir bitmap ister.

Sık Sorulan Sorular

Varsayılan olarak textPath yol yönünü izler. Saat yönünde çizilen bir daire, alt yarıyı baş aşağı koyar. Ya alt yarıyı ayrı bir saat yönünün tersine kavis olarak çizin, side="right" (SVG 2) kullanın ya da metni iki öğeye bölün.

Evet. Oluşturulan <text> öğesi standart SVG/CSS özniteliklerini kabul eder: fill, font-weight, font-style, letter-spacing. Bunları satır içinde veya harici CSS ile değiştirin.

<textPath>, on yılı aşkın süredir Chrome, Firefox, Safari ve Edge’de desteklenir. IE11’in kısmi desteği vardır; hâlâ ihtiyacınız varsa rozeti önceden rasterleştirin.

Metin öğesine letter-spacing="2" (veya daha fazlasını) ekleyin. Dar bir yarıçapta bu, okunabilirliği önemli ölçüde artırabilir.

Hayır. Metin ve SVG tarayıcınızda oluşturulur. İfade sunucuya gönderilmez veya saklanmaz.

İ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