Ölçeklenebilir Vektör Grafikleri (SVG) Görüntü Formatına Yönelik Bir Kılavuz

İnternetin vazgeçemeyeceğiniz bir yönü var: görseller. Web'in ilk günlerinde, katı, salt metin bir ilişkiydi. Ancak, artık net görseller göstermemize yardımcı olacak özel görüntü formatlarımız var. Ölçeklenebilir Vektör Grafikleri (SVG) formatı, mevcut en yeni ve en esnek formatlardan biridir.

Daha sonra açıklayacağız, ancak bir SVG, ön uçta bir resim olarak sunulan bir veri koleksiyonudur. Bu, görüntüyü işlemek için Basamaklı Stil Sayfalarını (CSS) kullanabileceğiniz anlamına gelir. Dahası, kalite kaybı olmadan gerektiği gibi yeniden boyutlandırabilirsiniz.

Bu gönderi için, Ölçeklenebilir Vektör Grafikleri ve size nasıl yardımcı olabilecekleri hakkında daha fazla konuşacağız. Bunları WordPress web sitenize nasıl ekleyeceğinizi de tartışacağız.

En Yaygın Web Görüntü Formatları Üzerine Hızlı Bir Astar

SVG'lere ve bunların nasıl kullanılacağına geçmeden önce, web için kullandığımız birincil görüntü formatlarından bahsetmeye değer. Dikkat edilmesi gereken üç şey var:

• Ortak Fotoğraf Uzmanları Grubu (JPEG). Adından da anlaşılacağı gibi, bir dijital kamera ile çekilmiş fotoğrafları görüntülemek istiyorsanız, bu format tam size göre.
• Taşınabilir Ağ Grafikleri (PNG). Adobe Illustrator'dakiler gibi oluşturulmuş grafikleri görüntülemek için PNG formatını kullanmak isteyeceksiniz.
• Grafik Değişim Formatı (GIF). Hey, herkes sosyal medyada tepki olarak kullanmak için TV şovlarının komik kliplerini sever! GIF, aynı zamanda taşınabilir olan animasyonlu grafikler için mükemmel bir formattır.

Bazıları istedikleri formatı seçecek olsa da, bu optimal bir yaklaşım olmayacak. Örneğin, her görüntüyü GIF yapmayı seçerseniz, astronomik dosya boyutları ve düşük kaliteli görseller görebilirsiniz. Buna karşılık, PNG daha uygun bir format olduğundan, grafikler için JPEGS kullanmak istemeyeceksiniz.

Ölçeklenebilir Vektör Grafik Formatı Nedir?

Bu bölümde bize katlanmak isteyeceksiniz çünkü bazı alanlarda teknik bilgiler alacağız. Ayrıca, SVG kavramı kafa karıştırıcı olabilir.

Ölçeklenebilir Vektör Grafikleri mevcut değil (bir çeşit). Aslında, bunlar bir grafik veya görüntü değil, bir Genişletilebilir İşaretleme Dili (XML) biçimidir. Farkında olmayanlar için bu, HTML'ye yakın bir kardeştir, ancak bu dilin bazı yönleri (önceden tanımlanmış etiketler gibi) yoktur.

Zaten anlayabileceğiniz bir karşılaştırma olarak, CSS kullanarak nasıl şekiller oluşturabileceğinizi düşünün. Bu, birazdan daha fazla konuşacağımız bir şey. Peki, bu CSS'nin standart bir dosya formatı ve yapısı (örneğin image.svg ) kullanarak çağırdığınız bir belge sarmalayıcıda pişirildiğini hayal edin.

HTML'nin başlıkları, paragrafları, bölümleri, listeleri ve daha fazlasını tanımlamak için bir çerçeve sağladığı gibi, SVG'nin de daireler ve dikdörtgenler gibi şekilleri tanımlamak için çerçeve sağladığını söylemek daha doğru olur. Ancak, bu hala SVG formatına neden sahip olduğumuzu (ve bazen buna ihtiyacımız olduğunu) açıklamıyor. Bunun hakkında daha sonra konuşacağız.

Neden SVG'lerimiz Var?

SVG'lerden önce, grafikleri görüntülemek için PNG'leri kullanırdınız. Web'deki ilk görüntüler GIF olabilir, ancak genel olarak PNG'ler baskın görüntü formatıdır. Soru çok fazla değil: “Neden SVG'lerimiz var?”, daha fazla “Mevcut görüntü formatlarında bir SVG'nin çözeceği eksik ne var?” Cevap: dinamizm.

