SVG dosyası nedir? Açma, kullanma ve oluşturma

SVG (Scalable Vector Graphics) dosyası, yalnızca sabit piksel ızgarası yerine XML ve vektör geometrisiyle tanımlanan bir görüntüdür. Resmi şekiller, yollar, metinler ve dolgular olarak saklayabildiği için bu vektör öğeleri yeniden boyutlandırıldığında keskin kalır. Dosya boyutu, öğelerin sayısına, karmaşıklığına ve SVG'nin raster içerik gömüp gömmediğine bağlıdır. W3C SVG 2 standardına bakın.

Bu rehber, SVG ile yeni karşılaşan herkes için yalın bir açıklama sunar: SVG'nin ne olduğu, içinde ne bulunduğu, hangi işlere uygun olup olmadığı, nasıl açıldığı ve elinizdeki bir görüntüden nasıl oluşturulduğu. Web geliştirme bilgisi gerekmez.

Kısa özet

• SVG, görüntüyü pikseller değil, kodla tanımlanmış şekiller olarak saklar; böylece bulanıklaşmadan her boyuta ölçeklenir.
• Logolar, simgeler, basit illüstrasyonlar, Cricut veya baskı işleri için çok uygundur. Fotoğraflar için uygun değildir.
• Herhangi bir web tarayıcısında, tasarım uygulamasında (Illustrator, Inkscape, Figma, Canva), hatta düz metin düzenleyicide açabilirsiniz.
• Vektör yazılımında tasarlayarak veya elinizdeki bir görüntüyü SVG'ye dönüştürerek oluşturabilirsiniz.

SVG ile normal görüntü (PNG veya JPG) arasındaki fark

PNG veya JPG bir raster görüntüdür: mozaik gibi sabit bir renkli piksel ızgarası. Yeterince yakınlaştırınca kareleri görürsünüz; PNG olarak kaydedilmiş logonun büyütünce bulanıklaşmasının nedeni budur.

SVG bir vektör görüntüdür: "buraya daire çiz, içini turuncu doldur, şuraya bu eğriyi çiz" diyen talimatlar kümesi. Resim her defasında bu talimatlarla yeniden çizildiği için her boyutta keskin görünür. Bütün cazibesi bu tek farktan gelir. (Hangisini ne zaman kullanacağınızın ayrıntıları için PNG ve SVG karşılaştırmasına bakın.)

SVG dosyasının içinde gerçekte ne var?

İnsanları şaşırtan kısım şu: SVG metindir. Not Defteri'nde veya herhangi bir kod düzenleyicide açıp okuyabilirsiniz. Temelde, her şeklin bir kod satırı olduğu etiketli metin biçimi XML'dir. Turuncu bir dairenin basit SVG'si şöyle görünür:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

Dosyanın tamamı budur. circle şekli çizer, cx/cy konumunu belirler, r yarıçapı, fill rengi ayarlar. SVG metin tabanlı XML olduğundan onu inceleyebilir ve bunun gibi basit bir dosyada tek niteliği düzenleyerek rengi değiştirebilirsiniz. SVG, modern tarayıcıların uyguladığı açık bir W3C standardıdır. W3C'nin SVG girişini okuyun.

Dosya .svgz uzantısıyla gelirse SVGZ ve SVG karşılaştırması, koduna nasıl erişeceğinizi ve düzenleme veya web'e sunum için hangi biçimi seçeceğinizi açıklar.

SVG ne için kullanılır?

SVG, grafiğin farklı boyutlarda keskin kalması veya şekiller olarak düzenlenmesi gereken her yerde başarılıdır:

• Logolar. Tek SVG, her boyut için ayrı dosya gerektirmeden hem kartvizitte hem afişte kullanılabilir.
• Web sitesi simgeleri ve grafikleri. Düğmeler, oklar ve basit illüstrasyonlar farklı ekran yoğunluklarında keskin kalır; performans yine dosyanın karmaşıklığına ve varlığın nasıl sunulduğuna bağlıdır.
• Cricut ve kesim makineleri. SVG standart kesim dosyası biçimidir. Makine vinil, kâğıt veya HTV kesmek için yolları izler. (Cricut için SVG dosyaları hazırlama rehberi bunu baştan sona anlatır.)
• Baskı ve tabelalar. Vektör pikselleşmeden her fiziksel boyuta ölçeklenir.

