SVG Nedir? Vektör Grafik Biçimi Rehberi

SVG, piksellerden değil çizim komutlarından oluşan bir görsel biçimidir. Bir logo, ikon ya da grafik SVG olarak kaydedildiğinde dosya "şu noktadan şu noktaya bir eğri çiz, içini şu renkle doldur" gibi talimatlar taşır. Bu yüzden SVG her boyutta keskin kalır, çoğu zaman çok küçüktür ve bir metin editörüyle açılıp düzenlenebilir. Bu yazıda SVG'nin W3C standartları içindeki yerini, dosyanın yapısını, tarayıcı ve yazılım desteğini, güvenlik risklerini ve SVG ile PNG ya da JPG arasında nasıl dönüşüm yapılacağını ayrıntılı olarak ele alıyoruz.

SVG nedir?

SVG (Scalable Vector Graphics, ölçeklenebilir vektör grafikleri), iki boyutlu vektör grafikleri tanımlayan, XML tabanlı bir W3C standardıdır. Uzantısı .svg, MIME türü image/svg+xml'dir. Gzip ile sıkıştırılmış hâli .svgz uzantısıyla kullanılır.

Raster biçimler (JPG, PNG, WebP) görüntüyü sabit bir piksel ızgarası olarak saklar; büyüttüğünüzde pikseller görünür hâle gelir. SVG ise şekilleri matematiksel olarak tanımlar ve tarayıcı ya da program onu ekranın o anki çözünürlüğünde yeniden çizer. MDN'nin görsel biçimleri rehberi de SVG'yi, çizim komutlarıyla ifade edilebilen ve gösterileceği boyut bilinmeyen ya da değişebilen görseller için ideal seçim olarak tanımlar; fotoğraflar için ise genellikle uygun değildir.

Tarihçe: SVG 1.0, 1.1 ve SVG 2

• 4 Eylül 2001: SVG 1.0 W3C Önerisi (Recommendation) olarak yayımlandı.
• 14 Ocak 2003: SVG 1.1 Önerisi yayımlandı. 1.1, dili modüllere ayırarak mobil profiller gibi alt kümelerin tanımlanmasını kolaylaştırdı.
• 16 Ağustos 2011: SVG 1.1 İkinci Baskı (Second Edition) yayımlandı. Bugün tarayıcıların temel aldığı kararlı sürüm budur.
• SVG 2: W3C yayın geçmişine göre 2012'den itibaren çalışma taslakları çıktı, ilk Aday Öneri Anlık Görüntüsü (Candidate Recommendation Snapshot) 15 Eylül 2016'da yayımlandı. En son anlık görüntü 6 Ekim 2026 tarihlidir; belge hâlâ Aday Öneri aşamasındadır.

SVG 2, 1.1 İkinci Baskı'nın üzerine kurulur; HTML ve CSS ile uyumu artırmayı hedefler. Filtreler, maskeleme ve yazı tipleri gibi bazı konular ayrı CSS ve FX modüllerine taşınmıştır. Pratikte tarayıcılar SVG 2'nin bir kısmını uygulamıştır; tüm özelliklerin her yerde çalıştığını varsaymamak gerekir.

SVG dosyasının yapısı

Basit bir SVG dosyası şöyle görünür:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Koordinat sistemi: viewBox, width ve height

viewBox, çizimin iç koordinat sistemini tanımlar (burada 0'dan 100'e). width ve height ise bu çizimin sayfada ne kadar yer kaplayacağını belirtir. viewBox olan bir SVG, CSS ile istenen boyuta orantılı olarak ölçeklenir. viewBox olmayan dosyalar ise yeniden boyutlandırıldığında kırpılabilir; logolarda en sık rastlanan hatalardan biri budur.

Temel öğeler

• Şekiller: rect, circle, ellipse, line, polyline, polygon ve her şeyi çizebilen path.
• Metin: text ve tspan. Metin seçilebilir ve aranabilir kalır; ancak yazı tipi görüntüleyen cihazda yoksa başka bir yazı tipiyle gösterilir.
• Gruplama ve yeniden kullanım: g, defs, symbol, use. İkon setleri genellikle tek dosyada symbol olarak toplanır.
• Boyama: düz renk, doğrusal ve dairesel gradyanlar, desenler, kırpma yolları, maskeler ve filtreler (bulanıklaştırma, gölge).
• Stil ve animasyon: CSS ile stil verilebilir; CSS animasyonları ve SMIL animasyon öğeleri hareket katabilir.
• Gömülü içerik: image ile raster görsel, foreignObject ile HTML ve script ile JavaScript eklenebilir.

