Geliştiriciler için SVG: Temelleri, Yararları ve Dezavantajları Anlama

Grafikler, web sitelerine benzersiz ifadeler getirir ve aynı zamanda geliştiricilerin kullanıcılara derin fikir ve kavramları zahmetsizce iletmelerine yardımcı olur. İnternette önemli bir unsurdur ve 1999'dan beri komut dosyasına dönüştürülebilir hale gelmiştir, bu da görüntülerin web üzerinde daha karmaşık bir şekilde sunulmasına olanak tanır.

Farklı tarama görüntü dosyası türlerinin kullanımına çok aşina olabilirsiniz: JPG, PNG ve GIF. Biraz hatırlayalım. 256 renk (8 bit) desteği ile GIF (Grafik Değişim Biçimi), alfa saydamlığı hariç, animasyon ve saydamlık için olağanüstü bir biçimdir. PNG (Taşınabilir Ağ Grafiği) formatı, animasyonlara ihtiyaç duymamanız koşuluyla, 16 milyondan fazla renk (24 bit) ve her türlü şeffaflık desteğiyle çok daha iyidir.

Web üzerinde en yaygın olarak kullanılan görüntü formatı JPG veya JPEG (Joint Photographic Experts Group), özellikle sıkıştırılabilir olması nedeniyle 16 milyondan fazla rengi destekler; Gri tonlama için piksel başına 24 bit veya 8 bit, ancak animasyon veya saydamlık desteği yoktur. Bu nedenle JPG, geliştiricilerin statik fotoğraflar için kullandığı ana grafik formatıdır. Genellikle web için bir görüntü formatı olmadığı için Bitmap'ten (BMP) bahsetmedim. BMP, bir görüntüdeki her pikselin kesin verilerini depolar, bu da dosyaları gerçekten büyük (aynı çözünürlükteki JPG'lerin boyutunun 150 katından fazla) ve web sitesi grafikleri için ideal olmayan hale getirir.

Bu çözünürlüğe bağlı grafik formatları, çoğunlukla uygun şekilde kullanıldığında harikadır. Ancak, hepsinin ortak bir eksikliği var ve bu da web için tek vektör görüntü formatı olan SVG'nin ortaya çıkmasına neden oldu.

SVG nedir?

Skaler Vektör Grafikleri (SVG), yollar, çizgiler, daireler, desenler, metin renkleri vb. gibi iki boyutlu grafikleri tanımlayan Genişletilebilir İşaretleme Dili (XML) tabanlı bir görüntü formatıdır. Daha basit bir tanımda, bir görüntü formatına atıfta bulunur. tüm davranışı ve varlığı bir XML metin dosyası tarafından kontrol edilen iki boyutlu desteği ile.

Bir başka ilginç özellik de ölçeklenebilirliğidir; SVG görüntülerini çözünürlüklerini kaybetmeden herhangi bir ölçekte çekebilirsiniz. Bunun nedeni, SVG'lerin görüntüleri her pikselin hangi renge boyanacağını tanımlayarak görüntü oluşturan raster görüntü biçimlerinde olduğu gibi piksellerle değil, şekiller, sayılar ve koordinatlarla oluşturmasıdır.

SVG görüntülerini nasıl oluşturabileceğinizi ve projelerinizde SVG kullanmayı neden düşünmeniz gerektiğini görelim.

SVG görüntüleri nasıl oluşturulur

Herhangi bir metin düzenleyiciyi kullanarak SVG görüntüleri oluşturabilirsiniz, ancak süreç biraz tekniktir ve özellikle bazı karmaşık şekiller oluşturuyorsanız, biraz tasarım ve matematik bilgisi gerektirir. Sadece kod satırlarını kullanarak tuval üzerine bir uçak çizdiğinizi hayal edin. Ancak daha kolay bir yol var, ancak bunu SVG'nin temel kavramlarını anlamak için kullanalım.

Bir metin düzenleyicide SVG görüntüleri yapmak için SVG grafik öğelerini kullanırız. İşlem, grafik öğelerinizi <svg> ve </svg> etiketlerinin içine koordinatlarını, boyutlarını, renklerini vb. belirterek basitçe eklemektir. Örneğin, <rect> öğesi şekilde görüldüğü gibi bir dikdörtgen çizmek için kullanılabilir. aşağıdaki örnek.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

