SVG içinde raster görüntü olduğu nasıl anlaşılır?

Evet, bir SVG raster görüntü içerebilir. Aynı belgede vektör yollarını ve pikselleri barındırabilir veya bir PNG ya da JPEG'i saran bir dosyadan ibaret olabilir. .svg uzantısı, görünen her parçanın vektör olup olmadığını değil, kapsayıcı biçimini belirtir.

Güvenilir kontrol, hem nesneleri hem de dosyanın kaynak kodunu incelemektir. Yakınlaştırma bir sorunu fark etmenize yardımcı olur; ancak uygulamanın önizlemeyi rasterleştirip rasterleştirmediğini veya piksellerin gerçekten SVG içinde saklanıp saklanmadığını söyleyemez.

WPF uygulamalarında WPF'te SVG gösterimi rehberi, SVG kaynağını uygulamaya özgü çizim nesnelerinden ve bitmap olarak sunumdan ayırır. Rasterleştirilmiş bir görüntüyü özgün dosya hakkında kanıt saymadan önce uygulamanın ne aldığını kontrol edin.

Bir SVG neler içerebilir?

SVG, XML tabanlı bir grafik biçimidir ve içerik modeli yalnızca yollardan ibaret değildir. SVG 2 gömülü içerik belirtimi, başvurulan bir dosyanın tamamını bir dikdörtgenin içine yerleştiren <image> öğesini tanımlar. Bu dosya bir PNG, JPEG veya başka bir SVG olabilir.

Böylece sık karşılaşılan dört yapı ortaya çıkar:

Karma içerik kendi başına yanlış değildir. Bir harita, gölgeli bir uydu katmanını raster olarak tutarken etiketler ve sınırlar için yollar kullanabilir. Bir ürün grafiğinde fotoğrafın üzerine düzenlenebilir bir rozet yerleştirilebilir. Sorun, bir dönüşümün düzenlenebilir yollar üretmesini beklerken farklı bir kapsayıcı içinde pikseller almanızla başlar.

Kontrol 1: Nesneleri inceleyin

SVG'yi Illustrator, Inkscape, Affinity Designer veya Objects ya da Layers paneli olan başka bir düzenleyicide açın. Raster olduğundan şüphelendiğiniz alanı seçin.

• Görüntü olarak etiketlenmiş tek bir dikdörtgen nesne, görüntü içeriğine dair güçlü bir kanıttır.
• Grafiğin gerçek kenarları boyunca görünen düğümler, vektör geometrisini gösterir.
• Bir kırpma yolu dikdörtgen görüntüyü gizleyebilir; bu nedenle karar vermeden önce katman veya nesne ağacını genişletin.
• Başka yerlerde yollar bulunması, belgenin tamamının vektör olduğunu kanıtlamaz. Tek bir dosya ikisini de içerebilir.

Bu kontrol, XML okumak istemeyen tasarımcılar için yararlıdır; ancak bir sınırı vardır: Dikdörtgen bir <image> nesnesi başka bir SVG'ye başvurabilir. Kaynak kodu kontrolü, nesnenin gerçekte ne yüklediğini gösterir.

Kontrol 2: SVG kaynak kodunu inceleyin

Bir kopya oluşturun, ardından .svg dosyasını düz metin düzenleyicide açın. <image ifadesini arayın. Görüntü öğesi yoksa yaygın gömülü görüntü mekanizması kullanılmıyordur. Bir tane bulursanız href değerini okuyun.

Gömülü bir PNG genellikle şöyle başlar:

<image href="data:image/png;base64,iVBORw0KGgo..." />

Gömülü bir JPEG genellikle data:image/jpeg;base64, ile başlar. MDN'nin data-URL başvuru belgesi, verilerin isteğe bağlı Base64 kodlamasıyla doğrudan URL'ye yerleştirildiğini açıklar. Bu biçimde çok uzun, okunamayan bir veri yükü bulunması normaldir.

Bağlantılı bir raster görüntü daha çok şöyle görünür:

<image href="photos/product-shot.png" />

Bu PNG, SVG'nin içinde saklanmaz. Belge, o yoldaki ayrı bir dosyaya bağlıdır. SVG'yi görüntü olmadan taşır veya e-postayla gönderirseniz grafik kaybolabilir.

Son olarak, şu örnek raster içeriğin kanıtı değildir:

<image href="icons/mark.svg" />

MDN'deki <image> başvuru belgesi, öğenin raster biçimleri veya başka bir SVG'yi gösterebildiğini açıkça belirtir. Sınıflandırmadan önce medya türünü veya dosya uzantısını kontrol edin.

Bir SVG'nin içinde veya yanında üç yapı

Gömülü ve bağlantılı içerik farklı sorunlardır

