SVG Dosyası Nedir (Ve Nasıl Kullanırsınız)?

Yayınlanan: 2020-08-18

Ölçeklenebilir Vektör Grafiği (SVG), benzersiz bir görüntü formatı türüdür. Diğer çeşitlerin aksine, SVG'ler gördüğünüz görüntüleri oluşturmak için benzersiz piksellere güvenmez. Bunun yerine, 'vektör' verilerini kullanırlar.

SVG'leri kullanarak, diğer birçok kullanım örneğinin yanı sıra web tasarımı için kullanışlı olan herhangi bir çözünürlüğe kadar ölçeklenebilen görüntüler elde edersiniz. Bu yazıda şu soruyu soracağız: SVG dosyası nedir? Daha sonra size formatı nasıl kullanacağınızı öğreteceğiz.

Hadi hadi bakalım!

Youtube Kanalımıza Abone Olun

SVG Dosyası Nedir?

SVG'ler, vektörler kullanılarak oluşturulmuş grafiklerdir. Deneyimsizler için bir vektör, belirli bir büyüklük ve yöne sahip bir elementtir. Teoride, bir vektör koleksiyonunu kullanarak istediğiniz hemen hemen her tür grafiği oluşturabilirsiniz. Siyah kenarlıklı ve gölgeli mavi bir dikdörtgenin bu görüntüsünü alın, örneğin:

PNG formatında mavi bir kare.

Bu, çizimler ve çizimler için kullanılan, Taşınabilir Ağ Grafiği (PNG) adı verilen başka bir görüntü dosyası türüdür. Vektör grafikleri kullanarak benzer bir şeyi çoğaltmak istiyorsanız, bunu XML koduyla oluşturmanız gerekir (aynısı site haritaları için kullanımda bulunur). Aşağıdaki kod aynı sonucu verebilir: 

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

Teoride, bu kodu alır ve bir HTML dosyasına bırakırsanız, kullandığınız tarayıcı SVG dosyalarını desteklediği sürece PNG'ye benzer bir dikdörtgen kümesi görürsünüz. Her iki görüntü de aynı görünse de, SVG dosyaları diğer biçimlerin sunmadığı bir dizi avantaj sunar. Örneğin, SVG'ler ölçeklendikçe veya küçüldükçe görüntü kalitesini koruyabilirler.

PNG dikdörtgenini yakınlaştırmaya devam ederseniz, kalitesinin bir noktada düşmeye başladığını fark edeceksiniz. Daha karmaşık piksel tabanlı grafiklerle, bozulma çok daha hızlı belirgin hale gelir. Ancak, SVG'ler hemen hemen her çözünürlükte iyi görünür.

Neden bir SVG Dosyası Kullanmalısınız?

Birçok web sitesi PNG ve JPEG gibi biçimleri neredeyse birbirinin yerine kullanır. Yine de SVG'ler o kadar çok yönlü değildir. Vektörleri kullanarak karmaşık bir fotoğrafı yeniden oluşturmaya çalışırsanız, genellikle büyük ve kullanılamaz SVG dosyalarıyla karşılaşırsınız.

SVG formatı, bir dizi başka senaryo için harika bir seçenektir:

  • Logo tasarımı. Logoları web sitelerinde ve sosyal medyada muhtemelen yeniden kullanacağınız için, SVG kullanmak olası ölçeklenebilirlik sorunlarını çözer.
  • Diyagramlar. SVG'ler, diyagramlar ve düz çizgilere dayanan diğer her türlü illüstrasyon için mükemmel bir eşleşmedir.
  • Animasyonlu öğeler. SVG'leri canlandırmak için CSS'yi kullanabilirsiniz, bu da onları web sitesi tasarımında, özellikle mikro etkileşimler için yararlı bir bileşen haline getirir.
  • Grafikler ve grafikler. Animasyonları destekleyen ölçeklenebilir grafikler ve çizelgeler oluşturmak için SVG'leri kullanabilirsiniz.

SVG'ler XML biçimini kullandığından, bu aynı zamanda onları hem aranabilir hem de dizine eklenebilir hale getirir. Ekran okuyucular, doğru erişilebilirlik etiketlerini kullandığınız sürece SVG dosyalarını yorumlayabilir.

Son olarak, SVG dosyaları diğer formatlardaki yüksek çözünürlüklü eşdeğerlerinden çok daha küçük olma eğilimindedir. Kağıt üzerinde bu, bazı sayfa boyutlarınızı küçültebileceğiniz ve yükleme sürelerini azaltabileceğiniz anlamına gelir. Ancak, resimlerinizin çoğunu SVG'lere dönüştürmeyi planlamıyorsanız, performans artışı muhtemelen minimum olacaktır.

SVG Dosyası Nasıl Oluşturulur (2 Yol)

SVG dosyaları söz konusu olduğunda uygulayabileceğiniz iki yaklaşım vardır. Bunları sıfırdan oluşturabilir veya mevcut bir görüntüyü alıp dönüştürebilirsiniz. Manuel yöntemle başlayalım.

1. Manuel Olarak Bir SVG Dosyası Oluşturun

