Nasıl kullanılır?
- SVG dosyalarınızı kutuya bırakın ya da "SVG seç" ile açın. Her dosyanın yanında SVG'nin kendi ölçüsü (ör. 240×80) görünür; dış kaynak, gömülü HTML ya da ölçü eksikliği varsa sarı uyarı kutusu nedenini açıklar.
- Çıktı biçimini seçin: şeffaflık gerekiyorsa PNG, fotoğraf benzeri ve küçük dosya için JPG, web için WebP. JPG şeffaflık taşımadığından arka plan rengi seçmeniz istenir.
- Boyutu belirleyin. "Ölçek" SVG'nin kendi ölçüsünü katlar (2x Retina ekran, 4x–8x baskı). "Genişlik" ise tam piksel değeri verir, yükseklik oran korunarak hesaplanır; alt satırda hedef ölçü anında görünür.
- "Dönüştür"e basın. Tarayıcı, SVG'yi hedef boyutta vektörden çizer; büyütme bulanıklık yaratmaz. Her satırda sonuç ölçüsü ve dosya boyutu belirir.
- Tek dosyayı doğrudan indirin; birden çok dosyada "Hepsini zip olarak indir" ile tek arşiv alın ya da "Tek tek indir" ile ayrı ayrı kaydedin.
SVG ile PNG arasındaki fark
SVG (Scalable Vector Graphics) bir çizim tarifidir: "şu noktadan şu noktaya 2 piksel kalınlığında kırmızı çizgi, ortada 40 birim yarıçaplı daire" gibi matematiksel komutlardan oluşur. Hangi boyuta büyütürseniz büyütün keskin kalır, dosya genellikle küçüktür ve metin düzenleyicide açılıp değiştirilebilir. PNG ise piksel ızgarasıdır: her noktanın rengi ayrı ayrı kaydedilir. Büyütünce pikseller görünür, küçültünce ayrıntı kaybolur; buna karşılık her program, her e-posta istemcisi ve her sosyal ağ PNG'yi anlar. Logo, ikon ve şema için kaynak dosyayı daima SVG tutmak, ihtiyaç olduğunda gereken boyutta PNG üretmek en sağlıklı iş akışıdır; bu araç tam olarak o "ihtiyaç anı" içindir.
| Özellik | SVG | PNG | JPG | WebP |
|---|---|---|---|---|
| Yapı | Vektör (XML) | Piksel, kayıpsız | Piksel, kayıplı | Piksel, kayıplı/kayıpsız |
| Şeffaflık | Evet | Evet | Hayır | Evet |
| Büyütme | Sınırsız keskin | Pikselleşir | Pikselleşir | Pikselleşir |
| Uygun kullanım | Logo, ikon, şema, web | Logo, ekran görüntüsü, şeffaf görsel | Fotoğraf | Web sayfası görselleri |
| Her yerde açılır mı? | Tarayıcı ve tasarım programları; Office ve sosyal ağlarda kısıtlı | Evet | Evet | Modern tarayıcı ve uygulamalar |
Ölçek, DPI ve baskı için doğru boyut
SVG'nin kendi içinde DPI kavramı yoktur; "72 DPI" ya da "300 DPI" yalnızca piksel sayısının fiziksel ölçüye nasıl çevrileceğini söyleyen bir etikettir. Önemli olan toplam piksel sayısıdır. Baskı için kural basittir: baskı genişliği (inç) × 300 = gereken piksel genişliği. Örneğin 10 cm (3,94 inç) genişliğinde basılacak bir logo için yaklaşık 1200 piksel yeterlidir; A4 sayfa genişliği (21 cm) için 2480 piksel, 50 cm'lik afiş için 5900 piksel gerekir. Bu değeri "Genişlik (piksel)" alanına yazmanız yeterlidir; araç yüksekliği oranla hesaplar. Web için ise 1x (CSS pikseli) ve Retina ekranlar için 2x sürüm üretmek yaygın uygulamadır; sosyal medya kapakları ve uygulama mağazası görselleri çoğunlukla sabit piksel ölçüsü ister (ör. 1200×630, 1024×1024), bu durumlarda da "Genişlik" seçeneğini kullanın.
Tarayıcı tuvali tek kenarda 16.384 piksel ve toplamda yaklaşık 268 milyon pikselle sınırlıdır; bunun üstünde araç çevirmeden uyarır. Büyük afişler için ölçeği düşürüp baskıcıya SVG ya da PDF vermek daha doğrudur; vektör dosya her boyutta basılır.
Dış kaynaklar, fontlar ve neden uyarı aldınız
Tarayıcılar güvenlik gereği bir SVG'yi resim olarak çizerken onun içinden başka dosya yüklemesine izin vermez: <image href="https://…"> ile çağrılan fotoğraf, @import ile çekilen Google Fonts stili ya da başka bir dosyadaki sembole <use> ile yapılan atıf boş kalır. Araç dosyayı açarken bu parçaları tespit eder, sizi uyarır ve çıktıya karışmamaları için onları temizler; ayrıca gömülü <script> ve olay işleyicileri de atılır, böylece internetten indirilmiş bir SVG kodu çalıştıramaz ve hiçbir dış adres çağrılmaz. Çözüm: tasarım programında resimleri "göm" (embed) seçeneğiyle dışa aktarın; metinleri "yola çevir" (outline / convert to path) yapın ki font kurulu olmayan bilgisayarda da aynı görünsün. Metin içeren SVG'lerde araç bu nedenle hafif bir hatırlatma gösterir; yazı tipi bilgisayarınızda yüklüyse sonuç yine doğrudur.
viewBox, genişlik ve "ölçü bulunamadı" uyarısı
Bir SVG üç şekilde ölçü taşıyabilir: width/height öznitelikleri (px, mm, cm, pt gibi birimlerle), viewBox (çizim koordinat alanı) ya da ikisi birden. Araç önce genişlik/yüksekliği okur ve birimi CSS standardına göre piksele çevirir (1 mm = 3,78 px, 1 pt = 1,33 px); bunlar yoksa viewBox'ın ölçüsünü kullanır; biri eksikse oranı diğerinden türetir. Hiçbiri yoksa 512×512 varsayar ve uyarır; bu durumda çizim kırpık çıkabilir. Inkscape'te "Belge Özellikleri → Sayfayı çizime sığdır", Illustrator'da "Çalışma yüzeyini sığdır" komutuyla düzeltip yeniden kaydedin. Yüzde (%) birimli ölçüler taşıyıcıya bağlı olduğundan yok sayılır.
Neden Bilişim Ajans aracı?
- Dosya yüklenmez. Yayınlanmamış logo, teknik şema ya da müşteri tasarımı bilgisayarınızdan çıkmaz; sayfa çevrimdışı çalışır.
- Gerçek vektör çizim. SVG hedef boyutta rasterize edilir; önce küçük çizip büyütme yapılmaz, 8x'te bile kenarlar keskindir.
- Güvenli açma. Script ve dış kaynaklar temizlenir; şüpheli kaynaklı SVG'ler de güvenle çevrilir.
- Toplu işlem. Onlarca ikonu aynı ölçekte tek seferde çevirip zip olarak alırsınız.
- Dürüst ters yön. PNG'yi SVG'ye "gömme" seçeneği ne yaptığını açıkça söyler; sahte vektörleştirme vaat etmez.
Sık sorulan sorular
SVG dosyam sunucunuza yükleniyor mu?
Hayır. Dosya tarayıcınızda okunur, temizlenir ve bir tuvale çizilir; PNG de tarayıcıda üretilir. Hiçbir ağ isteği yapılmadığını geliştirici araçlarının "Network" sekmesinde görebilirsiniz; sayfa açıldıktan sonra internet kesilse bile araç çalışır.
Büyütünce neden bulanık olmuyor?
Çünkü büyütme piksel üzerinde değil, vektör tarifinde yapılır. Tarayıcı SVG'yi doğrudan hedef boyutta çizer; 100×100'lük bir SVG'yi 8x ile 800×800 yaparken her eğri yeniden hesaplanır. Bulanıklık ancak SVG'nin içine önceden gömülmüş bir piksel resim varsa, o parça için söz konusudur.
Baskı için kaç piksel seçmeliyim?
Baskı genişliği (cm) ÷ 2,54 × 300 formülüyle hesaplayın: 10 cm için ~1200 px, 21 cm için ~2480 px, 30 cm için ~3540 px. "Genişlik (piksel)" seçeneğine bu değeri yazın. Mümkünse baskıcıya SVG ya da PDF'in kendisini verin; vektör dosya her boyutta nettir.
Çıktıda yazılar farklı görünüyor, neden?
SVG'deki metin bir yazı tipine atıf yapar; o font bilgisayarınızda yoksa tarayıcı yedek font kullanır. Tasarım programında metni yola/eğriye çevirip (Inkscape: Yol → Nesneyi Yola Çevir; Illustrator: Type → Create Outlines) yeniden kaydedin; böylece harfler şekil olur ve her yerde aynı görünür.
"Dış kaynak bulundu" uyarısı ne demek?
SVG, internetten ya da başka bir dosyadan resim, font ya da sembol çağırıyor. Tarayıcı bunu güvenlik gereği yüklemez, araç da o parçaları çıkarır; çıktıda o alanlar boş kalır. Kaynağı SVG'ye gömülü (data: URI) olarak ekleyip tekrar deneyin.
Şeffaf arka plan korunuyor mu?
PNG ve WebP'de evet; "Şeffaf bırak" işaretliyken SVG'nin boş alanları şeffaf kalır. JPG şeffaflık desteklemez; bu yüzden JPG seçince arka plan rengi istenir ve boş alanlar o renkle dolar.
PNG'yi gerçek vektör SVG'ye çevirebilir miyim?
Bu araçla değil. "Ters yön" bölümü resmi yalnızca SVG kabına gömer; büyütünce yine pikselleşir. Gerçek vektörleştirme için Inkscape'in ücretsiz "Bitmap'i İzle" özelliğini ya da Illustrator "Image Trace"i kullanın; basit, düz renkli logolarda iyi sonuç verir, fotoğraflarda vermez.
Hata aldım: "SVG okunamadı"
Dosya geçerli XML değil, boş ya da uzantısı .svg olsa da içeriği başka bir biçim (PDF, PNG). Dosyayı bir metin düzenleyicide açın; ilk satırlarda <svg etiketi görmelisiniz. Görmüyorsanız dosyayı tasarım programından "Düz SVG" olarak yeniden dışa aktarın. Sıkıştırılmış .svgz dosyalarını önce açmanız gerekir.
İlgili araçlar
Logonuzun vektör sürümü yoksa ya da yeniden çizilmesi gerekiyorsa Bilişim Ajans tasarım ekibi yardımcı olur.