SVG renkleri dışa aktarınca neden değişir? Nedeni bulun

Kaynak görünüm ve teslim edilen dosya farklı biçimlerde yorumlandığında SVG'nin rengi dışa aktarmadan sonra değişir. Dışa aktarıcı renk değerlerini dönüştürebilir. Bir web sitesi CSS aracılığıyla fill değerini geçersiz kılabilir veya currentColor değerini bir üst öğeden alabilir. Gradyan, opaklık ayarı, karıştırma modu veya filtre, hedefin farklı işlediği bir özelliğe bağlı olabilir. Bazen dışa aktarılan işaretleme düzgündür ve yalnızca bir içe aktarıcı diğerlerinden farklı davranır.

Her hex değerini değiştirmekle başlamayın. Önce görünümün hangi noktada değiştiğini bulun. Böylece SVG'yi onarmanız mı, dışa aktarmayı değiştirmeniz mi, teslim kopyasını sadeleştirmeniz mi, yoksa grafiği başka bir formatta tutmanız mı gerektiğini anlarsınız.

Belirtiye göre ilk kontrolü seçin

Önce nereye bakmalı?

Sorunu beş dakikada izole edin

1. Düzenlenebilir ana dosyaya dokunmayın

Test için bir kopya kaydedin. Tek düzenlenebilir kopyanızda efektleri düzleştirmeyin, her nesneyi kontura dönüştürmeyin veya renkleri değiştirmeyin. Bu değişiklikler nedeni gizleyebilir ve dosyayı daha sonra değiştirmeyi zorlaştırabilir.

2. Dışa aktarılan SVG'yi iki yerde açın

Tarafsız bir kontrol olarak güncel bir tarayıcı kullanın; ardından aynı dosyayı gerçek hedefte açın veya içe aktarın. İkisini de aynı arka planda kaynak grafikle karşılaştırın.

• Dışa aktarılan dosya her iki görünümde de yanlışsa dışa aktarıcıyı veya dosyaya yazılmış SVG'yi inceleyin.
• Tek başına açılan dosya tarayıcıda doğru, hedefte yanlışsa gömmeyi, CSS'yi veya içe aktarıcı desteğini inceleyin.
• Yalnızca saydam veya karıştırılmış bölgeler farklıysa düz renk dolgulara dokunmadan önce arka planı ve efektleri test edin.

Tarayıcı yararlı bir kontrol aracıdır; her tasarım veya üretim uygulamasının aynı özellikleri içe aktaracağının kanıtı değildir.

3. Boyama talimatlarını inceleyin

SVG'yi bir metin düzenleyicide açıp şunları arayın:

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

Henüz yeniden yazmıyor, yapıyı inceliyorsunuz. Doğrudan yazılmış bir fill="#2F6BFF" değeri, fill="currentColor" veya fill="url(#paint0)" değerinden farklı bir teşhis dalına işaret eder.

SVG işaretlemesini ilk kez açıyorsanız daha kapsamlı SVG düzenleme kılavuzu, kod ve görsel düzenleyici yöntemlerini açıklar.

4. Sorunlu tek bir nesneyi sadeleştirin

Hâlâ değişen en küçük nesneyi yeni bir belgeye kopyalayıp dışa aktarın. Her seferinde bir özelliği kaldırın: önce filtreyi, sonra karıştırma modunu, ardından gradyanı ve son olarak grup opaklığını. Sonucu düzelten ilk kaldırma, desteklenmeyen veya bağlama bağlı özelliği belirler.

Bu sadeleştirme testi, teslim için belirli bir kısıtı ortaya çıkardığından tüm çizimi düzleştirmekten daha güvenlidir.

Neden 1: dışa aktarıcı renk uzayını dönüştürdü

Hex renkleri ve alışıldık rgb() sözdizimi sRGB renklerini tanımlar. Modern CSS, CSS Color Module Level 4 belirtiminde tanımlandığı gibi color() aracılığıyla Display P3 gibi daha geniş gamutlu uzayları da ifade edebilir. Dolayısıyla bir tasarım uygulaması, sRGB hex değerine dönüşmeden önce dönüştürülmesi gereken bir kaynak renk barındırabilir; bu dönüşüm sayıları değiştirebilir veya gamut dışındaki bir rengi sınırlandırabilir.

