SVGcode: dışa aktardığınız şekilleri kontrol edin

SVGcode resim izleme için tarama resminizi yükleyin, Color SVG veya Monochrome SVG'yi seçin, izlemeyi ayarlayın ve ardından dışa aktarılan SVG'nin kendisini inceleyin. Kabul etmeden önce renklerini, iç deliklerini ve tuvalini kontrol edin. Düz renk testimizde SVGcode gerçek yollar üretti ve çerçevenin açıklığını korudu ancak dışa aktarılan her iki varyant da orijinal paleti değiştirdi ve farklı bir tuval kullandı.

Zaten sahip olduğunuz bir görüntü için başka bir tarayıcı iş akışı istiyorsanız, görüntüyü PerfectVector'da ücretsiz olarak önizleyin. Sonucu düzenleyebilmeniz veya dışa aktarabilmeniz için önce sonucun kilidini açmanız gerekir. Aşağıdaki aynı şekil ve renk kontrollerini kullanın; bu izlenecek yol, iki aracın çıktı kalitesini karşılaştırmaz.

Kendi görselinizle deneyin

Aracın tamamını açın

PNGJPGWEBPPNGSVGGörselinizi buraya bırakınveya tıklayın · yapıştırın ⌘VGörsel SeçGörseli kontrol etmek için bırakın

Denemesi ücretsiz. Vektörünüzün önizlemesini görmek için bir görsel bırakın, üyelik gerekmez.

SVGcode'un izleri ve nelerin hazırlanması gerektiği

SVGcode taramalı görüntüleri SVG vektör grafiklerine dönüştürür. Yazarı, renkleri renge göre izleyen Potrace tabanlı bir WebAssembly uygulamasını açıklamaktadır; resmi kaynak deposu bu uygulamayı belgelemektedir. Bu yaklaşımı açıklıyor, ancak dışa aktarılan dosya kendi sanat eserinizin kanıtıdır.

PNG'nin veya desteklenen başka bir taramalı görüntünün bir kopyasıyla, SVGcode'a erişebilecek bir tarayıcıyla ve resmi işleme izniyle başlayın. Aşağıdaki pano rotası için tarayıcınızın resim panosu erişimine izin vermesi gerekir. Kopyalanan SVG işaretlemesini kaydetmek için bir düz metin düzenleyicinin yanı sıra tamamlama kontrolü için bir SVG görüntüleyici veya düzenleyiciyi hazır bulundurun.

Farklı renkli bölgelere sahip düz bir işaret yararlı bir ilk girdidir. Ayarları değiştirmeden önce saklamanız gereken renkleri ve açıklıkları kaydedin. Bir fotoğraf veya yumuşak bir degrade için hangi ayrıntıları basitleştirebileceğinize karar verin; izleme, piksellerden amaçlanan her sınırı çıkaramaz. Görüntü vektörleştirme kılavuzu, rasterden yola geçiş kararını daha ayrıntılı olarak açıklamaktadır.

1. Görüntüyü yükleyin ve bir izleme modu seçin

SVGcode'u açın ve resminizi yükleyin. Test ettiğimiz rota için gerçek görüntüyü panoya yerleştirin ve Resmi Yapıştır'ı seçin. Herhangi bir şeyi ayarlamadan önce önizlemenin, şeffaf alanlar ve küçük iç ayrıntılar da dahil olmak üzere amaçlanan görüntüyü gösterdiğini doğrulayın.

Ayrı renkli bölgeler önemli olduğunda Color SVG'yi seçin. Hedeflenen sonuç tek renkli bir silüet olduğunda Monochrome SVG'yi kullanın. Bu izlenecek yol boyunca Color SVG kullanıldı; ayrı bir monokrom testi raporlamaz.

Orijinal taramayı önizlemenin yanında açık tutun. İzi yalnızca büyütüldüğünde kenarlarının düzgün görünüp görünmediğine göre yargılamayın. Boş bir merkez, küçük bir boşluk veya kasıtlı olarak ayrılmış bir renk, pürüzsüz bir dış kenardan daha önemli olabilir.

2. Ayarları görünür tek bir ayrıntıyı göz önünde bulundurarak değiştirin

Resmin dışındaki istenmeyen noktalar veya kaybolan küçük bir açıklık gibi işaret edebileceğiniz bir kusurla başlayın. Bir kontrolü değiştirin, önizlemenin güncellenmesini bekleyin ve ardından bu ayrıntıyı tekrar karşılaştırın.