Inkscape, bir resmi içe aktarırken ona bağlantı verebilir veya onu gömebilir. Resim içe aktarma rehberi, bu tercihin sonuçlarını açıkça anlatır: Bağlantı vermek SVG'yi daha küçük tutar, ancak belgeyi resmin konumuna bağımlı kılar; gömmek SVG'yi bağımsız hale getirir, ancak boyutunu artırır.

Bu fark, dosyayı teslim ederken önemlidir:

• Gömülü raster: Tek dosya olarak taşınabilir; ancak yine de çözünürlükle sınırlıdır ve çoğu zaman beklenenden çok daha büyüktür.
• Bağlantılı raster: Bağımsız olarak güncellenmesi daha kolaydır; ancak klasörler, bilgisayarlar, web siteleri veya tedarikçiler arasında taşınırken bağlantısı kolayca bozulabilir.
• Vektör yolları: Geometri olarak düzenlenebilir; ancak yalnızca kaynak en başta yollar olarak çizilmiş veya izlenerek vektörleştirilmişse.

Gömmek, paketlemektir; vektörleştirme değildir. Base64, pikselleri eğrilere dönüştürmez. Stok grafik hazırlıyorsanız ek çalışma yüzeyi, düzenlenebilirlik ve kaynak kontrolleri için Adobe Stock vektör gönderimi denetimini izleyin.

Yakınlaştırma neden yeterli değildir?

Şüpheli alan birkaç görüntüleyicide yüksek yakınlaştırmada blok blok görünüyorsa muhtemelen rasterdır. Yine de bir görüntüleyici, tamamen düzgün bir SVG'yi küçük resim, tuval, baskı önizlemesi veya içe aktarma önbelleği için rasterleştirebilir. Tersine, yüksek çözünürlüklü gömülü bir PNG normal yakınlaştırmada pürüzsüz görünüp belge içinde fark edilmeden saklanabilir.

Yakınlaştırmayı bir belirti kontrolü olarak kullanın, ardından nesneler veya kaynak koduyla doğrulayın. SVG'nin neden pikselli göründüğüne ilişkin kapsamlı rehber, gömülü içeriği görüntüleyici davranışından ve küçük simge çiziminden ayırır. Bir tuval uygulamasında, tek bir görüntü düğümünü SVG kaynağında sorun olarak yorumlamadan önce Konva'da görüntü ve düzenlenebilir yol içe aktarmalarını karşılaştırın.

Koruma, yeniden bağlantı verme veya değiştirme kararı

Pikseller bilinçli bir tercihse rasterı koruyun

Fotoğraflar, taramalar, dokular, yumuşak ışık ve karmaşık boyama ayrıntıları çoğu zaman raster biçimde kalmalıdır. SVG, bu görüntüyü vektör etiketleri veya üzerine eklenen grafiklerle birleştirmek için kullanılıyorsa karma dosya doğru tasarım olabilir. Rasterın son fiziksel boyutta yeterli çözünürlüğe sahip olduğunu doğrulayın ve teslim edilecek dosyanın bağımsız mı olacağına, yoksa bağlantılı varlıklarla birlikte mi paketleneceğine karar verin.

Sorun taşınabilirlikse yeniden bağlantı verin veya gömün

Bağlantılı bir görüntü başka bir bilgisayarda kayboluyorsa SVG'yi ve görüntüsünü aynı göreli klasör yapısıyla paketleyin ya da teslimden önce görüntüyü gömün. Bu, eksik kaynak sorununu çözer. Görüntüyü yollar olarak düzenlenebilir hale getirmez.

Yollar vaat edilmişse rasterı değiştirin

Bir dönüştürücü düz renkli bir logoyu, simgeyi veya çizgisel çizimi SVG içine sardıysa özgün PNG veya JPEG'i bulun. Özgün dosya yoksa gömülü görüntüyü çıkarın veya o nesneyi özgün piksel boyutunda dışa aktarın. Ardından görüntüyü vektör yollarına dönüştürün, şekilleri inceleyin ve <image> nesnesini doğrulanmış vektör sonucuyla değiştirin.

PerfectVector, uygun düz renkli grafikleri düzenlenebilir şekiller olarak yeniden oluşturmak için yararlıdır. Sürekli ton geçişleri olan fotoğrafları sihirli biçimde küçük, aslına sadık bir yol kümesine dönüştürmez. Fotoğrafta amaç bilinçli olarak posterize edilmiş bir yorum değilse rasterı koruyun. Onaylanmış bir SVG'den PNG teslim kopyası gerekiyorsa Sharp ile doğrudan son piksel boyutunda oluşturun; küçük bir PNG'yi büyütmek, o SVG'ye gömülü herhangi bir raster görüntüye ayrıntı ekleyemez.

Scratch kullanıcıları, bir başka sarmalayıcı dosya dışa aktarmadan önce Convert to Vector işleminin neden bitmap'i izleyerek vektörleştirmediğini kontrol etmelidir.

