SVG konturları dışa aktarınca kayboluyor: Nedeni bulun

Bir SVG kontur çizgisi dışa aktarmadan sonra kaybolduğunda önce yol geometrisinin hâlâ mevcut olup olmadığını belirleyin. Kaybolmuş gibi görünen bir çizginin kontur boyası olmayabilir, arka planla aynı renkte olabilir, yeni ölçekte çok ince kalabilir, viewBox dışında durabilir veya sayfa kenarında kırpılmış olabilir. Ayrıca hedef uygulamanın anlamadığı bir fırça, değişken genişlik profili, filtre veya CSS kuralı kullanıyor olabilir.

Hemen çizimi yeniden vektörleştirmeyin veya her nesneyi genişletmeyin. Düzenlenebilir kaynağı koruyun, bir test kopyası oluşturun ve sorunlu tek bir çizgiyi ayırın. En küçük düzeltme genellikle orijinal yapının daha fazlasını korur.

Hızlı teşhis

1. Aynı SVG'yi güncel bir tarayıcıda ve bir vektör düzenleyicisinde açın.
2. Eksik çizgiyi seçin ve yoluyla düğümlerinin hâlâ mevcut olduğunu doğrulayın.
3. Test kopyasına dikkat çekici bir kontur rengi, tam opaklık ve geçici olarak daha geniş bir kontur verin.
4. Sayfa kenarından uzaklaştırın ve kırpmaları, maskeleri ve filtreleri tek tek devre dışı bırakın.
5. Dönüşümleri kaldırın veya kontur genişliğini nasıl etkilediklerini inceleyin.
6. Yalnızca bir hedef uygulamada sorun varsa desteklenmeyen görünümü teslim kopyasında değiştirin.

Dört kontur sonucu

Önce yolun hâlâ orada olup olmadığını kontrol edin

SVG'nin bir kopyasını metin düzenleyicisinde açın ve <path>, <line>, <polyline>, <circle> veya <rect> gibi sıradan şekil öğelerini arayın. Ardından eksik nesneyi vektör düzenleyicisinde seçin ve dış hat veya tel kafes görünümüne geçin.

• Dış hat görünümünde düğümler ve yol görünüyorsa geometri korunmuştur. Boyamayı, kırpmayı, dönüşümleri ve uygulama desteğini inceleyin.
• Nesne mevcut ama sınırları sayfanın çok dışındaysa geri taşıyın veya viewBox değerini düzeltin.
• Hedeflenen çizgi dolgulu kapalı bir şekle dönüşmüşse zaten dolgulu dış hat geometrisine dönüştürülmüş olabilir.
• Karşılık gelen geometri yoksa kaynak belgeyi ve dışa aktarma ayarlarını inceleyin. Dışa aktarıcı desteklenmeyen bir nesneyi atlamış olabilir.

Düzenlemeden önce iki işleyiciyi karşılaştırın. Chrome'da görünür olup masaüstü düzenleyicisinde kaybolan bir kontur, içe aktarma sınırlamasına veya CSS bağımlılığına işaret eder. Her yerde kaybolan bir çizginin nedeni daha çok geçersiz boyama, kırpma, hatalı sınırlar veya eksik geometridir. Yalnızca çizgiler değil belgenin tamamı boşsa daha kapsamlı boş SVG teşhisini izleyin.

Kontur özellikle Penpot'ta kayboluyorsa teslim aşamasını ayırmak için Penpot SVG içe aktarma kontrollerini kullanın.

Neden 1: Konturun görünür boyası yok

SVG, dolgu ve konturu ayrı boyama özellikleri olarak ele alır. Bir yol, çizgi göstermeden de mevcut olabilir. MDN'nin dolgu ve kontur rehberi, stroke, stroke-width ve opaklık dâhil temel özellikleri ele alır.

Seçili nesneyi ve devraldığı stilleri şu açılardan inceleyin:

• stroke="none";
• eksik stroke ile birlikte fill="none";
• stroke-width="0" veya son derece küçük bir genişlik;
• opacity="0" veya stroke-opacity="0";
• sayfayla veya çevredeki şekille aynı kontur rengi;
• nesnede ya da üst grupta display="none" veya visibility="hidden";
• sunum özniteliklerini geçersiz kılan bir CSS sınıfı.

