SVG Nedir, Nasıl Düzenlenir?
SVG, görüntüyü piksellerle değil matematiksel şekillerle tanımlar. Bu yüzden ne kadar büyütürseniz büyütün asla bulanıklaşmaz; logolar ve simgeler için ideal biçimdir.
Metin dosyası olmasının avantajı
SVG dosyası aslında bir metin belgesidir. İçini bir metin düzenleyicide açıp rengi, boyutu veya bir şeklin konumunu doğrudan değiştirebilirsiniz. Tasarım programına ihtiyaç duymadan küçük düzeltmeler yapmak bu sayede mümkündür.
Sık yapılan düzenlemeler
- fill değerini değiştirerek rengi güncellemek
- viewBox ile görünür alanı ayarlamak
- width/height kaldırıp esnek ölçeklenmesini sağlamak
- Gereksiz meta verileri temizlemek
SVG Düzenleyici aracında kodu yapıştırıp sonucu anında görebilirsiniz.
SVG neden büyütünce bozulmaz?
JPG veya PNG bir görsel, renkli noktaların ızgarasıdır. Büyüttüğünüzde tarayıcı var olan noktaları esnetir ve kenarlar bulanıklaşır. SVG ise noktaları değil, çizim talimatlarını saklar: şu noktadan şu noktaya bir eğri çiz, şurayı bu renkle doldur. Ekranda gösterileceği anda bu talimatlar o anki boyuta göre yeniden çizilir. Bu yüzden bir SVG logo 16 pikselde de 1600 pikselde de aynı keskinlikte görünür.
Bunun ikinci bir sonucu daha vardır: SVG dosyaları genellikle çok küçüktür. Yüzlerce piksel yerine birkaç satır talimat saklandığı için basit bir simge birkaç kilobayt yer kaplar. Site hızını önemsiyorsanız simgeleri ve logoları SVG olarak sunmak, aynı görseli PNG olarak sunmaktan neredeyse her zaman hafiftir.
Kod olarak açıp elle düzenlemek
SVG dosyasını not defterinde açabilirsiniz; içinde etiketlerden oluşan, HTML'e benzeyen bir yapı görürsünüz. Bu, onu düzenlemeyi şaşırtıcı derecede kolaylaştırır. Bir logonun rengini değiştirmek için tasarım programı açmanız gerekmez; dosyadaki renk kodunu bulup değiştirmeniz yeterlidir.
- fill özelliği şeklin iç dolgu rengini belirler.
- stroke kenar çizgisinin rengi, stroke-width ise kalınlığıdır.
- viewBox çizimin koordinat alanını tanımlar; genişlik ve yükseklik bundan bağımsızdır.
- path etiketi en esnek şekildir; harfler ve karmaşık simgeler genellikle onunla çizilir.
- opacity değeri 0 ile 1 arasında saydamlık verir.
Bir renk değişikliği yapmak istiyorsanız dosyadaki tüm fill değerlerini değiştirmeniz gerekebilir; bazı çizimler onlarca ayrı parçadan oluşur. Aracın önizlemesinde değişikliği anında görebildiğiniz için deneme yanılma hızlı ilerler.
Ne zaman SVG kullanmamalı?
SVG çizimler için idealdir, fotoğraflar için değildir. Bir manzara fotoğrafını SVG'ye çevirmeye çalışmak, milyonlarca küçük şekil üretir ve dosya PNG'den kat kat büyük olur. Kural basittir: geometrik şekiller, logolar, simgeler ve grafikler SVG; gerçek fotoğraflar JPG veya WebP.
Bir de e-posta bültenleri gibi bazı ortamlar SVG'yi desteklemez. Böyle yerlerde SVG'yi PNG'ye çevirip kullanmak gerekir; çevirirken ihtiyacınız olan en büyük boyutu seçin, çünkü PNG'ye döndükten sonra ölçeklenebilirlik özelliği kaybolur.
SVG dosyalarında güvenlik
SVG bir metin dosyası olduğu ve içine betik gömülebildiği için diğer görsel biçimlerinden farklı davranır. Bir JPG dosyası yalnızca piksel taşır; bir SVG ise çalıştırılabilir kod barındırabilir. Bu yüzden birçok site kullanıcıların yüklediği SVG'leri kabul etmez veya içeriğini temizler.
Kendi sitenizde kullanacağınız SVG'leri güvendiğiniz kaynaklardan alın. Bilmediğiniz bir yerden indirdiğiniz dosyayı bir metin düzenleyicide açıp içinde betik etiketi olup olmadığına bakmak basit ve etkili bir kontroldür.
Yazı tipleri neden bozulur?
SVG içindeki yazılar, o yazı tipi görüntüleyen cihazda kurulu değilse başka bir yazı tipiyle çizilir; harfler yerinden oynar ve tasarım bozulur. Logolarda bu, en sık karşılaşılan hayal kırıklığıdır.
Çözüm, yazıları tasarım programında eğriye çevirmektir. Metin artık düzenlenebilir olmaktan çıkar ama her cihazda birebir aynı görünür. Logolar ve baskıya gidecek dosyalar için doğru olan budur; sonradan yazı değiştirmeniz gerekebilecek dosyalarda ise düzenlenebilir sürümü ayrıca saklayın.