Yukarıdaki kod, .svg dosyası olarak kaydedilmiş ve bir tarayıcı ile açılmışsa, tarayıcınızın en sol üst köşesinde 300x 300 piksel boyutunda mavi bir dikdörtgen çizecektir. Şimdi, belgede neden iki yükseklik ve genişliğimiz olduğunu merak ediyor olabilirsiniz. Nedenini görmek için tüm kodu anlayalım. Daha önce belirtildiği gibi, tarayıcınıza bu satırların nasıl yorumlanacağını bildirmek için SVG kodunuz kök öğenin (<svg> ve </svg>) içine yazılmalıdır.

HTML'de olduğu gibi, SVG de kök öğede bir ad alanı bildirimi gerektirir. Yukarıdaki örnekte, "http://www.w3.org/2000/svg" xmlns parametresini ve kök öğe içinde W3C tarafından önerilen SVG sürüm 1.1'i sağladık. Kök öğenin içindeki boyuta, kök etiket içinde çizilen SVG görüntüsünün içinden görüneceği pencere veya tuval olan SVG bakış açısı denir. Bakış açısı, tarayıcınızda görünmeden önce tüm SVG nesnelerinizle en azından aynı boyuta sahip olmalıdır.

İkinci satırı anlamak daha kolaydır. Dikdörtgenleri çizmek için kullanılan <rect> elemanı, önerilen dikdörtgenin ölçülerinden başlayarak parametrelerini içerir. Kontur genişliği, çizgi kalınlığını tanımlarken, iki RGB renk modeli, tarayıcıya sırasıyla dikdörtgeni ve çizgiyi hangi rengin dolduracağını bildirir. Bu oldukça basit değil mi?

Şimdi, x ve y için aşağıdaki gibi bir değer bildirerek dikdörtgeni sayfanın içinde hareket ettirebiliriz:

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

Elbette, bunun alacağı fazladan alana uyum sağlamak için bakış açısı boyutunu artırmayı unutmayacağız.

SVG görüntüleri oluşturmanın en kolay yolu Adobe Illustrator, Inskape ve Sketch gibi çizim araçlarını kullanmaktır. Simgeler, karmaşık şekiller vb. arıyorsanız, sıfırdan oluşturmak yerine Bonsai.js ve D3.js gibi bazı JavaScript kitaplıkları SVG görüntüleri için iyi kaynaklardır.

SVG görüntüleri ekleme

SVG görüntülerini kullanmanın faydalarından biri, onları tasarımınızla bütünleştirme kolaylığıdır. Onlara bir img etiketinin src özelliğinde başvurmanız yeterlidir. Bu, web sitenizin klasörüne kaydedilen .svg dosyasına şu şekilde atıfta bulunmalıdır:

<img src='example.svg'>

Alternatif olarak, SVG kodlarını, daha önce belirtildiği gibi kodu başlatan ve bitiren <svg></svg> etiketleriyle HTML belgenize ekleyebilirsiniz.

Bunun gibi arka plan görüntüsü için CSS'nizdeki SVG görüntüsüne de başvurabilirsiniz:

.main-header {
background-image: url(example.svg);
}

Geliştiriciler için SVG kullanmanın faydaları

İnternetin mevcut grafik gereksinimleri göz önüne alındığında, sonraki web projelerinizde SVG'ye olan ihtiyaç göz ardı edilemez. Güçlü çözünürlüğe ve ekran boyutlarına sahip sayısız yeni cihazın yanı sıra, web siteleri artık o kadar çok etkileşim içeriyor ki, grafikleriniz üzerinde tam kontrol sahibi olmadan profesyonel düzeyde web siteleri sunmak zor olabilir.

Avantajlardan birkaçı şunları içerir:

Ölçeklenebilirlik ve yanıt verme

Çözünürlüğe bağlı olmayan bir görüntü formatı olarak SVG'ler pikselleşmeden süresiz olarak ölçeklenebilir. Bu, bir geliştirici olarak, cihazlarının çözünürlük gücü ve ekran boyutundan bağımsız olarak her kullanıcıya birinci sınıf grafik görüntüler sunmanıza olanak tanır. Her boyutta keskin ve canlı olacak çarpıcı görseller oluşturmak için farklı yolları, şekilleri ve metin öğelerini birleştirebilirsiniz.