Sorunu şu sırayla kontrol edin:

1. kaynak belgenin renk uzayını ve seçili nesnenin sayısal değerini not edin;
2. opaklık ayarı veya efekt içermeyen tek bir düz renkli nesneyi dışa aktarın;
3. SVG'yi metin olarak açıp dosyaya yazılmış fill veya stroke değerini okuyun;
4. dışa aktarılan sayıyı kaynakla karşılaştırın;
5. aynı dosyayı hedefte test edin.

Değer dosyanın içinde değiştiyse dönüşüm dışa aktarma sırasında gerçekleşmiştir. Hedef renk uzayını bilinçli olarak seçip yeniden dışa aktarın. Değer değişmemişken görünüm farklıysa CSS'ye, efektlere, arka plana veya içe aktarıcı davranışına geçin.

CMYK renk ayrımları, spot renkler veya belirli bir siyah renk bileşimi gerektiren baskı işlerinde baskı için esas alınan ana dosyayı tasarım uygulamasının yerel formatında tutun ve baskıcının istediği formatı, çoğunlukla PDF'yi, teslim edin. SVG ekran kullanımı için hâlâ yararlı olabilir, ancak güvenilir biçimde tanımlayamadığı bir iş akışında fark edilmeden renk için esas kaynak hâline gelmemelidir.

Neden 2: currentColor veya CSS boyamayı değiştirdi

SVG, CSS ile stillendirilebilir. SVG 2 Styling belirtimi, fill gibi sunum özniteliklerinin CSS kademesine sıfır özgüllükle katıldığını, dolayısıyla yazar CSS'sinin bunları geçersiz kılabileceğini belirtir. Satır içi SVG, çevresindeki sayfayla aynı belgeyi de paylaşır; bu nedenle genel sınıf adları site stilleriyle çakışabilir.

currentColor, değeri bilinçli olarak dolaylı yoldan alır. MDN SVG color reference belgesi, bunun fill, stroke, gradyan durakları ve diğer boyama özellikleri için değer sağladığını açıklar. Bu, çevresindeki metnin rengini izlemesi gereken simgelerde yararlıdır; ancak dosyanın o noktada sabit bir rengi olmadığı anlamına da gelir.

Şu iki teslim stratejisinden birini kullanın:

• Temaya uyarlanabilen bir web simgesi için currentColor değerini koruyup SVG'ye veya amaçlanan üst öğesine açık bir color değeri atayın.
• Kendi paletini koruması gereken bağımsız bir varlık için açık dolgu ve kontur renkleri yazın; iç sınıfları çakışmayacak adlarla sınırlandırın.