Renk, şeffaflık, katmanlar ve sayfalar

SVG'de şeffaflık doğaldır: çizilmeyen alan boştur, opacity ve fill-opacity ile yarı saydamlık tanımlanır. Katman kavramı g gruplarıyla karşılanır; Inkscape ve Illustrator katmanları bu şekilde saklar. Renkler varsayılan olarak sRGB'dir; renk derinliği diye bir sınır yoktur çünkü renkler sayısal değer olarak yazılır. SVG çok sayfalı bir belge biçimi değildir; çok sayfalı bir çizim için PDF daha uygundur.

Destek: tarayıcılar, işletim sistemleri ve programlar

MDN'ye göre Chrome, Edge, Firefox, Opera ve Safari SVG'yi destekler. SVG doğrudan <img> ile, CSS background-image ile, satır içi (inline) olarak HTML'in içinde ya da <object> ve <iframe> ile kullanılabilir. Inkscape, Adobe Illustrator, Affinity Designer ve Figma gibi vektör programları SVG okur ve yazar. Microsoft Office uygulamalarının güncel sürümleri de SVG eklemeye izin verir.

Desteğin zayıf olduğu yerler de vardır: birçok sosyal ağ, e-posta istemcisi, mesajlaşma uygulaması ve yükleme formu SVG kabul etmez ya da önizleme göstermez. Bunun bir nedeni de aşağıda anlatılan güvenlik riskidir.

Güvenlik: SVG neden bir "belge" gibi düşünülmeli?

SVG bir XML belgesidir ve script öğesi, olay öznitelikleri (onload gibi) ve dış bağlantılar içerebilir. MDN'nin "SVG as an image" sayfasına göre SVG <img> ya da CSS arka planı olarak kullanıldığında tarayıcılar JavaScript'i devre dışı bırakır ve dış kaynakları (görsel, stil dosyası) yüklemez. Ancak bu kısıtlamalar dosya doğrudan açıldığında ya da <iframe>, <object> veya <embed> ile gömüldüğünde geçerli değildir.

Bunun pratik sonucu şudur: kullanıcıların SVG yükleyebildiği bir site, bu dosyaları kendi alan adında doğrudan sunarsa, içine gömülmüş bir betik o sitenin bağlamında çalışabilir (stored XSS). Alınabilecek önlemler:

• Yüklenen SVG'leri script, olay öznitelikleri, foreignObject ve dış bağlantılardan arındıran bir temizleyiciden geçirin.
• Kullanıcı dosyalarını ayrı bir alan adından, sıkı bir Content-Security-Policy ile ya da indirme olarak (Content-Disposition: attachment) sunun.
• Vektör özelliğine ihtiyaç yoksa yüklenen SVG'yi sunucuda PNG'ye çevirip yalnızca raster hâlini yayımlayın.

Kullanım alanları

• Logolar ve marka öğeleri: Tek dosya, kartvizitten tabelaya her boyutta keskin kalır.
• Arayüz ikonları: CSS ile renklendirilebilir, Retina ekranlarda bulanıklaşmaz.
• Grafikler, haritalar ve diyagramlar: D3.js gibi kütüphaneler veriyi doğrudan SVG öğelerine çizer.
• Favicon: Güncel tarayıcılar <link rel="icon" type="image/svg+xml"> ile SVG favicon kabul eder.
• Kesim ve baskı: Lazer kesim, vinil kesim ve nakış makineleri vektör yolları kullanır.

Avantajlar ve dezavantajlar

Sık karşılaşılan sorunlar ve çözümleri

Bir site ya da uygulama SVG kabul etmiyor

En kolay çözüm, dosyanın PNG kopyasını üretmektir. SVG'den PNG'ye dönüştürücümüz çizimi tarayıcınızda şeffaf zeminli bir PNG'ye çevirir; çıktı genişliğini piksel cinsinden siz belirlersiniz. Dosyanız sunucuya yüklenmez, cihazınızdan çıkmaz.

Metin başka bir yazı tipiyle görünüyor