Test kopyasında doygun bir renk atayın, opaklığı %100 yapın ve konturu birkaç kat genişletin. Kalın bir dış hat dolgulu harflerin yüzeyini kapatıyorsa yolları değiştirmeden önce kontur ve dolgu için SVG boyama sırasını karşılaştırın. Arkasına kontrast oluşturan bir dikdörtgen yerleştirin. Çizgi görünürse hedeflenen rengi geri yükleyin ve teslim boyutunda okunaklı kalan bir genişlik seçin.

Öğede tanımlanan bir stilin daha özel bir stil dosyası kuralı tarafından yine de geçersiz kılınabileceğini unutmayın. İşaretleme bir şey söylerken tarayıcı başka bir şey çiziyorsa tarayıcı geliştirici araçlarında hesaplanmış stili inceleyin.

Neden 2: Çizgi sayfa veya çerçeve kenarında kırpılıyor

Kontur, merkez yolunun iki tarafına da uzanır. Bu merkez viewBox sınırında duruyorsa konturun yarısı görünüm alanının dışında kalabilir. Kalın çizgi, kare uç, sivri birleşim, bulanıklık veya gölge; yolun yalın koordinatlarının gösterdiğinden daha fazla alan gerektirir. SVG boyama belirtimi, kontur genişliğinin, uçların, birleşimlerin ve sivri birleşim sınırlarının boyanan sonucu yolun etrafına nasıl genişlettiğini tanımlar. Kapalı bir şekil çizginin tamamen yolun içinde veya dışında olmasını gerektiriyorsa çalışma yüzeyini yeniden boyutlandırmadan önce boyanan alanını karşılaştırmak için iç veya dış kontur hizalama rehberini kullanın.

Nesneyi içeri taşıyarak veya viewBox değerini geçici olarak büyüterek bunu test edin. Eksik bölüm geri gelirse görünür çizimin çevresine bilinçli bir kenar payı ekleyin. Tuvali körü körüne genişletmeye devam etmeyin; en büyük kontur genişliği, uçlar, birleşimler ve efektler için yeterli alanı hesaplayın.

clipPath ve mask başvurularını da inceleyin. Dolgu sınırlarına göre boyutlandırılmış bir kırpma, bunların dışına uzanan konturu kesebilir. İç içe SVG öğeleri kendi görünüm alanlarını oluşturabilir ve overflow davranışı tarayıcıyla tasarım aracı içe aktarıcısı arasında farklı olabilir.

Yalnızca bir köşe kayboluyorsa yüksek bir stroke-miterlimit değerinin etkileşimini araştırın. Keskin bir sivri birleşim yolun çok ötesine uzanabilir. Birleşimi yuvarlak veya pahlanmış yapmak, görünüm alanını büyütmekten daha uygun olabilir; ancak yalnızca hedeflenen tasarımı koruyorsa.

Neden 3: Ölçekleme veya dönüşümler konturu yanıltıcı hâle getirdi

Bir dönüşüm hem nesnenin geometrisini hem de görünen konturunu değiştirebilir. Oluşturma boyutunda rahatça görülen bir çizgi, özellikle alıcı uygulama birimleri veya iç içe dönüşümleri farklı yorumluyorsa, içe aktarma sonrasında kılcal derecede ince hâle gelebilir.

SVG'de yol ve üst gruplarındaki transform="scale(...)" ifadelerini inceleyin. Belgenin viewBox, width ve height değerlerini karşılaştırın, ardından %100 yakınlaştırmada ve son fiziksel boyutta test edin. Tasarımın tamamı yanlış boyutlarda içe aktarılıyorsa rastgele kontur genişlikleriyle telafi etmek yerine bilinen boyutlu SVG ölçek testini kullanarak belge eşlemesini düzeltin.

SVG ayrıca vector-effect="non-scaling-stroke" özelliğini destekler. MDN vector-effect referansının açıkladığı gibi yaygın non-scaling-stroke değeri, işlenen kontur genişliğinin öğenin dönüşümlerini takip etmesini önler. Bu, arayüz diyagramları ve haritalar için kullanışlı olabilir; tarayıcı dışındaki destek uygulamaya göre değiştiğinden sonucu hedef içe aktarıcıda doğrulayın.

non-scaling-stroke özelliğini her duruma uygun çözüm olarak eklemeyin. Çizginin çizimle birlikte ölçeklenip ölçeklenmemesi gerektiğine karar verin. Logo baskı için büyütülüyorsa konturları genellikle onunla birlikte büyümelidir. Harita çizgisinin yakınlaştırma sırasında bir ekran pikseli olarak kalması gerekiyorsa ölçeklenmeyen kontur bilinçli bir seçim olabilir.