Birincil web görüntü biçimlerine geri bakarsanız, ikisi gerçekten oluşturulmuş grafiklere uymuyor (JPEG ve GIF). Bu, PNG'leri zorlamaya bırakır. Bununla birlikte, PNG'ler, yalnızca şimdi modern web için belirgin olan birkaç sorundan muzdariptir:

• Statiktirler, görüntüyü çevrimdışı oluşturursunuz ve onu belirli bir formatta dışa aktarırsınız. Bu, biraz esnek olmadığı anlamına gelir.
• Ek olarak, görüntünün 'makyajını' değiştiremezsiniz. Oluşturmak ve görüntülemek için bir dizi cihazımız olduğu göz önüne alındığında, bazen bu 'görüntü pencerelerine' uyum sağlamanız gerekir. PNG'leri kullanarak yalnızca masaüstü ve büyük mobil cihazlar için tüm logo boyutlarını oluşturmak için gereken çabayı gösterin.
• PNG'ler hafif olabilir, ancak görüntü optimizasyonunun yapıldığından emin olmak tasarımcının ve site sahibinin sorumluluğundadır. Bir PNG, herhangi bir optimizasyon olmadan bazen bir megabaytın üzerinde ağır olabilir.

Ayrıca PNG'ler, yeterince yüksek görüntü kalitesi sağlayabilecek çok az seçeneğin olduğu bir zamanda bir boşluğun bir kısmını doldurdu. O zamanlar CSS emekleme dönemindeydi ve şu anda sahip olduğumuz tasarım ve geliştirme kapsamına henüz sahip değildik.

Örneğin, border-radius özelliğini sadece 2010'dan beri kullanabiliyoruz. Bu, yuvarlak kenarları ve hatta daireleri tanımlamanızı sağlar. Bunu, düğmelerde çokça iş başında göreceksiniz:

Ölçeklenebilen ve ekrana uyarlanabilen şekiller oluşturmak için CSS kullanacaksınız, ancak Ölçeklenebilir Vektör Grafikleri daha fazlasını yapabilir. Aslında, bunu yapmak için artık CSS yerine SVG'lere başvuracaksınız, ancak bunlar sihirli birer kurşun da değiller.

Ölçeklenebilir Vektör Grafiklerinin Artıları

Diğer tüm görüntü formatları gibi, Ölçeklenebilir Vektör Grafikleri de mükemmel değildir. Pek çok olumlu yanı var elbette:

• Bir SVG, genellikle sizin tarafınızdan herhangi bir müdahale olmaksızın, bir cihazın boyutlarına uyar. Bu, geliştirme veya oluşturma sürenizi kısaltır.
• Bir görüntüyle ilişkili dosya küçüktür, çünkü yalnızca bir SVG'ye ihtiyacınız vardır. Buna karşılık, bir PNG logosunun birkaç farklı boyut ve boyut sunması gerekir. Bu, sunucu alanını kaplar.
• Dahası, SVG'ler PNG'lerden daha performanslıdır, çünkü kilobayt maliyetinde yalnızca bir dosya yüklemeniz gerekir. PNG dosyalarının bu paketi, kalite, miktar ve optimizasyonlarına bağlı olarak megabaytlarda olabilir.

Genel olarak, SVG'lerle diğer görüntü formatlarından daha fazlasını yapabilirsiniz. Hem geliştirici hem de grafik tasarımcı, kod yoluyla veya özel bir çizim uygulamasından tipik bir oluşturmayı dışa aktararak SVG'ler oluşturabilir. Web'in gelişimiyle daha yakından bağlantılı oldukları için benimseme artıyor.

Ölçeklenebilir Vektör Grafiklerinin Dezavantajları

Ancak, her şey pembe değil. SVG'lerin hala farkında olmak isteyeceğiniz bazı sorunları var:

• Teknoloji, diğer temel web yönlerinin çoğundan farklı olarak gelişiyor. Birçok kişi Ölçeklenebilir Vektör Grafiklerinden çok şey beklediğinden , yapabilecekleriniz ile yapmak istedikleriniz arasında bir 'boşluk' vardır.
• Çoğu tarayıcıda temel SVG desteği mevcut olsa da, kullandığınız tarayıcıya bağlı olarak tam özellik seti hala mevcut değildir. Yine, SVG'lerin henüz görünmeyen daha fazla potansiyeli var: Formatın neler yapabileceğini görmek için daha gelişmiş işlevsellik için daha iyi tarayıcı desteğine ihtiyacımız var.
• Bazı durumlarda, SVG görüntülerinin daha az doğru veya açıkça yanlış göründüğünü görebilirsiniz. Bunun nedeni, beklediğiniz gibi bir site yüklemesine güvenmeniz gerektiğidir. Hatalar nedeniyle bir web sayfasını yeniden yüklemek zorunda kaldığınız bir zamanı hatırlıyorsanız, bunu yalnızca SVG görüntülerinizle görüntüleyebilirsiniz.

Ayrıca bazı durumlarda kodlama bilgisi olmadan SVG oluşturmanın daha zor olduğunu da söyleyebiliriz. Affinity Designer ve Adobe Illustrator gibi grafik programlarında çok daha iyi destek var. Google Çizim gibi uygulamalarda SVG dışa aktarma desteği de vardır:

Bu, gelişen bir alandır, ancak diğer görüntü formatlarıyla karşılaştırıldığında hala biraz geridedir.

Bu dezavantajlara rağmen, onlara karşı hafifletebilirsiniz. Elbette, temel kullanım için bunları neredeyse hemen uygulayabilirsiniz. Aslında, WordPress birkaç adımda bu desteği bile sunuyor ve bunu daha sonra tartışacağız.

WordPress Web Sitenizde SVG'ler Nasıl Kullanılır?

Kötü haber şu ki, WordPress'e herhangi bir çalışma yapmadan bir SVG yüklemek istiyorsanız, bunu yapamazsınız. Mevcut Ölçeklenebilir Vektör Grafikleri desteğiyle ilgili ek bir sorun, WordPress'in güvenlik nedenleriyle bu görüntüleri standart olarak yüklemenize izin vermemesidir:

Nedenleri bu makalenin kapsamı dışındadır. Kısacası, SVG formatı gerçek bir görüntü yerine bir belge olduğundan, kötü niyetli bir kullanıcı olası komut dosyası saldırıları oluşturabilir. Bunun anlamı, daha güvenli bir alternatif bulmanız gerekecek.

Web'in başka bir yerinde, SVG yüklemelerini etkinleştirmek için function.php dosyanıza bazı kodlar eklemek için talimatlarla karşılaşacaksınız. Ancak, güvenli olduğunu garanti edemediğimiz için bu adımdan geçmeyeceğiz. Bunun yerine, WordPress ile sıklıkla yaptığınız şeyi yapabilirsiniz: bir eklentiye dönün. SVG Desteğini öneririz:

Eklentiyi kurup etkinleştirdikten sonra, WordPress içindeki Ayarlar > SVG Desteği ekranına gidin. Bu size birkaç ekran gösterecek, ancak yalnızca Yöneticilerle Kısıtla? Ayarlar panelindeki onay kutusu.

Varsayılan olarak, eklenti tüm kullanıcıların SVG'leri yüklemesine izin verir. Bu, doğal güvenlik sorunlarına dayalı olarak kötü bir haber olabilir ve tam da bu nedenle WordPress bu dosyaları ilk etapta yüklemenize izin vermez. Ancak, bu kutuyu işaretlerseniz eklenti, SVG'lerin kullanımını standart olarak daha güvenli hale getirmenin yanı sıra yalnızca site yöneticilerine yüklemeyi kısıtlar.

Özetle

Web'de görüntüleri görüntülemenin birçok yolu vardır ve çoğu insan kullandıkları biçim hakkında iki kez düşünmez. Ancak, formatı ihtiyaca uygun hale getirmek için zaman ayırırsanız, tüm ekranlarda çarpıcı görünen ayrıntılı ve net görüntüler elde edersiniz.

Bu yazıda, Ölçeklenebilir Vektör Grafikleri hakkında birçok bilgi sunduk. Görüntüyü ihtiyaçlarınıza uyarlamak için CSS'yi kullanacaksınız ve manipülasyon kapsamı PNG'lerden ve JPEG'lerden çok daha büyük. Ayrıca hafiftirler - bu nedenle küçük ekranlar ve zayıf internet bağlantıları için mükemmeldir.

Web sitenizde Ölçeklenebilir Vektör Grafikleri kullanmak istiyor musunuz ve eğer öyleyse bu makale size yardımcı olacak mı? Aşağıdaki yorumlar bölümünde bize bildirin!

Resim kredisi: GDJ.