SVG Vektörü (.svg)

W3C Standart

Scalable Vector Graphics (SVG); etkileşim, CSS biçimlendirmesi ve animasyon desteğine sahip, iki boyutlu grafikler için XML tabanlı bir vektör görüntü formatıdır.

İcat Eden: World Wide Web Consortium (W3C)Yıl: 2001MIME: image/svg+xml

SVG biçimini PNG biçimine dönüştür

Tarayıcında SVG biçimini PNG biçimine ücretsiz dönüştür. Dosyaları cihazında anında dönüştür.

SVG biçiminden PNG biçimine dönüştürücü

SVG dosyasını çevrimiçi sıkıştır

Özel - dosyalar cihazınızdan asla ayrılmaz

SVG Sıkıştır

İncele ve Meta Veriler

İşletim sistemleri ve dosya çözümleyicileri, SVG dosyalarını başlangıçtaki ikili sihirli bayt dizisini inceleyerek tanımlar:

Bayt düzeyinde başlık imzası (sihirli baytlar)

İşletim sistemleri ve dosya çözümleyicileri, SVG dosyalarını başlangıçtaki ikili sihirli bayt dizisini inceleyerek tanımlar:

HEX İMZASI (OFSET 0):

3C 73 76 67

ASCII GÖSTERİMİ: <svg

Standartlaştırma: W3C Recommendation (SVG 1.1 / SVG 2)

Teknik Özellikler

Kapsayıcı mimarisi	2D vektör geometrisini tanımlayan XML tabanlı metin biçimlendirme belgesi
Sıkıştırma	Gzip / Brotli metin sıkıştırma (SVGZ, gzip sıkıştırması kullanır)
Bayt Düzeni (Endianness)	Geçerli değil (Metin tabanlı UTF-8 / UTF-16 karakter akışı)
Renk Uzayları	sRGB, CSS Color Module 4 (Display P3, lab, lch)
Kanallar ve Yapı	Sınırsız çözünürlüklü vektör şekilleri, bezier eğrileri, tipografi ve opaklık maskeleri
Maksimum Boyutlar	Çözünürlükten bağımsız (pikselleşme olmadan herhangi bir görüntü alanı boyutuna sonsuz şekilde ölçeklenir)
Şeffaflık	Tam değişken alfa şeffaflığı ve CSS harmanlama modları
Akış ve Aşamalı İşleme	Tarayıcı XML ayrıştırıcısı tarafından desteklenen aşamalı metin akışı ayrıştırma

Teknik karşılaştırma matrisi: SVG ve rakipleri

Teknik Nitelik	SVG (Güncel)	HTML5 Canvas	PDF	PNG
İşleme Modu	Muhafaza edilen modlu vektör DOM	Anında çizim yapan bitmap tuvali	Kalıcı modda sabit sayfa kapsayıcısı	Tarama (raster) piksel ızgarası
Biçimlendirme ve CSS	CSS sınıfları ve değişkenleri aracılığıyla tamamen biçimlendirilebilir	JavaScript canvas API'siyle yeniden çizim gerektirir	Dinamik CSS biçimlendirmesi yok	Sabit tarama pikselleri
Sonsuz Ölçeklenebilirlik	Evet (matematiksel vektör eğrileri)	Manuel çözünürlük ölçeklendirmesi gerektirir	Evet (vektör öğeleri)	Hayır (büyütüldüğünde pikselleşir)
Etkileşim	Yerel DOM olayları (üzerine gelme, tıklama, animasyonlar)	Manuel tıklama algılama hesaplamaları gerektirir	Statik belge	Görüntü haritası (image map) veya canvas gerektirir

Yaygın Bozulma Modları ve Hex Kurtarma Kılavuzu

Tarayıcı XML Ayrıştırma Hatası görüntüler: kapatılmamış belirteç veya eşleşmeyen etiket.

Kök Neden: Bozuk XML sözdizimi, eksik kapanış etiketleri veya kaçış karakteri kullanılmamış ve işaretleri ('&' yerine '&').

Kurtarma: XML linter'ıyla (xmllint file.svg) doğrula ve dengesiz etiketleri düzelt.

Güvenlik Analizi ve Ayrıştırıcı Saldırı Vektörleri

SVG, '<script>' etiketlerini ve harici varlıkları destekleyen çalıştırılabilir bir XML olduğundan, güvenilmeyen SVG'ler görüntülendiğinde önemli XSS ve SSRF riskleri oluşturur.

Bilinen Saldırı Vektörleri

Gömülü '<script>' etiketleri veya 'onload=' olay işleyicileri aracılığıyla Saklı Siteler Arası Betik Çalıştırma (Stored XSS).
Arka uç sunucularında ayrıştırıldığında yerel sunucu dosyalarını okuyan XML Dış Varlık (XXE) saldırıları.
Hizmet reddine neden olan Milyar Gülüş (Billion Laughs) XML varlık genişlemesi.