SVG neye uygun değildir?

SVG düz, grafik çizimler için yapılmıştır; bu yüzden fotoğraflara pek uygun değildir. Fotoğraf, düz bölgeler olmadan incelikle karışan milyonlarca renkten oluşur; onu şekillere zorlamak ya posterize, tabloya benzer bir sürüm ya da çok büyük ve karmaşık bir dosya üretir. Fotoğraf vektörleştirmeyi düşünüyorsanız önce fotoğrafı SVG'ye dönüştürünce gerçekte ne olduğunu okuyun. Gerçek fotoğraf ayrıntısı için JPG veya PNG'yi koruyun.

SVG dosyası nasıl açılır?

Yapmak istediğinize göre üç kolay seçenek var:

• Yalnızca görüntülemek için: Dosyayı herhangi bir web tarayıcısına sürükleyin. Yazılım gerektirmeden hemen görüntülenir.
• Görsel olarak düzenlemek için: Inkscape (ücretsiz), Illustrator, Figma veya Canva gibi tasarım uygulamasında açın. (SVG düzenleme rehberi, renk ve şekil değiştirmeyi anlatır.)
• Kodu görmek veya değiştirmek için: Not Defteri veya VS Code gibi düz metin düzenleyicide açın.

Dosya boş bir tuval olarak açılıyorsa yeniden kaydetmeden önce boş SVG kontrol listesini kullanın. Yollar tuval dışında, görünmez, kırpılmış veya yalnızca o uygulamada desteklenmiyor olabilir.

SVG nasıl oluşturulur?

İki yol var; doğru olan, neyle başladığınıza bağlıdır.

Sıfırdan tasarlayın. Logonuzu, simgenizi veya illüstrasyonunuzu vektör yazılımında (Inkscape, Illustrator, Figma veya Canva) çizip SVG olarak dışa aktarın. Dosya baştan vektör olduğundan en temiz sonucu bu verir.

Elinizdeki görüntüyü dönüştürün. Çoğu kişinin gerçekte ihtiyaç duyduğu budur. Logonuz veya çiziminiz yalnızca PNG veya JPG olarak varsa vektörleştirerek SVG'ye dönüştürürsünüz; bu işlem pikselleri düzenlenebilir şekiller olarak yeniden çizer. (Görüntü vektörleştirme nedir? yazısı süreci açıklar.)

PerfectVector ile nasıl görünür?

PNG veya JPG'niz varsa ve gerçek SVG gerekiyorsa dönüşüm yolunu kullanırsınız. PerfectVector uygun logoları, simgeleri ve düz illüstrasyonları düzenlenebilir SVG yolları ve renkli şekiller olarak yeniden oluşturur. Görüntünüzü SVG'ye dönüştürün, ücretsiz önizlemeyi kaynakla karşılaştırın ve tamamlanmış dosyanın kilidini açmak için bir kredi harcamadan önce yollarını inceleyin.

SVG'nin kendisinin uygun olduğu işlerde en iyi çalışır: düz grafik çizimleri ve logolar. Ayrıntılı bir fotoğraf için hiçbir dönüştürücü gerçek fotoğraf niteliğinde vektör vermez; biz de aksini iddia etmek yerine bunu söyleriz.

Kısa güvenlik notu

SVG, <script> öğesi dâhil etkin içerik barındırabilir; bu yüzden güvenilmeyen SVG, yalnızca görüntü biçimi olduğu için kendiliğinden güvenli sayılmamalıdır. MDN, SVG betiklerini doğrudan belgeler. Web sitesine yükleme iş akışında dosya türünü ve içeriğini doğrulayın, saklanan yüklemeleri yeniden adlandırın, boyut sınırları uygulayın ve dosyaları en az yetkiyle sunun; OWASP güvenilmeyen yüklemeler için bu katmanlı savunma yaklaşımını önerir. OWASP Dosya Yükleme Kontrol Listesi'ne bakın.