Benekleri Bastırma küçük bölgeleri kaldırır. Yükseltilmesi başıboş noktaların giderilmesine yardımcı olabilir, ancak saklamayı düşündüğünüz küçük ayrıntıları kontrol edin. Giriş Görüntüsünü Posterleştir izlemeden önce renk değişimini azaltır; posterleştirme, renkleri daha az düzeyde gruplandırır. Yazarın SVGcode izlenecek yolu hem kontrolleri hem de kanal başına posterleştirmeyi açıklamaktadır.

Mevcut uygulama aynı zamanda Kontur Genişliğini ve uzman ayarlarını da ortaya çıkarıyor. Temel bir dışa aktarma işlemi gerçekleştirinceye kadar ihtiyaç duymadığınız kontrolleri yalnız bırakın. Çok sayıda eşzamanlı değişiklik, hangisinin sonucu değiştirdiğini söylemeyi zorlaştırıyor.

İllüstrasyon

Orijinal düz renk testimizin gösterdiği şey

Şeffaf bir arka plana, açıklığı olan lacivert dikdörtgen bir çerçeveye, altın rengi bir dikdörtgene ve üst üste binen deniz mavisi dikdörtgene sahip bir 512 × 512 PNG oluşturduk. Bu orijinal görüntüyü herkese açık SVGcode uygulamasına yapıştırdık, Color SVG, Benekleri Bastırma 2 ve Kontur Genişliği 0 kullandık, ardından iki gerçek SVG çıktısını kopyaladık.

İlk kullanılan Posterleştirme Giriş Görüntüsü, her biri 7 Adımda kırmızı, yeşil ve mavi ve 1 Adımda alfadır. İkincisi aynı görüntüyü Posterleştir Giriş Görüntüsünü işaretlenmemiş olarak kullandı. Bu ikinci durumda RGB ve alfa kontrolleri devre dışı bırakıldı.

Posterleştirmeyi kapatmak, bu görselin tam orijinal renklerini geri yüklemedi. Her iki SVG de sanat eserini farklı bir tuvalin içine yerleştirdi. Bunlar, her dosya için bir kıyaslama veya tahmin değil, tek bir kontrollü görüntüden elde edilen gözlemlerdir. Bunlar, renk veya düzen ana planı olarak kullanmadan önce gerçek dışa aktarımı kontrol etmek için iyi nedenlerdir.

3. SVG'yi kopyalayın ve gerçek işaretlemeyi koruyun

Önizleme hazır olduğunda SVG'yi Kopyala'yı seçin. Panoyu okumadan veya yapıştırmadan önce SVG'yi optimize etme işleminin tamamlanmasını bekleyin. Bizim çalışmamızda, hemen okunan pano boştu; optimizasyondan sonra okunduğunda SVG işaretlemesi döndürüldü.

İşaretlemeyi bir düz metin düzenleyiciye yapıştırın ve artwork-trace.svg gibi bir .svg uzantısıyla kaydedin. Ekran görüntüsü veya zengin metin belgesi yerine bir <svg> öğesi ve </svg> kapanışı içerdiğini doğrulayın. Daha sonra dışa aktarmanın referansınızın yerini almaması için her ayar değişkeni için ayrı bir dosya adı tutun.

Bu, tamamladığımız kopyalanmış işaretleme rotasıdır. SVGcode aynı zamanda SVG'yi Kaydet'i de görüntüler, ancak bu izlenecek yol, yerel dosya kaydetme iletişim kutusu davranışını veya başka bir uygulamaya başarılı bir şekilde aktarıldığını kanıtlamaz.

4. Kaydedilen dosyadaki renkleri, açıklıkları ve tuvali inceleyin

Kaydedilen SVG'yi, dokunulmamış kaynağın yanındaki bir görüntüleyicide veya düzenleyicide açın. Bunları ayrı ayrı kontrol edin:

1. Palet: önemli dolguları amaçlanan renk değerleriyle karşılaştırın. Bir iz, üç rengi de değiştirirken üç bölgeyi koruyabilir. Tam renkler gerekiyorsa düzenleyicinizde amaçlanan dolguları geri yükleyin ve doğrulayın.
2. Açıklıklar: resmin arkasına kontrast oluşturan bir arka plan yerleştirin. Yeni arka plan, amaçlanan deliklerin ve dış alanın içinden görünmelidir. Beyaz boyalı bir şekil, beyaz üzerinde bir açıklık gibi görünebilir. Şeffaf SVG arka plan kılavuzu bu ikisinin nasıl ayırt edileceğini gösterir.
3. Tuval: resim sınırlarının yanı sıra belge sınırlarını da inceleyin. viewBox, SVG'nin dahili koordinat dikdörtgenini tanımlar; fiziksel boyutların vaadi değildir. Dosyayı kullanacağınız uygulamadaki kenar boşluklarını ve boyutu kontrol edin.
4. Geometri: önemli bölgeleri tek tek seçin ve küçük bir yeniden renklendirmeyi veya taşımayı deneyin, ardından geri alın. Yolları içeren bir dosyanın, amaçlanan işiniz için hâlâ düzenlenebilirlik kontrolüne ihtiyacı vardır.

SVG, tek bir bileşik yol içinde çeşitli konturlara sahip bir açıklığı temsil edebilir; SVG yolu standardı alt yolları ve delikleri açıklar. Her görünür sınır için ayrı bir yol öğesine ihtiyacınız yoktur. Tersine, düşük yol sayısı tek başına amaçlanan tüm ayrıntıların hayatta kaldığını kanıtlamaz.

Tamamlama kontrolümüz dijitaldi: kopyalanan işaretlemeyi inceleyin ve gerçek SVG'leri oluşturun. Her iki versiyonda da açıklık ve dış alan şeffaftı. Hiçbir hedef düzenleyici içe aktarma, yazdırma veya kesme sonucu test edilmedi. Daha geniş bir aktarım incelemesi için vektör izleme kalitesi puan kartını kullanın.

İlk başarısız denetimden kurtarma

Bir delik yanlış kalırsa SVG delik sorun giderme kılavuzu eksik iz geometrisini dolgu kuralı yorumlamasından ayırır. Doğrudan temizleme araçlarına sahip bir masaüstü izleme iş akışı için bkz. Inkscape Bitmap İzleme.

Orijinal görüntüyü ve kabul edilen SVG'yi bir arada tutun. Bir sonraki kişinin ihtiyaç duyacağı palet düzeltmesini veya tuval ayarlamasını yazın. Mevcut çiziminizi başka bir tarayıcı aracında denemek istiyorsanız PerfectVector ile ücretsiz başlayın ve önizlemenin silüetini ve açıklıklarını kontrol edin.

SSS

SVGcode bir PNG'yi gerçek SVG yollarına kadar izleyebilir mi?

Evet. Orijinal düz renkli PNG'miz, üç yol içeren ve gömülü görüntü içermeyen kopyalanmış SVG işaretlemesi üretti. Kendi dışa aktarılan dosyanızı inceleyin; bu sonuç her görüntü için aynı yapıyı veya aslına uygunluğu garanti etmez.

Posterleştirmeyi kapatmak orijinal renkleri korur mu?

Kontrollü testimizde olmadı. Her iki ayar da orijinal düz renk değerlerini değiştirdi. Dışa aktarılan dolguları istediğiniz paletle karşılaştırın ve tam renk önemli olduğunda bunları düzeltin.

SVG tuvali neden PNG boyutumdan farklı?

Testimizde kopyalanan SVG, 512 × 512 girişinden bir 1024 × 1024 viewBox kullandı. Kaynak piksel boyutlarının korunacağını varsaymak yerine, dışa aktarılan tuvali, resim sınırlarını ve amaçlanan görüntüleme boyutunu ayrı ayrı inceleyin.

Bir açıklığın şeffaf olduğunu nasıl bilebilirim?

Kaydedilen SVG'nin arkasına kontrast oluşturan bir arka plan yerleştirin. Açıklıktan görünmesi gerekir. Aksi takdirde izin iç konturunu kaybedip kaybetmediğini veya orada boyalı bir şekil oluşturup oluşturmadığını kontrol edin.

Kaynaklar

1. SVGcode uygulaması — görüntü izleme arayüzü ve mevcut kontroller.
2. SVGcode web.dev'de yazar kılavuzu — renk bazında izleme, benek bastırma ve posterleştirme.
3. Resmi SVGcode deposu — proje uygulaması ve kaynak dokümantasyonu.
4. W3C SVG yolları — bileşik yollar, alt yollar ve açıklıklar.