koddla

Yazılımcıları bilgi ile güçlendirir.

Web’e vektör grafikleri ekleme

Vektör grafikleri birçok durumda çok kullanışlıdır — küçük dosya boyutlarına sahiptirler ve yüksek düzeyde ölçeklenebilirler, bu nedenle yakınlaştırıldığında veya büyütüldüğünde pikselleşmezler. Bu yazıda, web sayfamıza nasıl vektör grafikleri ekleyeceğimizi göreceğiz.

Not: Bu makale size SVG öğretmeyi amaçlamamaktadır; sadece SVG’nin ne olduğuna bakacağız ve web sayfalarına nasıl ekleneceğini göreceğiz.

Vektör grafikleri nedir?

Web’de iki tür görüntüyle çalışacaksınız: raster görüntüler ve vektör görüntüler :

  • Raster görüntüler bir piksel ızgarası kullanılarak tanımlanırlar – bir raster görüntü dosyası, her pikselin tam olarak nereye yerleştirileceğini ve tam olarak hangi renkte olması gerektiğini gösteren bilgileri içerir. Popüler web tarama biçimleri arasında Bitmap ( .bmp), PNG ( .png), JPEG ( .jpg) ve GIF ( .gif) bulunur.
  • Vektör görüntüleri algoritmalar kullanılarak tanımlanır — bir vektör görüntü dosyası, görüntünün ekranda oluşturulduğunda nasıl görüneceğini bilgisayarın kullanabileceği şekil ve yol tanımları ile sunar. SVG formatı Web’de kullanılmak üzere güçlü vektör grafikleri oluşturmamızı sağlar.

İkisi arasındaki fark hakkında bir fikir vermek için bir örneğe bakalım. Bu örneği Github’da bulabilirsiniz:vector-versus-raster.html — örnek siyah bir gölge ile kırmızı bir yıldızın görünüşte aynı iki görüntüsünü yan yana gösteri. Aradaki fark, soldakinin bir PNG ve sağdakinin bir SVG görüntüsü olmasıdır.

Sayfayı yakınlaştırdığınızda fark belirginleşir — yakınlaştırdıkça PNG görüntüsü pikselleşir, çünkü her pikselin nerede olması gerektiği (ve hangi renkte olması gerektiği) bellidir. Yakınlaştırıldığında, her pikselin boyutu ekrandaki birden fazla pikseli dolduracak şekilde büyütülür, böylece görüntü bozuk görünmeye başlar. Bununla birlikte, vektör görüntüsü güzel ve net görünmeye devam eder, çünkü boyutu ne olursa olsun, algoritmalar görüntüdeki şekilleri çözmek için kullanılır ve değerler büyüdükçe ölçeklenir.

İki yıldızlı görüntüler
Yakınlaştırılmış iki yıldız görüntüsü, biri net, diğeri bulanık

Not: Yukarıdaki görüntülerin tamamı aslında PNG’dir – ama her durumda soldaki yıldız bir raster görüntüsünü ve sağdaki yıldız ise bir vektör görüntüsünü temsil eder. Gerçek bir örnek için vector-versus-raster.html dosyasına bakın.

Ayrıca, vektör görüntü dosyaları raster eşdeğerlerinden çok daha hafiftir. Çünkü görüntüdeki her pikselin tek tek bilgisi yerine yalnızca bir kaç algoritma tutmaları gerekir.

SVG nedir?

SVG, vektör görüntülerini tanımlamak için XML tabanlı bir dildir. Temelde HTML gibi bir işaretlemedir. Ancak görüntünüzde görünmesini istediğiniz şekilleri ve bu şekillere uygulamak istediğiniz efektleri tanımlamak için birçok farklı öğe içerir. SVG, içerik değil de grafik oluşturmak içindir. En basit kullanımı ile <circle> ve <rect> gibi öğelerle çember veya dikdörtgenler oluştururlar. Daha gelişmiş SVG özellikleri arasında <feColorMatrix> (bir dönüşüm matrisi kullanarak renkleri dönüştürme) <animate> (vektör grafiğinizin parçalarını canlandırma) ve  <mask> (resmin üstüne bir maske uygulama) bulunur.

Basit bir örnek olarak, aşağıdaki kod bir daire ve bir dikdörtgen oluşturur:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

Bu, aşağıdaki çıktıyı oluşturur:

Yukarıdaki örnekten, SVG’nin elle kodlanmasının kolay olduğu izlenimini edinebilirsiniz. Evet, basit SVG’yi bir metin düzenleyicide elle kodlayabilirsiniz, ancak karmaşık bir görüntü için bu iş hızlı bir şekilde zorlaşmaya başlar. SVG görüntüleri oluşturmak için çoğu kişi aşağıdaki gibi bir vektör grafik düzenleyici kullanır: Inkscape veya illüstratör. Bu paketler, çeşitli grafik araçlarını kullanarak çizimler oluşturmanıza ve fotoğrafların yaklaşık değerlerini oluşturmanıza olanak tanır (örneğin, Inkscape’in İz Bitmap özelliği).

SVG’nin şu ana kadar değindiğimiz özelliklerinin yanı sıra bazı ek avantajları da vardır:

  • Vektör görüntülerindeki metinler erişilebilir haldedir (bu, SEO’nuza da yarar sağlar ).
  • SVG’ler, stil oluşturma/komut dosyası oluşturmaya uygundur, çünkü görüntünün her bir bileşeni, CSS aracılığıyla biçimlendirilebilen veya JavaScript aracılığıyla etkilenebilen öğelerdir.

Öyleyse insanlar neden SVG yerine raster grafikler kullanmak istesin ki? Eh, SVG’nin de bazı dezavantajları vardır:

  • SVG çok hızlı bir şekilde karmaşıklaşabilir, bu da dosya boyutlarının büyüyebileceği anlamına gelir; Dahası, karmaşık SVG’ler tarayıcıda önemli bir işlem süresi tutabilir.
  • Ne tür bir görüntü oluşturmaya çalıştığınıza bağlı olarak, SVG’yi oluşturmak raster görüntülerden daha zor olabilir.
  • SVG eski tarayıcılarda desteklenmez, bu nedenle web sitenizle Internet Explorer’ın eski sürümlerini desteklemeniz gerekiyorsa uygun olmayabilir (SVG, IE9’dan itibaren desteklenmeye başlamıştır).

Raster grafikler, yukarıda açıklanan nedenlerle, fotoğraflar gibi karmaşık hassas görüntüler için tartışmasız daha iyidir.

Not: Inkscape’de, yerden tasarruf etmek için dosyalarınızı Düz ​​SVG olarak kaydedin. Ayrıca, Web için SVG’lerin nasıl hazırlanacağını açıklayan makale.

Sayfalarınıza SVG ekleme

Bu bölümde, web sayfalarınıza SVG vektör grafikleri eklemenin farklı yollarını inceleyeceğiz.

Hızlı yol: img öğesi

Bir <img> öğesi aracılığıyla SVG gömmek için, tahmin ettiğiniz gibi, src niteliğine başvurmanız yeterli. Ayrıca height veya width özniteliğe (veya SVG’nizin doğal bir en boy oranı yoksa her ikisine de) ihtiyacınız olacaktır. Henüz yapmadıysanız, lütfen HTML’de Görseller‘i okuyun .

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87"
    width="100" />

Artıları

  • alt hızlı, tanıdık sözdizimi ile yerleşik metin eşdeğeri.
  • <img> bir <a> öğesinin içine yerleştirilebilir ve görüntü kolayca bir bağlantı haline getirilebilir.
  • SVG dosyası tarayıcı tarafından önbelleğe alınabilir, bu da gelecekte yüklenen görüntüyü kullanan herhangi bir sayfa için daha hızlı yükleme süreleri sağlar.

Eksileri

  • Görüntüyü JavaScript ile değiştiremezsiniz.
  • SVG içeriğini CSS ile kontrol etmek istiyorsanız SVG kodunuza satır içi CSS stilleri eklemelisiniz. (SVG dosyasından çağrılan harici stil sayfaları etkisizdir.)
  • Görüntüyü CSS sözde sınıflarıyla (:focus gibi ) yeniden biçimlendiremezsiniz.

Sorun giderme ve tarayıcılar arası destek

SVG’yi desteklemeyen tarayıcılar için (IE 8 ve altı, Android 2.3 ve altı), src özniteliğine bir PNG veya JPG’ye adresi yazılabilir, srcset ile ise SVG adresi verilebilir (srcset yalnızca yeni tarayıcılar tarafından tanınır). Bu durumda, yalnızca destekleyen tarayıcılar SVG’yi yükler; eski tarayıcılar ise PNG’yi yükler:

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

