SVG boş açılıyor: yeniden oluşturmadan önce 7 kontrol
Boş SVG tuval dışında, görünmez, kırpılmış, desteklenmeyen, bozuk veya yalnızca raster kapsayıcı olabilir. Yeniden oluşturmadan önce koruyup yedi kontrol yapın.
Bu sayfada
- 1. Dosyayı koruyun ve veri içerip içermediğini kontrol edin
- 2. Tarayıcı ile vektör düzenleyiciyi karşılaştırın
- 3. Tümünü seçin ve sınırları inceleyin
- 4. Çizimi viewBox ile karşılaştırın
- 5. Boyamayı ve görünürlüğü kontrol edin
- 6. Hedef uygulamanın desteklemeyebileceği özellikleri inceleyin
- 7. Dosyayı doğrulayın veya yeniden dışa aktarın
- Ne zaman yeniden oluşturmalı veya vektörleştirmelisiniz?
- PerfectVector bu süreçte nerede yer alır?
- Sık sorulan sorular
- Kaynaklar
SVG boş açılıyorsa herhangi bir şeyi kaydetmeden veya dışa aktarmadan önce dosyanın kopyasını oluşturun. Çizim hâlâ mevcut olabilir; ancak görünür viewBox dışında kalmış, şeffaf ya da beyaz boyanmış, kırpma veya maskeyle gizlenmiş ya da bir uygulamanın desteklemediği bir özellikle oluşturulmuş olabilir. Boş bir belgeyi yeniden kaydetmek, kurtarılabilir bir dosyayı gerçekten boş bir dosyaya dönüştürebilir.
Kopyayı bir tarayıcıda ve bir vektör düzenleyicide açın. İlk ayrım bu karşılaştırmadır: birinde görünürken diğerinde boş olması genellikle uygulama desteğine veya belge yapısına işaret eder; her yerde boş olması ise görüntü alanı, boyama, kırpma, geçersiz işaretleme veya eksik içerik olasılığını güçlendirir.
Yedi kontrol
- Özgün dosyayı koruyun ve dosya boyutunu inceleyin.
- Bir tarayıcı ile vektör düzenleyiciyi karşılaştırın.
- Tümünü seçin ve nesne sınırlarını inceleyin.
- Sınırları
viewBox,widthveheightile karşılaştırın. - Dolguyu, konturu, opaklığı, görüntülenme ve görünürlük ayarlarını kontrol edin.
- Kırpmaları, maskeleri, desenleri, filtreleri,
<image>ve<foreignObject>öğelerini inceleyin. - Yeniden vektörleştirmeye karar vermeden önce işaretlemeyi doğrulayın veya yeniden dışa aktarın.
Bu kontroller, birbirinden bağımsız yedi onarım değil, sorunun kaynağını bulmaya yönelik bir haritadır. Geometrinin mevcut olduğunu doğrulayın; ardından herhangi bir şeyi değiştirmeden önce sınırlarını, ölçeğini, boyamasını, kırpmasını, desteklenen efektlerini ve bağımlılıklarını test edin.