Neden 4: Hedef uygulama görünümü yeniden üretemiyor

Tasarım uygulamasında görünen her çizgi sıradan bir SVG konturu değildir. Basınca duyarlı fırça, değişken genişlik profili, desen fırçası, canlı efekt, harmanlama, filtre veya uygulamaya özgü bir görünüm yığını olabilir. Dışa aktarıcı bu yapıyı yaklaşık olarak temsil edebilir ve ikinci uygulama bu yaklaşımı yok sayabilir.

Bir kopyada sadeleştirme testi yapın:

1. temel konturu koruyarak filtreyi kaldırın;
2. desen veya fırçayı düz, tek renkli bir konturla değiştirin;
3. değişken genişliği kaldırın;
4. iç içe dönüşümleri düzleştirin;
5. tek nesneyi en basit SVG olarak dışa aktarın;
6. o dosyayı hedef uygulamada açın.

Çizgiyi geri getiren ilk sadeleştirme desteklenmeyen özelliği belirler. Böylece belgenin tamamını düzleştirmek yerine taşınabilir bir alternatif seçebilirsiniz.

Harici CSS ve kaynaklar başka bir taşınabilirlik riskidir. Web sitesine gömülü SVG, sayfadan bir sınıf kuralı veya özel özellik devralabilirken aynı dosya tek başına açıldığında bunları alamaz. Tersine, masaüstü düzenleyicisi nesne modeline eşleyemediği seçicileri atabilir. Bağımsız bir teslim dosyası için hedef uygulamanın içe aktardığı gösterilmiş, kendi içinde yeterli stiller kullanın.

Düzenlenebilir kontur mu, dış hat yolu mu?

Düzenlenebilir kontur; düzenlenebilir merkez yolu ile genişlik, uç, birleşim, kesikli çizgi ve boyama ayarlarını korur. Küçüktür ve ayarlanması kolaydır. Dış hatlara dönüştürülmüş kontur, görünür şeridi dolgulu yol geometrisine dönüştürür. Bu, görünümü sabitler ancak orijinal merkez çizgisinden ve kontur kontrollerinden vazgeçirir.

Hedef uygulama gerekli bir fırça veya değişken genişlik görünümünü koruyamıyorsa ya da sağlayıcı açıkça dolgulu geometri istiyorsa bir teslim kopyasını dış hatlara dönüştürün. Adobe'nin Expand objects belgeleri, konturları bileşen nesnelerine genişletmeyi açıklar.

Düzenlenebilir konturlu ana dosyayı saklayın; çünkü genişletme:

• düğüm sayısını ve dosya boyutunu artırabilir;
• genişlik değişikliklerini yavaşlatabilir;
• örtüşmeleri karmaşık geometriye dönüştürebilir;
• birleştirilmesi gereken ayrı parçalar oluşturabilir;
• çizici, gravür veya animasyon için açık yolların anlamını değiştirebilir.

Kalemli çizici veya gravür iş akışı, aracın merkez yolunu bir kez takip etmesini bekliyorsa genişletme özellikle tehlikelidir. Dış hatlara dönüştürülmüş kontur makineye iki sınır verir. Bu iş akışında bunun yerine tek çizgili SVG rehberini kullanın.

Çözümü hedef uygulamaya göre seçin

Yalnızca aynı sağlayıcının başka bir düzenleyicisini değil, tam olarak hedef uygulamayı test edin. Tarayıcı, tasarım tuvali, baskı hattı, kesici ve CAD içe aktarıcısı SVG'nin farklı alt kümelerini destekleyebilir.

Güvenli bir düzeltme sırası

Geri alınabilir kontrollerden yapısal dönüşüme doğru ilerleyin:

1. düzenlenebilir kaynağı koruyun ve bir kopya oluşturun;
2. geometrinin mevcut olduğunu doğrulayın;
3. iki işleyiciyi karşılaştırın;
4. açıkça atanmış kontur boyasını, genişliğini ve opaklığını test edin;
5. arka plan kontrastını ve devralınan CSS'i kontrol edin;
6. sayfa sınırlarını, kırpmaları, maskeleri ve iç içe görünüm alanlarını inceleyin;
7. dönüşümleri ve son boyutta işlenen görüntüyü inceleyin;
8. desteklenmeyen görünümleri tek tek sadeleştirin;
9. teslim kopyasında yalnızca gerekli konturları dış hatlara dönüştürün;
10. teslim edilen SVG'yi yeniden açın ve kaynakla karşılaştırın.