SVG’leri aşağıda gösterildiği gibi CSS arka plan resimleri olarak da kullanabilirsiniz. Aşağıdaki kodda, eski tarayıcılar anladıkları PNG’ye sadık kalırken, daha yeni tarayıcılar SVG’yi yükler:

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

<img>‘de olduğu gibi CSS yöntemi SVG’nin de JavaScript ile manipüle edilmesini engeller.

SVG’leriniz hiç görünmüyorsa bunun nedeni sunucunuzun düzgün kurulmamış olması olabilir. 

SVG kodunu HTML’e dahil etme

Ayrıca SVG dosyasını bir metin düzenleyicide açabilir, SVG kodunu kopyalayabilir ve HTML belgenize yapıştırabilirsiniz – buna bazen SVG’nizi satır içi yerleştirme veya SVG’yi satır içine alma denir. SVG kod parçalarınızın bir <svg> başlangıç ​​etiketi ile başlayıp bir </svg> bitiş etiketi ile bittiğinden emin olun. Sayfanıza ne yapıştırabileceğinize dair çok basit bir örneğe bakalım:

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

Artıları

  • SVG’nizi satır içine yerleştirmek bir HTTP isteğinden kaçınmamızı sağlar ve bu nedenle yükleme sürenizi biraz azaltabilir.
  • SVG öğelerine class ve id atayabilir ve bunları SVG içinde veya HTML belgeniz içine CSS ile biçimlendirebilirsiniz. 
  • SVG’yi satır içine almak SVG görüntünüzde :focus benzeri CSS etkileşimlerini ve CSS animasyonlarını kullanmanıza izin veren tek yaklaşımdır.
  • SVG işaretlemesini bir <a> öğesine sararak bir bağlantıya dönüştürebilirsiniz.

Eksileri

  • Bu yöntem yalnızca SVG’yi tek bir yerde kullanıyorsanız uygundur.
  • Ekstra SVG kodu HTML dosyanızın boyutunu artırır.
  • Tarayıcı, normal görüntü varlıklarını önbelleğe alacağı için satır içi SVG’yi önbelleğe alamaz, bu nedenle görüntüyü içeren diğer sayfalar, görüntüyü içeren ilk sayfa yüklendikten sonra daha hızlı yüklenmez.
  • Bir <foreignObject> öğesi ile yedek içerik ekleyebilirsiniz, ancak SVG’yi destekleyen tarayıcılar yine de tüm yedek görüntülerini indirir. Sadece eski tarayıcıları desteklemek için yükleyeceğiniz ekstra ek yükün gerçekten değerli olup olmadığını tartmanız gerekir.

Bir iframe ile SVG nasıl gömülür? 

SVG resimlerini tıpkı web sayfaları gibi tarayıcınızda açabilirsiniz. Bu nedenle, bir SVG belgesini <iframe> ile gömmek de mümkündür. Bu yöntem object’ten iframe’e – diğer gömme teknolojileri bölümünde çalıştığımız gibi yapılır.

İşte kısa bir örnek:

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

Ancak unutmamak gerekir ki bu kesinlikle seçilecek en iyi yöntem değildir:

Eksileri

  • Gördüğünüz gibi iframe bir yedek içerik mekanizmasına sahiptir, ancak tarayıcılar yalnızca iframe için tamamen destekten yoksunlarsa yedeği görüntüler.
  • SVG ve geçerli web sayfasının kökeni aynı olmadığı sürece SVG’yi işlemek için ana web sayfasında JavaScript kullanamazsınız.

Özet

Bu makale, vektör grafiklerinin ve SVG’nin ne olduğu, neden bilinmesi yararlı oldukları ve SVG’nin web sayfalarınıza nasıl dahil edileceği konusunda size hızlı bir başlangıç sağladı. Artık Web’deki seyahatlerinizde SVG ile karşılaşırsanız SVG’nin ne olduğunu bileceksiniz. Henüz bir SVG uzmanı olduğunuzu hissetmiyorsanız endişelenmeyin. 

Bu kılavuzun son makalesinde, resimlerinizin farklı cihazlarda daha iyi çalışmasını sağlayacak duyarlı resimleri ayrıntılı olarak keşfedeceğiz.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Back to top