Bu, sabit boyutlara sahip raster görüntü formatlarının hiçbirinde mevcut değildir, çünkü aşırı derecede büyütüldüklerinde her alanı doldurmak için asla yeterli veriye sahip olmayacaklardır. SVG, görüntünün her ölçekte keskin kalmasını sağlamak için yolları sürekli bağlı tutmak için noktalar arasındaki mesafeyi hesaplar.

Son derece esnektir ve animasyonu destekler

Bir görüntünün son kopyasını veren raster görüntülerin aksine, SVG görüntüleri, bir metin düzenleyici veya özel çizim araçları kullanılarak kodları ayarlayarak tamamen düzenlenebilir. SVG öğelerinizin sınıf adlarını veya kimliklerini kullanarak, CSS kullanarak SVG resimlerinizi stillendirebilir veya canlandırabilirsiniz. SVG görüntülerinin animasyonu Web Animation API, SMIL veya WebGL ile de mümkündür.

En önemlisi, SVG görüntülerinizi diğer öne çıkan açık Web platformu teknolojileri ve belgeleriyle entegre edebilirsiniz. SVG'ler JavaScript ile yazılabilir ve HTML gibi CSS ile biçimlendirilebilir.

SEO dostu ve küçük dosya boyutu

Metin biçiminde var olan SVG görüntüleri, sayfa sıralamasında büyük bir varlık olan bir web sitesinin erişilebilirliğini artırır. Bunun ötesinde, arama motorları SVG öğesi metnini dizine ekleyebilir ve bu, kullanıcıların SVG dosyanızdaki anahtar kelimeleri kullanarak web sitenizi bulmasına olanak tanır.

SVG, indirilecek bir dosyası olmadığından ve HTTP isteğine ihtiyaç duymadan çok daha hızlı yüklenir. Bir raster görüntü dosyasının çözünürlüğünü iyileştirmek, nokta (piksel) sayısını artırmak anlamına gelir. Bu, web sitenizin yükleme süresini sürükleyecek olan resim boyutunu artıracaktır. SVG kullandığınızda bu durumdan çok uzaktır. Bir dizi talimat ve koordinat kullanılarak oluşturulan bir görüntü olarak, SVG dosya boyutları (optimize edildiğinde) diğer görüntü dosyası türlerine kıyasla inanılmaz derecede küçüktür. Bu, kullanıcı deneyimini iyileştirmeye devam ederken daha hızlı yükleme süresi, artan sayfa performansı, daha yüksek arama motoru sıralaması ile sonuçlanır. Bununla ilgili daha fazla bilgi için SEO Danışmanı Londra'yı ziyaret edin.

SVG'nin kendi Belge Nesne Modeli vardır

SVG, kendi yapısına sahip olduğu düşünülen ve normal DOM içinde konumlandırılan ayrı bir belge olarak bulunur. Bu itibar, herhangi bir boyutta bir bakış açısı oluşturmamıza, çeşitli boyutlarda tuval üzerine resimler çizmemize ve bunları SVG özelliklerini güncellemeden görüntülememize olanak tanıyan viewBox özelliği için çok önemlidir.

SVG, geleceğin resim dosyası formatıdır

İnanılmaz derecede muhteşem ekran çözünürlüğüne sahip daha güçlü cihazlar gelmeseydi, geliştiriciler görüntüleri farklı cihazlar için optimize etmenin ezici baş ağrılarıyla uğraşmak zorunda kalmayacaktı. Ancak, web sitelerinden artan etkileşim için artan açlıkla birleştiğinde, bundan birkaç yıl sonra bu daha kolay olmayacak.

Kullanıcıların bakış açısı boyutuna uyacak şekilde farklı görüntüler sunarak bu zorlukları yönetmek bir şekilde uygun maliyetli değildir. Bant genişliği, para tasarrufu ve kullanıcı deneyimini geliştirerek iş sürdürülebilirliği adına, SVG görüntü formatına geçme çabaları kaçınılmaz olarak birinci öncelik haline geliyor. Büyüyen bir SVG destekçisi topluluğu var.