Dışa aktarılırken rasterleştirilen efektleri yeniden oluşturun

Bazı SVG'ler çoğunlukla vektördür; ancak rasterleştirilmiş bir gölge, bulanıklık, doku veya desteklenmeyen efekt içerir. Efektin düzenlenebilir ve taşınabilir kalması gerekip gerekmediğine karar verin. Basit bir efekti desteklenen vektör özellikleriyle yeniden oluşturun, teslim çözünürlüğünde bilinçli olarak raster görüntüye dönüştürerek düzleştirin veya kaldırın. Yumuşak bir gölgeyi izleyerek vektörleştirmek genellikle daha iyi bir efekt yerine gereksiz ayrıntılarla dolu şekiller üretir.

Karma SVG'ler için teslim denetimi

Dosyayı bir web sitesine, matbaaya, kesiciye veya birlikte çalıştığınız kişiye göndermeden önce:

1. Kaynak kodunda <image, data:image/, .png, .jpg ve .jpeg ifadelerini arayın.
2. Başvurulan her kaynağın raster mı, vektör mü olması gerektiğini, yoksa hiç bulunmaması mı gerektiğini doğrulayın.
3. Bozuk bağımlılıkları ortaya çıkarmak için bağlantılı dosyaları geçici olarak taşıyın ve SVG'yi yeniden açın.
4. Önemli grafikleri seçin ve düzenlenebilir olması gereken parçaların yol olduğunu doğrulayın.
5. Raster görüntünün özgün piksel boyutlarını, son görüntüleme veya baskı boyutuyla karşılaştırın.
6. Teslim edilen kopyayı ikinci bir uygulamada yeniden açın.
7. Görünüm düzenlenebilirlikten daha önemliyse özgün kaynağı ve bir raster kontrol görselini saklayın.

Kesim veya üretim için makine dosyasından dekoratif raster içeriği kaldırın ve kesim için SVG ön kontrolünü uygulayın. Bir kesici yolları izler; gömülü bir fotoğrafı kesim konturuna dönüştürmez.

Sık sorulan sorular

Bir SVG, PNG veya JPEG içerebilir mi? Evet. Bir SVG görüntü öğesi, ayrı bir dosya olarak PNG veya JPEG'e başvurabilir ya da verilerini SVG'nin içinde taşıyabilir. Raster, özgün piksel tabanlı davranışını korur.

Bir image etiketi her zaman SVG'nin raster görüntü içerdiği anlamına mı gelir? Hayır. Görüntü öğesi başka bir SVG'ye de başvurabilir. Sınıflandırmadan önce medya türünü, data URL'sini veya dosya adını görmek için href ya da eski xlink:href değerini inceleyin.

Rasterın gömülü mü, bağlantılı mı olduğunu nasıl anlarım? Gömülü bir görüntünün href değeri genellikle data:image ile başlar; dolayısıyla baytları SVG'nin içinde yer alır. Bağlantılı bir görüntünün images/photo.png gibi bir yolu veya URL'si vardır ve bu ayrı kaynağa bağlıdır.

SVG'den gömülü bir görüntüyü kaldırabilir miyim? Evet. Gereksizse silin, bilinçli olarak seçilmiş bir raster varlıkla değiştirin veya uygun düz renkli grafikleri vektörleştirip yerine elde edilen yolları koyun. XML'i düzenlemeden önce bir yedek alın.

SVG'm neden hem yollar hem de bir görüntü içeriyor? Bu bir karma SVG'dir. Dosya, bir fotoğrafı üzerine eklenen vektör grafiklerle bilinçli olarak birleştiriyor olabilir veya dışa aktarma sırasında bir efekt rasterleştirilmiş olabilir. Değiştirmeden önce hangi parçaların düzenlenebilir olması gerektiğini inceleyin.

Kaynaklar

1. W3C — SVG 2 Embedded Content — <image> öğesini, href değerini ve başvurabileceği raster veya SVG kaynaklarını tanımlar.
2. MDN — SVG <image> — Desteklenen görüntü içeriği ve boyutlandırma davranışı için uygulamaya dönük başvuru belgesi.
3. Inkscape Beginners' Guide — Importing Pictures — İçe aktarılan resimlerin bağlantılı veya gömülü olması arasındaki farkı ve taşınabilirlikle ilgili ödünleşimi açıklar.
4. MDN — Data URLs — Görüntü verilerini SVG içinde saklamak için yaygın olarak kullanılan data: şemasını belgeler.

Düzenlenebilir yolların olması gereken yerde sarmalanmış bir bitmap mi buldunuz? Özgün düz renkli grafiği gerçek bir vektöre dönüştürün, SVG'yi yeniden açın ve önemli nesnelerin artık şekil olarak seçilebildiğini doğrulayın.