Savunmaya yönelik en iyi uygulamalar: SVG'leri sayfaya eklemeden önce her zaman DOMPurify ile temizle. Alternatif olarak SVG'leri 'Content-Security-Policy: default-src 'none'' üstbilgisiyle ya da komut dosyalarını otomatik devre dışı bırakan '<img>' etiketleriyle sun.

Tarihsel kökenler ve önemli dönüm noktaları

2018W3C SVG 2 Aday Önerisi, modern CSS biçimlendirmesini entegre ediyor.

2011SVG 1.1 (İkinci Sürüm), SVG’nin masaüstü ve mobil tarayıcılarda geniş destek kazanmasına yardımcı oldu.

2001W3C, VML ve PGML önerilerinden geliştirilen SVG 1.0 belirtimini yayımladı.

Temel Avantajlar ve Artılar

Sonsuz çözünürlük bağımsızlığı: Herhangi bir ekranda veya baskı ölçeğinde keskin çizgiler ve tipografi.
Logolar, simgeler ve kullanıcı arayüzü öğeleri için son derece küçük dosya boyutu.
Tarayıcı DOM'u içinde CSS ve JavaScript aracılığıyla tamamen betiklenebilir ve biçimlendirilebilir.

Teknik Kısıtlamalar ve Eksiler

Fotoğraflar veya karmaşık sürekli tonlu görüntüler için uygun değildir.
Binlerce düğüme sahip karmaşık vektör yolları, CPU işleme gecikmesine ve yüksek pil tüketimine neden olabilir.
XML yapısı gömülü betiklemeye izin verir; bu nedenle güvenilmeyen yüklemeler işlenmeden önce sıkı bir temizlemeden geçirilmelidir.

İlginç Teknik Bilgiler

Gzip bazı SVG dosyalarının boyutunu önemli ölçüde azaltabilir; küçülme belge içeriğine ve sıkıştırma ayarlarına bağlıdır.
viewBox özniteliği, fiziksel ekran piksellerine dinamik olarak eşlenen soyut bir koordinat tuvali tanımlar.
Eski web tarayıcılarında başlangıçta yerel SVG motorları yoktu; bu durum, 2011 civarında yerel tarayıcı desteği güçlenmeden önce Adobe'nin Adobe SVG Viewer tarayıcı eklentisini dağıtmasına yol açtı.

Sıkça Sorulan Teknik Sorular

SVG dosyaları kötü amaçlı kod içerebilir mi?

Evet. SVG geçerli bir XML olduğundan, doğrudan bir tarayıcıda yüklendiğinde veya satır içi (inline) bir '<svg>' öğesinde açıldığında yürütülen gömülü JavaScript ('<script>') içerebilir. SVG'leri bir '<img>' etiketi aracılığıyla sunmak, betik yürütmeyi otomatik olarak etkisiz hale getirir.

Ne zaman PNG yerine SVG kullanmalıyım?

Ekran boyutları değişse de net görünmesi ve dosya boyutunun küçük kalması gereken simgeler, logolar, grafikler, çizimler ve tipografi için SVG kullan. Fotoğraflarda PNG veya WebP kullan.

Büyük veya karmaşık SVG dosyalarını nasıl optimize edebilirim?

SVGO gibi araçlarla veya SVG'yi sıkıştırarak gereksiz meta verileri, Inkscape ya da Illustrator'dan kalan yorumları, görünmez grupları ve kullanılmayan ad alanı bildirimlerini kaldırıp vektör yollarını sadeleştirebilirsin.

İlgili SVG Dönüşüm Çiftleri

SVG -> PNG

Ölçeklenebilir, kod tabanlı SVG grafiklerini daha geniş uygulama uyumluluğu için sabit piksel ızgaralarından oluşan PNG raster görsellere dönüştür.

PNG -> SVG

Duyarlı web ölçeklendirmesi ve vektör uyumlu düzenlere entegrasyon için raster PNG görsellerini SVG XML vektör kapsayıcısına yerleştir.

WMF -> SVG

Eski 16 bit Windows GDI vektör çizim kayıtlarını çözünürlük kaybı olmadan modern, ölçeklenebilir SVG yollarına dönüştür.

EMF -> SVG

32 bit Windows Enhanced Metafile grafiklerini web ve tasarım yazılımlarında kullanabileceğin temiz, ölçeklenebilir SVG vektörlerine dönüştür.

DXF -> SVG

Bir DXF çizimini CAD SVG dışa aktarımına dönüştürmek, karmaşık mühendislik vektör verilerini web tarayıcıları ve vektör düzenleyiciler için hafif XML grafiklerine dönüştürür.

SVG -> DXF

Ölçeklenebilir Vektör Grafikleri (SVG), Çizim Değişim Formatına (DXF) dönüştürülerek web uyumlu görsel vektörler, bilgisayar destekli tasarım yazılımlarının gerektirdiği hassas matematiksel koordinatlara çevrilir.

SVG -> PDF

Bir SVG logosunu veya çizimini tek sayfalık PDF olarak paylaş. Ölçeklenebilir yollar sabit çözünürlüklü bir görsele dönüşür; bu nedenle yakınlaştırma vektör ayrıntılarını geri getiremez.