CodeKitHubBu Araç Nedir?
Bazı işleme (rendering) hatları — belirli ikon fontu üreticileri, bazı oyun motorları, eski PDF dışa aktarıcıları ve yalnızca dolguları birleştiren araçlar — SVG konturlarını doğru şekilde işlemez ya da hiç işlemez. Bir konturu aynı genişlikte dolgulu bir şekle dönüştürmek bu sorunu tamamen ortadan kaldırır: görsel sonuç aynı görünür, ancak konturlu bir çizgi yerine tek bir dolgulu yol olarak ifade edilir.
Bu araç, her şeklin dış hattı boyunca birçok nokta örnekleyerek (tarayıcının kendi yol uzunluğu API'sini kullanarak, SVG animasyonunun kullandığı aynı mekanizma) ve her iki tarafta kontur genişliğinin yarısı kadar ofsetli iki paralel çizgi oluşturarak, ardından bunları tek bir dolgulu poligonda kapatarak çalışır.
Neden Kullanmalısınız?
- Yalnızca <path> değil, path, line, polyline, polygon, rect, circle ve ellipse öğelerinde tek, birleşik bir örnekleme yöntemiyle çalışır.
- Şeklin kendi dolgusunu (varsa) yeni kontur-dolgusunun altında ayrı bir katman olarak korur, böylece hem dolgulu hem konturlu şekiller doğru şekilde dönüştürülür.
- Sonucu kopyalamadan önce dönüşümü görsel olarak onaylayabilmeniz için yan yana önce/sonra önizlemesi.
- Tamamen tarayıcınızda çalışır — yapıştırdığınız SVG hiçbir yere yüklenmez.
- Ücretsiz, anında, tarayıcınızın işleyebileceğinin ötesinde bir dosya boyutu sınırı yoktur.
Nasıl Kullanılır
- SVG kodunuzu metin kutusuna yapıştırın (çalışan bir örnek önceden doldurulmuştur).
- "Konturları dolgulara dönüştür" düğmesine tıklayın.
- Sonucun doğru görünüp görünmediğini onaylamak için önce/sonra önizlemesini karşılaştırın.
- Dönüştürülmüş, kontursuz kodu kopyalamak için "SVG'yi kopyala"ya tıklayın.
Örnek
Giriş
<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>Çıkış
Dış hattı orijinal eğrinin her iki tarafını 12 birim aralıkla izleyen, hiçbir stroke özniteliği olmayan tek bir <path fill="#3B82F6">.Eğrinin şekli korunur çünkü araç yalnızca kontrol noktalarını değil, gerçekten işlenen yol boyunca sürekli olarak noktaları örnekler.
Sıkça Sorulan Sorular
Neden keskin köşeler sivri (gönye) yerine yuvarlak çıkıyor?
Bu, örnekleme yaklaşımının bilinen, kasıtlı bir basitleştirmesidir: bir yol boyunca yoğun nokta örneklemesi, orijinal stroke-linejoin veya stroke-linecap değeri ne olursa olsun doğal olarak yuvarlak birleşimler ve uç kapaklar üretir. Tam gönye veya pah birleşimlerini yeniden oluşturmak, bu aracın uygulamadığı farklı, daha karmaşık bir algoritma (her köşede çizgi parçası kesişimi) gerektirir. Çoğu ikon ve illüstrasyon kullanım durumunda görsel fark küçüktür, ancak tam gönye birleşimlerine ihtiyacınız varsa, özel bir vektör düzenleyicinin "outline stroke" özelliği daha hassas olacaktır.
Bu araç kesikli çizgileri (stroke-dasharray) destekliyor mu?
Hayır — araç her konturu düz (solid) olarak ele alır ve stroke-dasharray/stroke-dashoffset'i yok sayar. Kesikli bir kontur, düzmüş gibi dönüştürülür ve bu görünümünü değiştirir. SVG'niz kesikli konturlar kullanıyorsa, bu araç o belirli şekiller için doğru seçim değildir.
Neden hiçbir şey dönüştürülmedi?
Araç yalnızca hem bir kontur rengine ("none" olmayan) hem de pozitif bir stroke-width'e sahip öğeleri dönüştürür; bunlar öznitelik olarak veya öğenin kendi stilinde ayarlanmış olmalıdır. SVG'niz konturu tarayıcının bu aracın izole önizlemesi içinde çözemeyeceği harici bir CSS sınıfı üzerinden veya sınıflara referans veren bir <style> bloğu üzerinden ayarlıyorsa, hesaplanan stil doğru şekilde çözülemeyebilir — bunun yerine stroke ve stroke-width'i şeklin doğrudan öznitelikleri olarak ayarlamayı deneyin.
Konturları ne zaman dolgulara dönüştürmeliyim, ne zaman konturları korumalıyım?
Hâlâ tasarım aşamasındaysanız konturları koruyun — stroke-width, dönüşümden sonra kaybedeceğiniz tek bir sayı olarak düzenlenebilir kalır. Konturları hatalı işleyen bir iş akışına (ikon fontu üreticileri, bazı oyun motorları veya PDF dışa aktarıcıları) dışa aktarıyorsanız, son dışa aktarma adımı olarak dönüştürün ve dönüşüm tek yönlü olduğu için orijinal konturlu dosyayı düzenlenebilir kaynağınız olarak saklayın.
Dönüştürme SVG dosyasını büyütür mü?
Genellikle evet — birkaç kontrol noktasıyla tanımlanan tek bir konturlu eğri, yüzlerce örneklenmiş çizgi parçasından oluşan dolgulu bir dış hatta dönüşür, bu yüzden yol verisi önemli ölçüde büyür. İkonlar için bu pratikte nadiren önemlidir, ancak boyut önemliyse, koordinat hassasiyetini azaltmak için dönüştürülmüş çıktıyı daha sonra bir SVG optimize edicisinden geçirin.
stroke-opacity dönüştürülen dolguya aktarılıyor mu?
Hayır — dönüştürülen yol, konturun rengini dolgusu olarak alır ancak tam opaklıkla; orijinal şekildeki stroke-opacity değeri düşürülür. Şeffaflığın korunmasına ihtiyacınız varsa, çıktıyı kopyaladıktan sonra dönüştürülen yola manuel olarak aynı değerle fill-opacity ekleyin.