Sık sorulan sorular

SVG dosyası ne için kullanılır? Logo, web sitesi simgesi, düğme, basit illüstrasyon ve Cricut gibi makinelerin kesim dosyaları için. Grafiğin farklı boyutlarda keskin kalması veya şekiller olarak düzenlenmesi gereken her yerde SVG güçlü bir seçenektir. Dosyaları küçük olduğu ve kalite kaybetmeden ölçeklendiği için web'de yaygın kullanılır.

SVG dosyasını nasıl açarım? Görüntülemek için modern bir web tarayıcısına sürükleyin, görsel olarak düzenlemek için Inkscape, Illustrator, Figma veya Canva gibi uyumlu tasarım uygulamasında açın; XML'i incelemek için Not Defteri gibi metin düzenleyici kullanın. İşletim sisteminde küçük önizleme görünmemesi, tek başına dosyanın bozuk olduğunu göstermez; kontrol etmek için uyumlu görüntüleyicide açın.

SVG dosyası nasıl oluşturulur? Vektör yazılımında (Inkscape, Illustrator, Figma veya Canva) tasarlayıp SVG olarak dışa aktarın ya da elinizdeki PNG veya JPG logo gibi bir görüntüyü vektörleştirerek SVG'ye dönüştürün. Sıfırdan tasarlamak en temiz sonucu verir; yalnızca raster dosyanız varsa dönüştürmek hızlı yoldur.

SVG dosyası vektör dosyası mıdır? Evet. SVG, Scalable Vector Graphics'in kısaltmasıdır ve görüntüleri piksel yerine vektör şekilleri olarak saklar. Kalite kaybetmeden her boyuta ölçeklenmesinin nedeni tam olarak budur.

SVG ile PNG veya JPG arasındaki fark nedir? PNG veya JPG piksellerden oluşur ve çözünürlüğünün ötesinde büyütülünce bulanıklaşır. SVG şekillerden oluşur ve her boyutta keskin kalır. PNG ve JPG fotoğraflar için; SVG ise logo, simge ve grafikler için daha uygundur.

SVG dosyasını Microsoft Word veya Office'te açabilir miyim? Evet, desteklenen Microsoft 365 ve Office sürümlerinde. Microsoft, SVG dosyası eklemeyi ve renk veya stil değiştirmek için Grafik Biçimi kontrollerini kullanmayı belgeler; mevcut kontroller uygulamaya ve sürüme göre değişebilir. Microsoft'un SVG düzenleme rehberine bakın.

Kaynaklar

1. W3C — Scalable Vector Graphics (SVG) 2 — SVG öğelerinin, geometrisinin, görüntülenmesinin ve XML sözdiziminin normatif tanımı.
2. W3C — SVG'de gömülü içerik — SVG içine gömülen raster görüntülerin ve diğer içeriğin standart davranışı.
3. MDN — SVG'de <script> — SVG'nin çalıştırılabilir betik içerebildiğini gösteren referans.
4. OWASP — Dosya Yükleme Kontrol Listesi — Güvenilmeyen yüklenmiş dosyaları kabul etme ve sunma için güvenlik kontrolleri.
5. Microsoft Destek — Microsoft 365'te SVG görüntülerini düzenleme — SVG grafikleri için resmî Office desteği ve düzenleme iş akışı.

---

SVG, çizimi sabit piksel ızgarası yerine yollarla tanımlayabilir. Uygun düz çiziminiz yalnızca PNG veya JPG olarak varsa PerfectVector ile vektörleştirin, önizlemedeki şekilleri inceleyin ve kilidi açılmış SVG'yi düzenleme, baskı veya kesimde kullanacağınız araçta test edin.