Softonic

SVG Yol Oluşturucu

Adım 1 / 2

Boş alana tıklayarak nokta ekleyin. Noktaları sürükleyerek taşıyın. Sonuncuyu düğmeyle kaldırın.

Sonraki

Bir SVG <path>‘inin d özniteliği minik, alana özgü bir dildir: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Her harf bir komuttur (moveto, lineto, kübik Bézier, close-path), her sayı bir koordinat veya kontrol noktasıdır. Bu oluşturucu, tuvale tıklayarak çapa noktaları yerleştirmenize ve onları sürükleyerek yeniden şekillendirmenize olanak tanır; yol gerçek zamanlı olarak çizilir. Düz parçaları kübik Bézier eğrilerine dönüştürmek için yumuşatmayı açın, şekli kapatın, ardından oluşturulan d özniteliğini ya da SVG’nin tamamını kopyalayın.

Bir yol nasıl oluşturulur

  1. 1

    Nokta eklemek için tıklayın

    Her tıklama tuvale bir çapa noktası yerleştirir; yol, bir `M` (moveto) ile başlayarak bunları sırayla birleştirir.

  2. 2

    Yeniden şekillendirmek için sürükleyin

    Herhangi bir noktayı sürükleyerek taşıyın ve en sonuncusunu düğmeyle silin. En az iki nokta gerekir.

  3. 3

    Düz veya yumuşak

    Noktaları düz `L` parçalarıyla bağlı bırakın ya da onları kübik Bézier eğrilerine `C` dönüştürmek için Yumuşatma'yı açın.

  4. 4

    Kapatın veya açık bırakın

    Başa dönen bir `Z` eklemek için Yolu kapat'ı açın ya da bir polyline/çizgi için açık bırakın.

  5. 5

    d özniteliğini kopyalayın

    Oluşturulan `d` dizesi temiz ve boşlukla ayrılmıştır, herhangi bir SVG'ye yapıştırmaya hazırdır; ayrıca SVG'nin tamamını kopyalayabilir veya indirebilirsiniz.

SVG yol komutu kopya kâğıdı

Yukarıdaki görsel oluşturucu M, L, C ve Z komutlarını (moveto, düz çizgi, kübik Bézier ve close-path) üretir. Aşağıdaki komut kümesinin geri kalanı, başka bir yere yapıştırdığınız herhangi bir d dizesini okumak ve elle düzenlemek için bir başvuru kaynağıdır. Büyük harfler mutlak koordinatları kullanır; küçük harfler mevcut kalem konumundan göreli ofsetleri kullanır.

Komut Adı Sözdizimi
M / m Moveto M x y
L / l Lineto L x y
H / h Yatay lineto H x
V / v Dikey lineto V y
C / c Kübik Bézier C x1 y1 x2 y2 x y
S / s Yumuşak kübik Bézier S x2 y2 x y
Q / q İkinci dereceden Bézier Q x1 y1 x y
T / t Yumuşak ikinci dereceden Bézier T x y
A / a Arc (yay) A rx ry x-eksen-dönüş lg sweep x y
Z / z Closepath Z

Çözümlü bir örnek: yuvarlatılmış bir onay işareti

M 4 12 L 10 18 L 20 6

Üç komut: (4, 12)’ye git, (10, 18)’e çizgi, (20, 6)’ya çizgi. Yola stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" ekleyin; temiz bir onay işareti glifiniz olur.

Arc komutu en zorudur

A rx ry x-eksen-dönüşü büyük-yay-bayrağı sweep-bayrağı x y yedi sayı alır:

  • rx, ry, elips yarıçapları
  • x-eksen-dönüşü, elipsin derece cinsinden dönüşü
  • büyük-yay-bayrağı, kısa yay için 0, uzun yay için 1
  • sweep-bayrağı, saat yönünün tersi için 0, saat yönü için 1
  • x, y, bitiş noktası

Aynı iki uç noktanın dört farklı şekilde nasıl bağlanabileceğini görmek için bayrakları teker teker değiştirin.

İpuçları

  • Sayıları küçük ve yuvarlak tutun. Koordinatları piksel ızgarasına veya yarım piksele hizalayın; 17 ondalık basamaktan kaçının.
  • Yolunuz bağımsız olduğunda büyük harf komutlarını tercih edin. Küçük harf (göreli), yolu daha sonra öteleyecekseniz kullanışlıdır.
  • Yalnızca dolduğunuzda kapatın. Bir yol kesinlikle çizgiyse, Z görsel bir değişiklik eklemez ve bir bayt tasarruf eder.
  • SVGO’dan geçirin. Sondaki sıfırlar, çift boşluklar ve tekrarlanan komutlar güzelce çöker.

Sık Sorulan Sorular

d içindeki koordinatlar viewBox ile aynı birimlerdedir. viewBox="0 0 24 24" için tasarlanmış bir yol viewBox="0 0 100 100" üzerine yerleştirildiğinde sol üst çeyrekte görünür. Ya koordinatları ölçeklendirin ya da viewBox’ı yeniden boyutlandırın.

Yolu ötelemeyi veya tekrarlamayı planladığınızda. Göreli komutlar şekli taşınabilir tutar, herhangi bir yere yeni bir M ekleyebilirsiniz ve aşağı akıştaki her şey onunla birlikte hareket eder.

Evet. <polyline points="0,0 10,10 20,0">, <path d="M 0 0 L 10 10 L 20 0" /> olur. Bir çokgen sona bir Z ekler. Çoğu optimize edici bunu otomatik yapar çünkü yollar daha iyi sıkışır.

Çizim efektleri için CSS stroke-dasharray + stroke-dashoffset kullanın. Bir öğeyi yol boyunca hareket ettirmek için yol id’sine işaret eden href ile SMIL <animateMotion> kullanın.

Hayır. Yol komutları tarayıcıda hesaplanır ve hiçbir yere gönderilmez.

İ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