1. Dosyayı koruyun ve veri içerip içermediğini kontrol edin
Yeni bir adla kopya oluşturun. Ardından dosya boyutunu kontrol edip düz metin düzenleyicide açın.
Sıfır baytlık bir dosyada veya yalnızca boş bir kök <svg> öğesi içeren belgede, o kopyadan kurtarılabilecek pek bir şey yoktur. Yollar, gruplar, stiller veya büyük bir kodlanmış veri bloğu içeren dosya, tuvali boş göründüğü için boş sayılmaz.
Büyük boyuttan fazla sonuç çıkarmayın. Dosya yüksek çözünürlüklü gömülü görüntü, tekrarlanan stiller veya bozuk veri içerebilir. Boyut yalnızca daha fazla incelemeye değer olduğunu gösterir.
2. Tarayıcı ile vektör düzenleyiciyi karşılaştırın
SVG'yi güncel bir tarayıcıya sürükleyin, ardından aynı kopyayı Inkscape, Illustrator, Figma veya başka bir vektör düzenleyicide açın.
| Tarayıcı | Düzenleyici | Olası sorun alanı |
|---|---|---|
| Görünür | Boş | Desteklenmeyen özellik, gömülü web içeriği, desen, filtre, maske veya içe aktarıcı sınırlaması |
| Boş | Görünür | Tarayıcıya yönelik işaretleme, CSS, kaynak veya güvenlik sorunu |
| Boş | Boş | Görüntü alanı, boyama, kırpma, bozuk işaretleme veya eksik içerik |
| Görünür | Görünür | İlk belirti küçük resimlere, içe aktarma yöntemine veya belirli bir uygulamaya ait olabilir |
Tarayıcının dosyayı göstermesi, farklı uygulamalara taşınabilir vektör yolları içerdiğini kanıtlamaz. Tarayıcılar, CAD veya vektör düzenleyicilerin yok saydığı gömülü raster görüntüleri ve web içeriğini gösterebilir.
3. Tümünü seçin ve sınırları inceleyin
Vektör düzenleyicide Select All kullanın. Seçim kutusuna, koordinatlara, genişliğe ve yüksekliğe bakın.
- Sayfanın çok dışında bir seçim kutusu, çizimin tuval dışında olduğunu gösterir.
- Çok büyük bir seçim, başıboş bir düğüme, kırpma nesnesine veya arka plan dikdörtgenine işaret edebilir.
- Normal bir seçim kutusuyla birlikte görünmeyen çizim; boyama, opaklık veya kırpma olasılığına işaret eder.
- Seçilebilir nesne olmaması; desteklenmeyen içerik, boş belge veya başarısız içe aktarmayı düşündürür.
Nesneler tuval dışındaysa seçimi sayfaya taşıyın veya sayfayı çizime göre boyutlandırın. Gerçek boyutları da yanlış değilse yolları ölçeklendirmekten kaçının.
4. Çizimi viewBox ile karşılaştırın
SVG'yi metin olarak açın ve kök öğeyi inceleyin:
<svg xmlns="http://www.w3.org/2000/svg"
width="800" height="600" viewBox="0 0 800 600">Dört viewBox sayısı; SVG koordinat sistemi belirtiminde tanımlandığı gibi minimum x, minimum y, genişlik ve yüksekliktir. 10000,10000 civarındaki koordinatlarda bulunan çizim, viewBox="0 0 800 600" içinde görünmez. Sıfır veya negatif bir viewBox boyutu, o öğenin görüntülenmesini devre dışı bırakır.
Görünür sınırları gerçek geometriye göre düzeltin. Başka bir dosyadan rastgele bir viewBox yapıştırmayın. Yanlış boyuttaki SVG rehberi, çizim görünür ancak yanlış ölçeklenmiş olduğunda viewBox ile görüntü alanı boyutlarının nasıl etkileştiğini açıklar.
5. Boyamayı ve görünürlüğü kontrol edin
Bir nesne seçin; hem dolguyu hem konturu inceleyin. Yaygın görünmez durumlar şunlardır:
- kontur olmadan
fill="none"; - beyaz tuval üzerinde beyaz dolgu;
opacity="0",fill-opacity="0"veyastroke-opacity="0";display="none"veyavisibility="hidden";- stil sayfası bu değerlerden birini uygulayan sınıf;
- mevcut ölçekte son derece ince bir kontur.
Geçici olarak çizimin arkasına renkli bir dikdörtgen yerleştirin veya bir yolun kopyasına dikkat çekici bir test dolgusu atayın. Görünür hâle gelirse tanı için kullandığınız rengi son dosyada bırakmak yerine amaçlanan stilleri geri yükleyin.
Dolgular görünür kaldığı hâlde tek tek çizgiler dışa aktarmadan sonra kayboluyorsa iyi durumdaki geometriyi yeniden vektörleştirmeden kontur boyamasını, kırpmayı, ölçeği ve desteklenmeyen görünüm özelliklerini test etmek için kaybolan SVG konturları rehberini kullanın.
6. Hedef uygulamanın desteklemeyebileceği özellikleri inceleyin
İşaretlemede clipPath, mask, pattern, filter, <image> ve <foreignObject> arayın.
Kırpmalar ve maskeler, koordinat sistemleri veya başvuruları bozulduğunda her şeyi gizleyebilir; SVG görüntüleme modeli, kırpma, maskeleme, filtreleme ve birleştirmeyi görüntüleme sürecine yerleştirir. Desenler ve filtreler farklı içe aktarıcılarda farklı görüntülenebilir. <image> öğesi SVG kapsayıcısına görüntü içeriği gömer; <foreignObject> ise SVG gömülü içerik belirtiminde açıklandığı gibi başka bir XML ad alanından içerik barındırabilir.
Şekiller korunuyor ancak HTML etiketleri kayboluyorsa foreignObject ile SVG'nin kendi metin öğesini karşılaştırın ve yalnızca sorunlu etiketi değiştirin.
Yollar görünürken gölge kesiliyorsa filtre bölgesini ve dış görüntü alanını ayrı ayrı test ederek kırpılmış SVG gölgesinin nedenini bulun.
Başvurular da bozulabilir. url(#name) tarafından kullanılan kimliklerin gerçekten mevcut ve benzersiz olduğunu kontrol edin. SVG harici bir görüntüye, yazı tipine, stil sayfasına veya bağlantılı dosyaya dayanıyorsa SVG'yi taşımak bu kaynağın bağlantısını bozmuş olabilir.
Qt uygulaması için Qt'de SVG görüntüleme rehberi, modül ve yükleme kontrollerini desteklenen özellik sınırlamalarından ayırır. Önce küçük bir kaynağı karşılaştırın, ardından çizimi seçilen görüntüleme yönteminde inceleyin.
Tarayıcı tasarımı gösterirken CAD hiçbir şey içe aktarmıyorsa normal <path>, <rect>, <circle> ve benzeri vektör geometrisini arayın. Görünür bir gömülü PNG'de CAD'in kullanabileceği eğriler yoktur.
7. Dosyayı doğrulayın veya yeniden dışa aktarın
Bozuk XML, geçersiz öznitelikler ve dışa aktarıcıya özgü yapılar bir görüntüleyici tarafından kabul edilip başka biri tarafından reddedilebilir. Kaynak tasarım elinizdeyse onu oluşturulduğu uygulamada yeniden açın ve sade veya basitleştirilmiş bir SVG kopyası dışa aktarın. Yalnızca hedef uygulamanın işleyemediği özellikleri açımlayın ve yeni dosyayı kaynakla karşılaştırın.
Kaynak elinizde değilse SVG/XML doğrulayıcısı veya sözdizimi hatalarını bildiren bir metin düzenleyici kullanın. Bir kopya üzerinde çalışın ve önce ilk yapısal hatayı düzeltin; çünkü sonraki mesajlar onun sonucu olabilir.
Tek kopyanız üzerinde optimizasyon aracı çalıştırmayın. Optimizasyon yapıyı yeniden yazar ve sorun anlaşılmadığında kurtarmayı zorlaştırabilir.
Ne zaman yeniden oluşturmalı veya vektörleştirmelisiniz?
Dosya yalnızca gömülü raster görüntü içeriyorsa, oluşturulan SVG yapısı tarayıcı dışında kullanılamıyorsa veya düzenlenebilir hiçbir kaynak kalmamışsa yeniden vektörleştirme uygundur. En yüksek kaliteli raster görüntüyü çıkarın veya bulun; ardından gerçek yollara vektörleştirin.
Tuval dışındaki yollar, bozuk viewBox, beyaz dolgular veya desteklenmeyen tek bir maske için doğru çözüm bu değildir. Bu dosyalar zaten geometri içerir; onu korumak gereksiz kalite kaybını önler.
Tasarımın tamamı tek bir piksel görüntüsü olarak seçiliyorsa veya yüksek yakınlaştırmada bloklu görünüyorsa yeniden oluşturmadan önce gizli piksellerin teşhisini kullanın.
PerfectVector bu süreçte nerede yer alır?
PerfectVector'ın görüntüyü vektöre dönüştürme iş akışı, yalnızca raster içerik bulunan durum içindir. En iyi PNG, JPG veya desteklenen başka görüntüyü yükleyin; vektör önizlemesinde gerçek şekilleri, temiz kenarları, negatif alanı ve yönetilebilir yolları inceleyin.
Her tür SVG işaretlemesini onarmaz veya harici kaynakları kurtarmaz. Dosya zaten iyi yollar içeriyorsa görüntü alanını, stilleri veya desteklenmeyen özelliği vektör düzenleyicide düzeltin. Yalnızca SVG kabuğu içindeki bir raster görüntüyse görünür çizimi yollar olarak yeniden oluşturmak, başka bir kapsayıcı yerine taşınabilir bir vektör sağlar.
Sık sorulan sorular
SVG'm Illustrator'da boşken Chrome'da neden görünüyor? Dosya, gömülü web içeriği, karmaşık bir desen, filtre, maske veya raster kapsayıcı gibi, tarayıcının desteklediği ancak Illustrator'ın içe aktarmadığı bir özellik kullanıyor olabilir. Daha sade bir SVG kopyası dışa aktarmadan önce işaretlemeyi inceleyin ve normal vektör yolları içerip içermediğini kontrol edin.
Tuval dışındaki SVG çizimini nasıl bulurum?
Select All kullanın ve seçim sınırlarını veya koordinatlarını inceleyin. Sayfadan uzakta bir kutu beliriyorsa onu sayfaya taşıyın veya sayfayı çizime göre boyutlandırın. Ardından viewBox değerini amaçlanan görünür geometriyle eşleşecek şekilde güncelleyin.
SVG beyaz olup boş görünebilir mi?
Evet. Beyaz dolgular veya konturlar beyaz tuval üzerinde kaybolur. Dosya sıfır opaklık, display="none" veya visibility="hidden" de kullanıyor olabilir. Renkli arka planda test edin ve hesaplanan stilleri inceleyin.
SVG'm Fusion'a veya başka bir CAD uygulamasına neden boş içe aktarılıyor?
Dosya vektör eğrileri yerine gömülü raster görüntü veya desteklenmeyen web içeriği barındırıyor olabilir. CAD'in içe aktarabileceği yol geometrisine ihtiyacı vardır. <path> ve ilgili şekilleri arayın; görünür içeriğin bunun yerine <image> veya <foreignObject> içinde bulunup bulunmadığını kontrol edin.
Boş bir SVG'yi PNG'ye, ardından yeniden SVG'ye dönüştürmeli miyim? Yalnızca SVG'de kurtarılabilir vektör geometri yoksa ve raster görünüm elde kalan en iyi kaynaksa. PNG'ye dönüştürüp geri dönmek mevcut yol yapısını yok eder. Önce görüntü alanı, görünürlük, kırpma ve destek sorunlarının kaynağını bulun.
Kaynaklar
- W3C — SVG 2 Coordinate Systems — Görüntü alanlarını,
viewBox, birimleri ve dönüşümleri tanımlar. - W3C — SVG 2 Rendering Model — Kırpma, maskeleme, filtreleme, birleştirme ve görüntüleme sırasını belgeler.
- W3C — SVG 2 Embedded Content — SVG'deki gömülü görüntüleri ve başka ad alanlarından gelen içeriği tanımlar.
- W3C — Markup Validation Service — İşaretleme hatalarını ayıklamak için standartlara dayalı belge doğrulaması sunar.
Elde kalan dosya yalnızca SVG kapsayıcısı içindeki piksellerden oluşuyorsa çizimi düzenlenebilir vektör yolları olarak yeniden oluşturun ve önizlemeyi inceleyin. İyi durumdaki yollar zaten mevcutsa onları koruyun ve belgenin sorun çıkaran en küçük parçasını onarın.
Bloga daha fazlası

SVG miter çıkıntıları: Sivri köşeleri kırpmadan düzeltin
SVG'de miter birleşimi dar bir köşede sivri çıkıntı oluşturabilir veya sayfa kenarında kırpılabilir. Yolları düzenlemeden önce miter limitlerini, pahlı ve yuvarlak birleşimleri ve görünüm alanındaki boşluğu karşılaştırın.
SVG symbol sprite: Kimlik, viewBox ve renk yönetimi
İki simgeyle bir SVG symbol sprite oluşturun. Kimlikleri ve viewBox değerlerini koruyun; renkleri, dış referansları ve erişilebilir adları bağlamında denetleyin.