Bir SVG dosyası oluşturmak genellikle daha önce yaptığımız gibi vektör bilgilerini yazmanızı gerektirmez. Bu sadece konsepti göstermek için bir örnekti. Bunun yerine, diğer grafikler gibi SVG'ler yaratırsınız – bir tasarım programı kullanarak ve dosyayı bir SVG olarak kaydederek. Birçok modern grafik tasarım aracı, kutudan çıktığı gibi SVG'leri destekler. En iyi seçeneklerden bazıları şunlardır:

  • Adobe Illustrator, Photoshop, Animate ve InDesign
  • Microsoft Visio'su
  • Inkscape
  • GIMP

Bu listedeki son iki seçenek açık kaynaklı çözümdür. Bu, onları premium yazılım için ödeme yapmadan SVG'ler oluşturmayı denemek için harika bir seçenek haline getirir. Aslında, ihtiyacınız olan her şey olabilirler.

Grafik tasarım konusunda deneyiminiz yoksa, web siteniz için kendi logolarınızı veya diğer öğelerinizi oluşturmak zor olacaktır. Bu durumda en iyi seçeneğiniz mevcut görüntüleri alıp SVG'lere dönüştürmek olacaktır.

2. Mevcut Görüntüleri SVG'lere Dönüştürün

Görüntüleri diğer formatlardan SVG'lere dönüştürmek için kullanabileceğiniz birçok ücretsiz araç vardır. Son bölümde bahsettiğimiz yazılımların çoğu, resimlerinizi açmanıza ve SVG dosyaları olarak kaydetmenize olanak tanır.

Herhangi bir yazılım indirmek istemiyorsanız, çevrimiçi dönüştürme araçlarını da kullanabilirsiniz ve başvurabileceğiniz birçok hizmet vardır. Bir örnek, her tür dosya türünü SVG'lere dönüştürmek için kullanabileceğiniz Vector Magic'tir:

Vector Magic ana sayfası.

Bu aracı seviyoruz çünkü indirmeden önce SVG dosyanızın bir önizlemesini gösteriyor. Dosyayı indirmeden önce küçük değişiklikler ve düzeltmeler yapmak için yerleşik bir düzenleyici de kullanabilirsiniz:

Bir SVG dosyasını düzenleme.

Tabii ki, bu sadece bir seçenek. Diğer PNG ve JPG'den SVG'ye dönüştürücü hizmetleri, Convertio ve Img2Go'yu içerir. İhtiyaçlarınıza en uygun çözümü bulmak için biraz araştırma yapmak isteyeceksiniz.

Deneyimlerimize göre, çoğu SVG dönüştürücü benzer kalitede sonuçlar sunar. Mümkün olan en iyi sonuçlar için kullandığınız dönüştürücü, seçtiğiniz görüntüler kadar önemli değildir.

Genel bir kural olarak, yalnızca 'basit' görüntüler için SVG biçimini kullanmak mantıklıdır - yani, tanımlanmış kenarlıkları ve temiz çizgileri olan görüntüler. Görüntü ne kadar karmaşıksa, elle düzenleme veya canlandırma işi olan devasa bir SVG dosyasıyla karşılaşma olasılığınız o kadar yüksek olur.

Bir SVG Dosyası Nasıl Kullanılır (WordPress İçinde ve Dışında)

SVG'lerin kullanımı o kadar da zor değil. Web sitenize bir SVG dosyası eklemek, kodunu alıp görüntünün gitmesini istediğiniz yere bir HTML belgesine yapıştırmak kadar kolaydır.

Siz ve sitenizin ziyaretçileri SVG dosyalarını destekleyen tarayıcılar kullanıyorsanız (ve bugünlerde çoğu bunu yapıyor), öğeyi görebilirler. SVG'leri canlandırmak, CSS kullanımını gerektirdiğinden, elbette daha zordur.

Yine de WordPress kullanıyorsanız süreç değişir. İçerik Yönetim Sistemi (CMS), kullanıma hazır SVG'leri desteklemez. Dosyaları doğrudan web sitenize yükleyebilmek için SVG desteğini etkinleştirmek istiyorsanız, Safe SVG gibi bir eklenti kullanmak isteyeceksiniz:

Güvenli SVG eklentisi.

WordPress'te SVG desteğini manuel olarak etkinleştirmek de mümkündür, ancak süreç çok daha karmaşıktır. Bu durumda, bir eklenti kullanmak daha güvenli bir seçenektir.

Çözüm

Web sitenizi SVG dosyalarını kullanacak şekilde uyarlamak, hayal edebileceğinizden çok daha kolaydır. Asıl zorluk, SVG'leri sıfırdan tasarlamak veya formata dönüştürmek için doğru görüntüleri seçmektir. Neyse ki, ikisini birden yapmak için kullanabileceğiniz birçok araç var.

Bazı harika seçenekler arasında Adobe Illustrator, InDesign ve GIMP bulunur. Bu araçları kullanarak mevcut görüntüleri oluşturabilir ve SVG'lere dönüştürebilirsiniz. WordPress kullanıyorsanız, bu SVG'leri Safe SVG eklentisini kullanarak yükleyebilir ve ardından onları canlandırırken eğlenebilirsiniz.

SVG dosyalarının nasıl kullanılacağı hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde onlar hakkında konuşalım!

VectorsMarket / Shutterstock.com'dan makale resmi küçük resmi