Düzgün yollar korunmuşken rasterleştirmeyi ara çözüm olarak kullanmayın. Korumaya çalıştığınız geometriyi kaldırır ve köşeleri yumuşatabilen, eğrileri değiştirebilen, gereksiz düğümler oluşturabilen bir vektörleştirme adımı ekler.

PerfectVector nerede devreye girer?

PerfectVector yalnızca orijinal vektör geometrisi kaybolmuş veya kullanılamaz durumdaysa ve geriye kalan en iyi kaynak raster görüntüyse kullanışlıdır. Uygun düz renkli logo, simge veya illüstrasyonu düzenlenebilir vektör şekiller olarak yeniden oluşturabilir.

CSS'i düzeltmez, atlanmış düzenlenebilir konturu geri getirmez veya desteklenmeyen fırçayı düzenlenebilir merkez çizgisini koruyarak dönüştürmez. Yol hâlâ mevcutsa vektör düzenleyicisinde boyamasını, sınırlarını, dönüşümlerini veya görünümünü düzeltin. Bu, ekran görüntüsünü vektörleştirmekten daha fazla bilgiyi korur.

Sık sorulan sorular

SVG konturları dışa aktarmadan sonra neden kaybolur? Yol hâlâ mevcut olabilir ancak görünür konturu olmayabilir, opaklığı sıfır olabilir, arka planla aynı renkte olabilir, aşırı ince olabilir, kırpılmış olabilir, ölçek sorunu yaşayabilir veya hedef uygulamanın içe aktaramadığı bir görünüme sahip olabilir. Önce geometriyi doğrulayın, ardından boyamayı, sınırları, dönüşümleri ve desteği ayrı ayrı inceleyin.

Yolun hâlâ mevcut olduğunu nasıl anlarım? Eksik nesneyi vektör düzenleyicisinde seçin ve dış hat veya tel kafes görünümüne geçin. SVG'yi metin olarak açıp karşılık gelen yol ya da şekil öğesini de arayabilirsiniz. Düğümlerin mevcut ama çizginin görünmez olması, eksik geometri yerine görüntüleme veya biçimlendirme sorununa işaret eder.

Kontur SVG'nin kenarında neden kırpılır? Kontur merkez yolunun ötesine uzanır; bu nedenle viewBox sınırındaki bir yol genişliğinin yarısını kaybedebilir. Uçlar, birleşimler, filtreler, kırpmalar ve maskeler de ek pay gerektirebilir. Yolu içeri taşıyın veya görünüm alanını ve kırpmayı görünümün tamamını kapsayacak şekilde bilinçli olarak boyutlandırın.

Dışa aktarmadan önce SVG konturlarını genişletmeli miyim? Yalnızca hedef uygulama gerekli kontur görünümünü koruyamıyorsa veya açıkça dolgulu geometri istiyorsa genişletin. Bir teslim kopyasını genişletin ve düzenlenebilir konturlu ana dosyayı saklayın. Genişletme geometri ekler ve çizici veya gravür aracının tek bir merkez çizgisini takip etmesi gerektiğinde uygun değildir.

PerfectVector eksik bir SVG konturunu geri getirebilir mi? Yolu veya stili yalnızca düzeltme gerektiren bir SVG'den geri getiremez. PerfectVector, orijinal vektör geometrisi mevcut olmadığında geriye kalan en iyi rasterdan görünür çizimi yeniden oluşturabilir; ancak CSS'i, fırça ayarlarını veya orijinal düzenlenebilir merkez yolunu geri getirmez.

Kaynaklar

1. W3C — SVG 2 Painting — dolgu, kontur, kontur genişliği, uçlar, birleşimler ve vektör efektlerini tanımlar.
2. W3C — SVG 2 Coordinate Systems — görünüm alanlarını, viewBox, birimleri ve dönüşümleri belgeler.
3. MDN — vector-effect — non-scaling-stroke davranışını açıklar.
4. Adobe Illustrator — Group and expand objects — konturların düzenlenebilir bileşen nesnelerine genişletilmesini belgeler.

---

Orijinal vektör geometrisi kaybolmuşsa ve geriye kalan en iyi kaynak rastersa çizimi PerfectVector ile temiz vektör yollar olarak yeniden oluşturun, ardından hedef uygulamada doğrulayın. Yollar hâlâ mevcutsa yeniden vektörleştirmek yerine SVG'yi düzeltin.