SVG, yazı tipini dosyaya gömmez; görüntüleyen sistemde o yazı tipi yoksa yedek yazı tipi kullanılır. Bir görsel bağlamında dış yazı tipleri de yüklenmez. Tasarım programınızda metni dışhatlara (outline) çevirin ya da yazı tipini gömün.

SVG sayfada yanlış boyutta ya da kırpılmış görünüyor

Dosyada viewBox yoksa ya da width/height sabitse ölçekleme beklendiği gibi çalışmaz. Kök svg öğesine çizimi kapsayan bir viewBox ekleyin ve boyutu CSS ile verin.

Dosya beklenenden büyük

Tasarım programları SVG'ye editör meta verileri, gereksiz ondalık basamaklar ve gizli katmanlar yazar. SVGO gibi bir iyileştirici bunları temizler. Sunucuda gzip ya da Brotli sıkıştırması da metin tabanlı SVG'yi ayrıca küçültür.

Elimdeki PNG logoyu SVG yapmam gerekiyor

Raster bir görseli gerçek anlamda vektöre "çevirmek" mümkün değildir; yapılan iş izlemedir (tracing): şekiller algılanır ve dışhatlar olarak yeniden çizilir. PNG'den SVG'ye ve JPG'den SVG'ye araçlarımız 2 ile 8 arasında renk seçerek bu izlemeyi yapar. Sonuç basit logolarda ve çizimlerde iyi, fotoğraflarda kabadır. Bu araçlarda dosya güvenli bağlantıyla sunucularımıza yüklenir, orada izlenir ve en geç 30 dakika içinde silinir.

Dönüştürme ipuçları

• Hedef boyutu bilin: SVG'yi PNG'ye çevirirken, görselin kullanılacağı en büyük boyutu seçin; Retina ekranlar için iki katını alın. Bizim aracımızda en uzun kenar en fazla 4096 pikseldir, genişlik boş bırakılırsa küçük çizimler en uzun kenar 1024 piksel olacak şekilde büyütülür.
• Fotoğraf için JPG: SVG içinde gömülü fotoğraf varsa ve şeffaflık gerekmiyorsa PNG yerine JPG ya da WebP daha küçük sonuç verir; PNG'yi daha sonra görsel dönüştürücüde çevirebilirsiniz.
• Favicon üretimi: Logonuz SVG ise favicon oluşturucu SVG'yi de kabul eder ve pakete icon.svg ekler.
• İzleme için temiz kaynak: PNG'den SVG üretecekseniz yüksek çözünürlüklü, düz renkli ve gürültüsüz bir görselle başlayın.

Sık Sorulan Sorular

SVG ile PNG arasındaki fark nedir?

PNG sabit sayıda pikselden oluşur ve büyütüldüğünde bulanıklaşır. SVG şekilleri tanımlar ve her boyutta yeniden çizildiği için keskin kalır. Logolar ve ikonlar için SVG, fotoğraf ve ekran görüntüleri için PNG ya da JPG uygundur.

SVG dosyası virüs taşıyabilir mi?

SVG çalıştırılabilir bir program değildir, ancak içine JavaScript gömülebilir. Görsel olarak (<img>) gösterildiğinde betikler çalışmaz; doğrudan tarayıcıda açıldığında çalışabilir. Bilmediğiniz kaynaklardan gelen SVG'leri doğrudan açmak yerine bir görüntüleyicide ya da PNG'ye çevirerek inceleyin.

SVG'yi Word ya da PowerPoint'e ekleyebilir miyim?

Microsoft Office'in güncel sürümleri SVG eklemeyi destekler. Eski sürümlerde ya da dosyayı başka bir programla paylaşacaksanız PNG kopyası kullanmak daha güvenlidir.

SVG'den PNG'ye çevirince kalite düşer mi?

PNG kayıpsızdır, ancak çizim sabit bir piksel boyutuna sabitlenir. Yeterince büyük bir genişlik seçerseniz kalite kaybı hissedilmez; sonradan büyütmek ise bulanıklığa yol açar.

SVG animasyon destekler mi?

Evet. CSS animasyonları, SMIL animasyon öğeleri ve JavaScript ile hareket eklenebilir. PNG'ye çevrildiğinde yalnızca tek bir kare elde edilir.

Kaynaklar

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: SVG 2 yayın geçmişi
• MDN: SVG as an image
• MDN: Image file type and format guide