SVG nedir; piksel görselden nasıl ayrılır?
Kurumsal web sitesinin logosu telefon ekranında da geniş bir monitörde de düzgün görünmelidir. SVG, Scalable Vector Graphics adının kısaltmasıdır. İki boyutlu grafiği XML biçiminde tanımlayan bir dosya standardıdır. Çizgiler, şekiller ve eğrilerle kurulan vektör çizimi büyütmek, küçük bir piksel görselini büyütmekten farklıdır; aynı çizimin farklı boyutlarda kullanılmasını kolaylaştırır.
JPEG veya PNG, görüntüyü piksel tabanlı olarak taşır. SVG ise vektör şekillerin yanında metin ve gömülü raster görseller de içerebilir. Dolayısıyla .svg uzantısını görmek, içindeki her öğenin vektör olduğunu veya dosyanın mutlaka hafif olduğunu kanıtlamaz. Bir fotoğrafı SVG içine yerleştirmek onu kendiliğinden vektör çizime dönüştürmez.
Tasarım tesliminde yalnız uzantıya bakmayın. Kaynak çizimin düzenlenebilir olması, renklerin doğru kalması, çizim alanının gereksiz boşluk taşımaması ve farklı boyutlarda okunması da önemlidir. Grafik ekrana sığsa bile içindeki ince çizgi veya küçük yazı anlaşılmayabilir. Ölçeklenebilirlik, her boyutta iyi tasarım yapılmış olduğu anlamına gelmez.
SVG hangi görseller için uygun?
Favicon ve küçük marka işaretlerinde olduğu gibi sade geometriler, SVG için iyi bir başlangıçtır. Logo, arayüz ikonu, süreç şeması ve basit veri görselinde formatı değerlendirin. Fotoğraf veya çok ayrıntılı dokuda ise raster seçeneklerle gerçek dosya boyutu ve görünümü karşılaştırın; bütün görselleri tek formata çevirmek hedef olmamalıdır.
Kararı kullanım yerine göre verin. Aynı marka işareti web sayfasında SVG, farklı bir platformun yükleme alanında PNG olarak gerekebilir. Hedef uygulamanın güncel içe aktarma ve dışa aktarma desteğini kontrol edin. Tarayıcıda açılması, e-posta aracı, belge düzenleyici veya sosyal platformda aynı biçimde kabul edileceğini göstermez.
Hareketli grafik ve mikro etkileşim mümkündür; fakat ziyaretçinin görevine katkısı açık olmalıdır. Bir fiyat çizelgesinin okunmasını zorlaştıran hareketi, yalnız format destekliyor diye eklemeyin. Etkileşimli şemada klavye kullanımı, açıklama ve mobil düzeni birlikte planlayın. Önce durağan sürümü anlaşılır hale getirmek iyi bir tasarım denemesidir.
| Görsel | Başlangıç seçeneği | Kontrol |
|---|---|---|
| Logo veya sade ikon | SVG | Küçük boyutta siluet ve çizgi kalınlığı |
| Süreç şeması | SVG ve metin açıklaması | Mobil okunabilirlik, ilişkilerin anlaşılması |
| Fotoğraf | Uygun raster format | Boyut, kalite ve yükleme ağırlığı |
| Çok karmaşık illüstrasyon | İki formatı karşılaştırma | Düğüm sayısı, dosya boyutu ve görünüm |
OKUMADAN SONRAKİ ADIMA
Görsel teslimini web projesiyle birlikte planlayın
Kaynak çizimlerinizi ve kullanım örneklerini paylaşın; uygun formatları ve yayın kontrolünü netleştirelim.
Çizim, dönüştürme ve dışa aktarmayı ayırın
Webflow geliştirme tesliminde görsel dosyayla birlikte düzenlenebilir kaynak ve kullanım notu istemek, sonraki değişiklikleri kolaylaştırır. SVG oluşturmak için vektör düzenleyici veya doğrudan kod kullanılabilir. Illustrator gibi araçlarda SVG dışa aktarma vardır. Ücretsiz veya ücretli araç seçimini, ekip becerisi ve gereken düzenleme işlemleriyle değerlendirin; fiyat türü tek başına kalite ölçüsü değildir.
Bir çevrimiçi dönüştürücü, dosyanın paketini değiştirirken çizimin niteliğini korumayabilir. Raster logoyu otomatik izlemek fazla nokta, bozuk kenar veya gereksiz renk üretebilir. Sonucu kaynak logoyla yan yana inceleyin. Her dönüştürme aracının aynı performansı verdiğini varsaymayın; birkaç gerçek marka dosyasıyla çıktı ve yeniden düzenleme denemesi yapın.
Metinleri eğriye dönüştürmek görünüm bağımlılığını azaltabilir; fakat okunabilir metin olma özelliğini değiştirir. Yazı anlam taşıyorsa sayfada gerçek metin veya eşdeğer açıklama sağlayın. Teslim dosyasında kullanılan font, gömülü görsel ve lisans koşullarını kaydedin. Tasarımcının çalışma dosyasını koruyun; web için sadeleştirilmiş çıktıyı tek kaynak haline getirmeyin.
Önce çizimi düzenleyin
Gereksiz ayrıntıları ve boşlukları temizleyin; küçük ve büyük kullanım örneklerini inceleyin.
Sonra web çıktısı alın
İstenen boyut davranışını, metin tercihini ve gömülü kaynakları kontrol edin; çıktıyı tarayıcıda açın.
Kaynak ve çıktıyı ayırın
Düzenlenebilir dosyayı, yayımlanacak sürümü ve gerekli raster alternatifini anlaşılır adlarla teslim edin.
Dosya olarak eklemekle HTML içine yerleştirmek aynı değil
React web uygulamasında logo göstermek ile durumuna göre değişen bir grafik geliştirmek farklı ihtiyaçlardır. SVG, bir img öğesiyle dış dosya olarak kullanılabilir veya SVG işaretlemesi HTML içine yerleştirilebilir. Sade marka görselinde dış dosya yeterli olabilir; iç öğeleri stil ve etkileşimle yönetmek gerektiğinde uygulama yaklaşımını ayrıca değerlendirin.
Çizim alanını tanımlayan viewBox ve sayfadaki genişlik/yükseklik davranışını kontrol edin. Yanlış alan, kırpılmış çizgi ya da beklenmedik boşluk yaratabilir. Bileşen içinde tekrar kullanılan grafiklerin kimlik ve stil çakışmalarını deneyin. Tek bir örneğin düzgün görünmesi, aynı grafiğin sayfada birkaç kez kullanıldığında da düzgün çalışacağını kanıtlamaz.
Görsel olarak yüklenen SVG’de JavaScript çalıştırma ve dış kaynak kullanımı gibi davranışlar kısıtlanır; bu durum doğrudan açılan veya başka yollarla gömülen belgeyle aynı değildir. MDN kullanım bağlamlarını ayrı açıklar. İstediğiniz etkileşimi ve güvenlik koşulunu bu ayrımı dikkate alarak test edin.
Anlam taşıyan SVG için erişilebilir açıklama yazın
Teknik site denetimine görselin yalnız yüklenmesini değil, içerik olarak anlaşılmasını da ekleyin. SVG olmak kendiliğinden erişilebilirlik sağlamaz. Dış dosyayı img ile gösterirken uygun alternatif metin kullanın. HTML içindeki SVG için erişilebilir adlandırma yaklaşımı gerekir; kısa başlık veya görünür açıklamayla ilişkilendirme kullanımına göre seçilebilir.
Dekoratif şekil ile bilgi veren grafik farklıdır. Sırf süs olan bir çizimi gereksiz uzun açıklamayla tekrar ettirmeyin. Satış sürecini gösteren bir şemada ise yalnız “şema” demek ilişkileri aktarmayabilir. Önemli sıra, değer veya bağlantıları sayfada anlaşılır metinle sunun. Bilgiyi sadece renk farkına bırakan çizimleri de gözden geçirin.
Ekran okuyucuyla adı ve anlamı, klavyeyle etkileşim sırasını, küçük ekranda metnin okunmasını deneyin. MDN’nin SVG erişilebilirlik açıklaması teknik başlangıç sağlar. Gerçek kullanıcı görevi üzerinden değerlendirme yapın; dosyanın XML olması veya çizimin keskin görünmesi, kullanılabilirliğin tamamlandığı anlamına gelmez.
Dosya boyutu, güvenlik ve son görünümü kontrol edin
Web sitesi yayın hazırlığında SVG çıktısını gerçek sayfa içinde karşılaştırın. Karmaşık yollar, gizli öğeler, gömülü raster görseller veya editör bilgileri dosyayı büyütebilir. Sadeleştirme ve aktarım sıkıştırması yararlı olabilir; sabit yüzde tasarruf vaat etmeyin. Değişiklikten önce ve sonra boyutu, görünümü ve yükleme davranışını ölçün.
Kullanıcıdan veya dış kaynaktan gelen SVG’yi güvenilir tasarım dosyası gibi doğrudan sayfaya yerleştirmeyin. Kabul edilen içerik, boyut sınırı, doğrulama ve güvenli sunum yöntemi uygulamanın yükleme politikasıyla belirlenmelidir. OWASP dosya yükleme rehberi, yalnız uzantı kontrolünün yeterli olmadığını açıklar. Kullanılmayan yükleme türlerini açmak gereksiz risk oluşturur.
Yayın kontrolünü bir logo açılışından ibaret tutmayın. Açık ve koyu zeminde, farklı ekran boyutlarında ve hedef tarayıcılarda rengi, kırpmayı, açıklamayı ve bozuk kaynakları inceleyin. Hata varsa kaynak çizimi mi, dışa aktarma mı, ekleme biçimi mi olduğunu ayırın. Onaylanan çıktıyı ve kullanım kararını saklayın; bir sonraki tasarım değişikliğinde aynı denemeyi yeniden yapabilirsiniz.
KARAR VERMEDEN ÖNCE
Sık sorulan sorular
SVG her zaman PNG’den küçük mü?
Hayır. Çizimin karmaşıklığı, gömülü görseller ve dışa aktarma çıktıyı etkiler. Aynı kullanım boyutunda görünümü ve dosya ağırlığını karşılaştırın; yalnız uzantıya göre karar vermeyin.
Fotoğrafı SVG’ye dönüştürmek kaliteyi artırır mı?
Otomatik olarak artırmaz. Fotoğrafı SVG içine koymak vektör çizim yapmaz; izleme işlemi de ayrıntıları değiştirebilir. Fotoğraf için uygun raster seçeneklerini değerlendirin.
SVG oluşturmak için kod bilmek gerekir mi?
Şart değildir. Vektör araçlarıyla çizip SVG olarak dışa aktarabilirsiniz. Dosyayı sayfaya eklemek, etkileşim veya erişilebilirlik davranışını kurmak gerektiğinde teknik destek yararlı olabilir.
SVG ekran okuyucuya kendiliğinden açıklanır mı?
Hayır. Kullanım biçimine göre alternatif metin, erişilebilir ad ve bilgi veren görseller için eşdeğer açıklama gerekir. Gerçek sayfa üzerinde deneme yapın.
Ücretsiz dönüştürücüler aynı sonucu verir mi?
Böyle bir garanti yoktur. Çizgi kalitesi, dosya boyutu, yeniden düzenleme ve lisans koşullarını birkaç örnekle kontrol edin. Sadece dosyanın açılması yeterli ölçüt değildir.
SVG favicon olarak kullanılabilir mi?
Tarayıcı hedefi ile Google Arama uygunluğunu ayırın. Güncel Google favicon biçim listesinde SVG yer almıyor. Arama görünümü için belgelenen bir format hazırlayın; tarayıcı kullanımını ayrıca test edin.
KAPSAMI BİRLİKTE BELİRLEYELİM
Görsel teslimini web projesiyle birlikte planlayın
Kaynak çizimlerinizi ve kullanım örneklerini paylaşın; uygun formatları ve yayın kontrolünü netleştirelim.
Web projenizi görüşün