Tasarım Aracının SVG Çıktısı Tarayıcıda Nasıl Test Edilir?

Bir tasarım programından alınan SVG, aynı programda kusursuz görünüp web sayfasında kırpılabilir, yazı tipini değiştirebilir veya bazı parçalarını tamamen kaybedebilir. Dosyanın “açılıyor” olması, gerçek kullanım biçiminde doğru çalıştığı anlamına gelmez.

Küçük bir kontrol döngüsü; dışa aktarım hatasını, sunucu yapılandırmasını ve HTML'e yerleştirme sorununu birbirinden ayırır. Bunu yapmak için özel bir test sistemi kurmak şart değil; dosyanın bir kopyası, yerel HTTP sunucusu ve hedef tarayıcılar yeterli olabilir.

---

Önce orijinali koruyup SVG'nin kökünü okuyun​

Test için kaynak tasarımın ve ilk SVG çıktısının değiştirilmemiş kopyasını saklayın. Sonra dosyayı düz metin olarak açıp en dıştaki svg etiketini kontrol edin. XML olarak ayrıştırılan bağımsız bir SVG belgesinde SVG ad alanı ilan edilmelidir; yaygın kök biçimi xmlns="http://www.w3.org/2000/svg" kullanır. Satır içi HTML ise tarayıcı tarafından farklı ayrıştırılır. viewBox dört sayıyla çizimin koordinat alanını tanımlar.

W3C SVG belge yapısı, SVG 2 ad alanını ve kök yapıyı; koordinat sistemi bölümü ise viewBox değerlerinin görüntüleme alanına nasıl eşlendiğini açıklıyor. viewBox genişliği veya yüksekliği sıfırsa ilgili öğe çizilmez; sınırlar içeriği kapsamıyorsa çizimin kenarları kırpılabilir.


Bu parça yalnızca yapı örneğidir; kendi dosyanızın koordinatlarını 320×180'e zorlamayın. width ve height ekrandaki başlangıç boyutunu, viewBox ise iç koordinat sistemini etkiler. Aynı şey değildirler.

Dosyayı üç farklı kullanımda açın​

SVG'yi dosya yöneticisinden çift tıklayarak açmak ilk sinyali verir ama web testinin tamamı değildir. Dosyayı yerel bir HTTP adresinden sunun; böylece gerçek sitedeki URL, içerik türü ve bağlı kaynak davranışına daha yakın bir ortam oluşur.

1. Bağımsız belge: http://127.0.0.1:8000/logo.svg gibi doğrudan açın; XML ayrıştırma hatası veya kırpılma var mı bakın.
2. Resim olarak: Hedef sayfadaki gibi <img> içinde deneyin; farklı kapsayıcı genişliklerinde oranı ve netliği kontrol edin.
3. Satır içi SVG: Yalnızca projede bu yöntem kullanılacaksa işaretlemeyi HTML'e gömüp CSS, kimlik ve erişilebilirlik davranışını ayrıca sınayın.

Geliştirici araçlarının Network bölümünde isteğin 200 döndüğünü ve sunucunun SVG'yi Content-Type: image/svg+xml ile sunduğunu kontrol edin. Yerel dosya olarak açılan bir çizim, sunucuda yanlış yol veya yapılandırma nedeniyle yine de yüklenmeyebilir.

Bağlı resim, yazı tipi ve kimlikleri arayın​

Tasarım aracı bazen resmi SVG'nin içine gömmek yerine bilgisayardaki bir dosya yoluna bağlar. <image href="...">, haricî stil dosyası veya web fontu kullanılıyorsa SVG başka klasöre taşındığında kaynak kaybolabilir. Logo ve ikon gibi küçük varlıklarda mümkün olduğunca kendi kendine yeterli bir dosya teslim etmek daha dayanıklıdır.

Metin nesnesi kullanılıyorsa hedef cihazda font bulunmadığında satır genişliği değişebilir. Metni yola dönüştürmek görünümü sabitleyebilir; fakat metnin düzenlenebilir, seçilebilir ve erişilebilir olma niteliğini azaltır. Karar, varlığın amacına göre verilmelidir.

Satır içi kullanımda gradient, clipPath, mask ve filter kimliklerine dikkat edin. Aynı id değerlerini taşıyan iki SVG aynı sayfaya konduğunda url(#...) başvuruları beklenmeyen tanıma yönelebilir. Çıktı aracının ürettiği id değerlerini sayfa bağlamında da test edin.

Gerçek küçük testin gösterdiği sınır​

Bu yazı için yalnız bu kontrol amacıyla 320×180 bir test SVG'si hazırlandı: ad alanı, viewBox, title, desc, gradyan ve metin içeriyordu. Dosya yerel HTTP sunucusundan Chromium'a hem doğrudan hem de 160 piksel genişliğinde <img> olarak verildi. İstek 200 döndü; görüntü 160×90 ve 1,778 oranıyla çizildi.

Aynı testte SVG'de sabit width ve height olmadığı için tarayıcının bildirdiği doğal piksel boyutu 320×180 değil, 267×150 oldu. Bu bir evrensel tarayıcı garantisi değil; tam tersine, viewBox değerini dosyanın doğal CSS piksel boyutu sanmamak gerektiğini gösteren sınırlı bir smoke test. Önemli sonuç, hedef kapsayıcıdaki oranı ve görünümü gerçekten ölçmek.

Görsel kontrolü doğrulama ve erişilebilirlikle tamamlayın​

W3C Markup Validation Service dosya yükleme veya doğrudan girdiyle işaretleme hatalarını bulmaya yardımcı olur. Ancak doğrulamanın geçmesi; rengin doğru, fontun mevcut, çizimin kırpılmamış veya erişilebilir olduğunu kanıtlamaz. Validator ile tarayıcı kontrolü birbirinin yerine geçmez.

SVG bir <img> ile kullanılıyorsa anlamına uygun alt metni HTML'de verin. Satır içi ve anlamlı bir grafikse title kimliğini aria-labelledby ile, uzun açıklama gerekiyorsa desc kimliğini aria-describedby ile ilişkilendirip hedef tarayıcı/ekran okuyucu ortamında sınayın. W3C WAI görsel ipuçları, SVG'nin <img> olarak veya satır içinde kullanılmasına göre metin alternatifi yaklaşımını ayırıyor.

Yayından önce en az hedeflenen Chromium, Firefox ve Safari/WebKit ortamlarını; açık-koyu zeminleri; küçük ikon ve geniş görünümü kontrol edin. Her projede bütün tarayıcılar şart olmayabilir; test matrisi gerçek kullanıcı ve destek kapsamına göre yazılmalı.

SVG'nin teslim paketi içindeki yeri için logo dosyaları rehberine, vektör ile raster sınırı için vektör tasarımın gerçek avantajlarına, web maketi ile çalışan sayfa arasındaki fark için CorelDRAW web iş akışına bakabilirsiniz.

Sizde en çok hangi sorun çıkıyor: kırpılan viewBox, değişen font, kaybolan bağlı resim mi, yoksa aynı sayfadaki id çakışması mı? Dosyanın kendisini paylaşmadan hata türünü yazarsanız kontrol sırasını netleştirebiliriz.

Güncelleme: 16 Ağustos 2026. Tarayıcı desteği ve dışa aktarım davranışı araç sürümüne göre değişebileceği için hedef ortamda yeniden test edin.

---