W3C'nin 16 Ağustos 2011'de SVG 1.1'i (İkinci Baskı) piyasaya sürmesinden önce, daha yeni bir versiyon için potansiyel olarak incelenmekte olan SVG 1.0 ve 1.1 (Birinci Baskı), internetteki görüntüleri işleme şeklimizi zaten değiştiriyordu. Bu, mevcut web programlama durumumuzda hala çok kullanışlı olan normal raster görüntü formatından daha değerli bir şeyin vaadidir. SVG, her durumda en iyi görüntü formatı değildir. SVG'nin sonraki sürümlerinin SVG'nin bazı dezavantajlarının üstesinden gelmesi bekleniyor; Bu makalede daha sonra tartışılacaktır.

SVG görüntü formatı ne zaman kullanılır?

Elbette, çözünürlüğe bağlı görüntü formatları, fotoğraflar ve diğer ayrıntılı görüntüler için hala en iyisidir. Burada, SVG görüntü biçimlerinin en iyi olduğu yaygın durumların bir listesi bulunmaktadır.

1. Logolar ve simgeler
2. Çizelgeler, grafikler, haritalar, infografikler gibi etkileşimli görüntüler
3. animasyonlar
4. Uygulama arayüzleri
5. Düz diyagramlar ve çizimler
6. Aşırı duygusal veya şekil değiştirme gibi özel efektler
7. Düşük yoğunluklu sanat eserleri ve basit grafikler

Geliştiriciler için SVG'nin Dezavantajları

SVG tüm tarayıcılar tarafından desteklenmez: Eski tarayıcılar, SVG'lere, eski bir Windows XP'nin flash sürücülere veya onları bağlamaya çalıştığınızda Canon EOS 5DSr'nize davranacağı şekilde davranır. Özetle, SVG eski tarayıcılarda çalışmaz; IE8 ve altı. Bununla birlikte, eski tarayıcıların gelecekteki herhangi bir nedenin bir parçası olmadığı ve yalnızca birkaç kişinin hala bunları kullandığı gerçeği göz önüne alındığında, SVG'leri kullanmamak için önemli bir neden değildir.

SVG çok fazla ayrıntıyı desteklemez: Yolların ve noktaların bir karışımı olan SVG, piksel tabanlı tarama görüntü formatları kadar ayrıntı gösterecek çerçeveden yoksundur. SVG, kamerayla çekilen hiçbir şeyle çalışmaz. Bu nedenle, çok fazla ayrıntıya sahip fotoğraflar ve diğer grafik biçimleri, daha yüksek renk yoğunluğunu destekledikleri için raster görüntü biçimleri kullanılarak en iyi şekilde görüntülenir.

SVG kodunu anlamak: Geliştiricilerin çeşitli web programlama dillerini nasıl kullanacaklarını bildikleri kabul edilebilirken, bu yükü artırmanın zor olduğu kanıtlanmıştır. SVG kod kalıbı aslında zor veya web programlama dillerinden tamamen farklı değildir. Ancak dikkat çekici görüntüler oluşturmak veya bunları değiştirmek biraz çaba gerektirir. Bu, her geliştiricinin bitmap görüntüleri kullanışlı olduğunda ve yerleştirmek için çaba gerektirmediğinde çok fazla zaman harcamak isteyeceği bir şey değildir.

Çözüm

Geniş bir kullanıcı yelpazesine yanıt olarak bir web sitesindeki grafiklerin davranışı, bugün web geliştirmenin önemli bir yönüdür. Ve SVG görüntü formatı, genellikle mevcut tasarımlarımızda görüldüğü gibi birden fazla görüntü boyutu oluşturmak yerine en büyük çözümdür. Bunun nedeni, tarayıcıların, herhangi bir ölçekte net ve net görüntüler sağlayan bir dizi talimat kullanarak görüntünün nasıl oluşturulması gerektiğini hesaplamasıdır.

Bitmap görüntüler, fotoğraflar gibi oldukça ayrıntılı görüntüler için en iyisi olmaya devam ederken, SVG görüntüleri simgeler, logolar, çizelgeler, infografikler vb. gibi daha az ayrıntılı görüntüler için kullanılır. Bunun için Illustrator veya Sketch gibi çizim araçlarına bağlı kalmanızı tavsiye ederim. simgeler ve popüler şekiller için SVG görüntüleri ve çevrimiçi kitaplıklar oluşturma. Kodlama, yalnızca SVG görüntülerinizi değiştirmek istediğinizde gerekli olmalıdır.

Lütfen SVG'yi nasıl kullandığınızı ve burada paylaşılmayan diğer havalı ipuçları hakkında bize bildirin.