Birden fazla satır içi SVG, paint0, clip0 veya gradient1 gibi kimlikler içeriyorsa bunları benzersiz yapın ve referanslarını birlikte güncelleyin. Yalnızca id değerini değiştirmeyin; her url(#id) hâlâ doğru öğeyi bulmalıdır.

Amacınız dışa aktarma kaynaklı bir renk değişimini düzeltmek yerine bilinçli olarak yeniden renklendirmekse SVG renklerini güvenle değiştirme konusundaki ayrı kılavuzu kullanın.

Neden 3: bir gradyan veya boyama referansı bozuldu

SVG gradyanları ve desenleri boyama sunucularıdır. Şekil, fill="url(#brandGradient)" gibi bir referansla bunlara işaret eder; gradyan tanımı ise normalde <defs> içinde bulunur. SVG 2 Paint Servers belirtimi, gradyan koordinatlarının ve dönüşümlerinin sonucu nasıl etkilediğini de tanımlar.

Üç kontrol, yapısal hataların çoğunu yakalar:

1. her url(#id) için eşleşen bir tanım bulunması;
2. birkaç SVG tek bir sayfa veya belgede birleştirildikten sonra kimliklerin benzersiz kalması;
3. hedefin, dosyanın kullandığı boyama türünü, birimleri, dönüşümleri ve gradyan duraklarını koruması.

Basit bir düz renk dolgu doğru içe aktarılıyor, ancak gradyan aktarılmıyorsa gradyanı ana dosyada tutup hedef için bir teslim kopyası oluşturun. Önce daha basit bir doğrusal veya radyal gradyan deneyin. Hedef bunu hâlâ yeniden üretemiyorsa ve tam görünüm düzenlenebilir boyamadan daha önemliyse dosyayı alan iş akışının desteklediği bir format veya düzleştirilmiş varlık kullanın. Düzenlenebilir kaynağın yerine geçmemesi için bu kopyayı açıkça etiketleyin.

Neden 4: opaklık ve karıştırma görünür sonucu değiştirdi

Görünür piksel her zaman kayıtlı dolgu değildir. fill-opacity, şeklin dolgusunu etkiler; grup opacity değeri, grubun alt öğeleri birleştirildikten sonra uygulanır; karıştırma modu ise kaynağı arka planıyla karıştırır. W3C Compositing and Blending Level 1 belirtimi, görüntüleme sırasını ve arka plana bağlı karıştırma formüllerini tanımlar.

Bunun iki pratik sonucu vardır:

• Aynı SVG, hiçbir renk değeri değişmeden beyaz, siyah veya renkli bir sayfa üzerinde farklı görünebilir.
• Opaklığı gruptan her bir alt öğeye taşımak, birleştirme sırası farklı olduğundan örtüşmeleri değiştirebilir.

Gerçek arka planda test edin. Ardından bir kopyada mix-blend-mode, filtreler, maskeler ve grup opaklığını tek tek kaldırın. Hedef önemli bir efekti koruyamıyorsa sadeleştirilmiş bir vektör görünümü ile düzleştirilmiş bir teslim varlığı arasında seçim yapın. Tasarımın ilgisiz bölümlerini düzleştirmeyin.

Grafiğin arkasındaki beyaz veya renkli dikdörtgen ayrı bir durumdur. Saydam arka planlı SVG kılavuzu, gerçek bir arka plan şeklini boş tuvalden nasıl ayırt edeceğinizi gösterir.

Neden 5: hedef, SVG'nin yalnızca bir bölümünü içe aktardı

SVG bir web standardıdır, ancak birçok masaüstü, baskı, kesim, sunum ve site oluşturma aracı onu kendi nesne modeline dönüştürür. Destek, uygulamaya ve sürüme göre değişebilir. Güncel resmî belgeler bunu doğrulamadıkça veya kullandığınız tam sürüm belgelerle örtüşmedikçe “bu uygulama gradyanları hiçbir zaman desteklemez” gibi kurallardan kaçının.

Bunun yerine kontrollü bir içe aktarma testi yapın:

1. düz renk dolgulu tek bir yolu içe aktarın;
2. özgün gradyanı ekleyin;
3. opaklığı ekleyin;
4. karıştırmayı veya filtreyi ekleyin;
5. değişen ilk sürümde durun.

Artık o hedefin sınırını biliyorsunuz. Tam ana dosyayı koruyup test edilen sınır içinde kalan bir teslim kopyası dışa aktarın. Kaybolan bölüm konturlarsa her çizgiyi dolguya dönüştürmek yerine konturlara özgü dışa aktarma teşhisini izleyin.

Güvenli ve en küçük düzeltmeyi seçin

PerfectVector nerede devreye girer?

Vektör kaynağı kaybolmuş veya kullanılamaz durumdaysa ve elde kalan en iyi grafik bir raster görüntüyse PerfectVector yararlıdır. O görüntüyü düzenlenebilir vektör şekillerine dönüştürebilir, ardından sonucu hedefte açmadan önce paleti, saydamlığı ve yolları inceleyebilirsiniz.

Kalıtılan CSS'yi onarmaz, eksik gradyan tanımını geri getirmez, tasarım uygulamasının renk profilini kurtarmaz, desteklenmeyen karıştırma modunu korumaz veya içe aktarıcının ayrıştırıcısını değiştirmez. SVG hâlâ iyi yollar ve boyama talimatları içeriyorsa ekran görüntüsünü yeniden vektörleştirmek yerine dosyayı onarın. Böylece özgün yapının daha büyük bir bölümü korunur.

Teslim kontrol listesi

• Düzenlenebilir ana dosyayı koruyun ve düzeltmeleri bir kopyada yapın.
• Dışa aktarılan dosyayı aynı arka planda bir tarayıcıda ve gerçek hedefte karşılaştırın.
• Dosyaya yazılmış fill ve stroke değerlerinin değişip değişmediğini kontrol edin.
• currentColor, genel sınıflar ve yinelenen kimlikleri arayın.
• Her url(#id) referansını tanımıyla eşleştirin.
• Grup opaklığını, karıştırma modlarını, filtreleri ve maskeleri ayrı ayrı test edin.
• Yalnızca hedefin yeniden üretemediği özelliği sadeleştirin.
• Önceki sürümün yerine koymadan önce son teslim dosyasını yeniden açın veya içe aktarın.

Sık sorulan sorular

SVG'm neden tarayıcıda doğru, içe aktarmadan sonra yanlış görünüyor? Dosya muhtemelen hedefin farklı dönüştürdüğü bir özellik veya stil bağlamı kullanıyor. Tek bir düz renkli yolu içe aktarın, ardından gradyanı, opaklığı, karıştırmayı veya filtreyi tek tek geri ekleyin. Başarısız olan ilk adım, ana dosyayı bozmadan hedefin sınırını belirler.

SVG dosyaları her zaman RGB midir? Yaygın hex ve rgb() renkleri sRGB'dir; modern CSS, Display P3 gibi uzayları da ifade edebilir. Tasarım ve baskı uygulamaları bu renkleri dışa veya içe aktarma sırasında dönüştürebilir. Dosyaya yazılmış rengi inceleyin ve CMYK veya spot renk işleri için baskıcının istediği üretim formatını kullanın.

SVG'm dışa aktarmadan sonra neden siyaha döndü? Dosyanın currentColor kullanıp kullanmadığını, bir CSS kuralını kaybedip kaybetmediğini veya eksik bir gradyan ya da boyama kimliğine referans verip vermediğini kontrol edin. Siyah, özgün dolgunun değiştirilmesinden ziyade kalıtılan bir renk veya yedek değere dönüldüğünün belirtisi olabilir. Tek başına açılan dosyayı gömülü veya içe aktarılan sürümle karşılaştırın.

Renkler yanlış görünüyorsa her hex değerini değiştirmeli miyim? Hayır. Önce değerlerin dışa aktarma sırasında değişip değişmediğini belirleyin. Sayılar aynıysa bunları değiştirmek CSS, boyama referansı, karıştırma, arka plan veya içe aktarıcı sorununu gizleyebilir ve dosyanın başka yerlerde doğruluğunu azaltabilir.

PerfectVector, dışa aktarmadan sonra renkleri değişen bir SVG'yi düzeltebilir mi? SVG'nin yalnızca CSS'sinin, gradyanlarının, opaklığının, profilinin veya içe aktarıcı davranışının onarılması gerekiyorsa hayır. PerfectVector, özgün vektör kaybolduğunda ve uygun, düz renkli bir raster grafiği düzenlenebilir vektör şekilleri olarak yeniden oluşturmanız gerektiğinde uygundur.

Kaynaklar

1. W3C — SVG 2 Styling — SVG'deki CSS stillendirmesini, class ve style özniteliklerini, sunum özniteliklerini, kademe davranışını ve kalıtımı tanımlar.
2. MDN — SVG color attribute — currentColor değerinin dolgular, konturlar, gradyan durakları ve ilgili özellikler için nasıl boyama değerleri sağladığını açıklar.
3. W3C — SVG 2 Paint Servers — Doğrusal ve radyal gradyanları, boyama referanslarını, koordinat sistemlerini, dönüşümleri ve renk enterpolasyonunu tanımlar.
4. W3C — CSS Color Module Level 4 — sRGB renk sözdizimini ve Display P3 dâhil daha geniş, önceden tanımlı uzayları tanımlar.
5. W3C — Compositing and Blending Level 1 — SVG ve CSS için opaklık gruplarını, birleştirme sırasını, arka planları ve karıştırma modlarını tanımlar.

Elde kalan en iyi kaynak PNG veya JPG ise PerfectVector ile SVG olarak yeniden oluşturun, ardından eski dosyanın yerine koymadan önce sonucu tek başına bir tarayıcıda ve son hedefte karşılaştırın.