Ölçeklenebilir Vektör Grafiğine Bir Bakış (SVG)
Vektör grafikleri, baskı ortamlarında geniş çapta uygulanmıştır. Bir web sitesinde, SVG ile vektör grafikleri de ekleyebiliriz veya Ölçeklenebilir Vektör Grafiği. W3.org'daki resmi açıklamadan alıntı yapılan SVG şöyle tanımlanmaktadır:
XML'de iki boyutlu grafikleri tanımlamak için bir dil. SVG, üç tip objectsgrafik nesneye izin verir: vektör grafik şekilleri (örneğin, düz çizgiler ve eğrilerden oluşan yollar), görüntüler ve metinler.
Aslında 1999'dan beri var ve 16 Ağustos 2011'den itibaren W3C Tavsiyesi oldu. Yine de, SVG hala oldukça yetersiz kullanılıyor, oysa bir web sitesinde grafik veya resim sunmak için Bitmap yerine Vector kullanımında birçok avantaj var..
SVG'nin Avantajları
Web sitelerinde grafik sunma konusunda SVG, bazıları aşağıdakileri içeren Bitmap'e göre birkaç avantaj sunar:
Çözünürlük Bağımsız
Bitmap / raster grafiği çözünürlüğe bağlıdır - piksel üzerine kuruludur. Sunulan grafikler, belirli bir yakınlaştırma düzeyinde yeniden boyutlandırıldığında pikselleştirilmiş görünecek. Bu, doğada bağımsız olan vektör grafiğine gelmez, çünkü grafik onu matematiksel bir denklemle ifade eder. kaliteyi koruyarak herhangi bir zoom seviyesinde ölçeklenebilir, Retina Ekran'da bile.
HTTP İsteğini Azaltma
SVG doğrudan bir HTML belgesine gömülebilir svg etiketine göre, tarayıcı grafiğe hizmet vermek için bir istek yapmak zorunda kalmaz. Bu aynı zamanda web sitesi için daha iyi yükleme performansı sağlar.
Stil ve Komut Dosyası
İle doğrudan gömme svg etiketi ayrıca grafiği CSS ile kolayca biçimlendirmemize izin verir. Yapabiliriz nesne özelliklerini değiştir arka plan rengi, opaklık, kenarlıklar gibi normal HTML etiketleriyle yaptığımız gibi. Benzer şekilde, grafiği JavaScript ile de değiştirebiliriz..
Animasyonlu ve Düzenlenebilir
SVG nesnesi, animasyon öğesini kullandığında veya jQuery gibi JavaScript Kitaplığı aracılığıyla canlandırılabilir. SVG nesnesi ayrıca herhangi bir metin kodu düzenleyicisiyle veya Inkscape (ücretsiz) veya Adobe Illustrator gibi bir grafik yazılımıyla da düzenlenebilir..
Küçük Dosya Boyutu
SVG, benzer bir grafik sunumuna sahip olan Bitmap ile karşılaştırıldığında daha küçük bir dosya boyutuna sahiptir.
SVG ile Temel Şekillerin Çizilmesi
Spesifikasyona göre, aşağıdaki gibi bazı temel şekiller çizebiliriz dikdörtgen, daire, çizgi, elips, çok satırlı ve çokgen SVG ile ve tarayıcının SVG grafiğini oluşturması için, tüm bu grafik öğelerinin içine yerleştirilmesi gerekir. etiket. Daha fazla ayrıntı için aşağıdaki örnekleri görelim:
Hat
Çizmek bir çizgi SVG’de
Yukarıda gördüğünüz gibi, çizgi başlangıç noktası koordinatı ilk iki özellik ile ifade edilir. x1 ve x2, çizginin bitiş noktası koordinatı ile ifade edilirken y1 ve y2.
Ayrıca diğer iki özellik vardır, inme ve Darbe genişliği sırasıyla kenarlığın rengini ve kenarlığın genişliğini tanımlamak için kullanılır. Alternatif olarak, bu özellikleri ayrıca satır içi stilinde tanımlayabiliriz, şöyle:
sonunda aynısını yapar.
- Demoyu Gör “Hat”
Çoklu çizgi
Neredeyse benzer
makas Satırları oluşturan tüm koordinatları saklayan nitelikler.
- Demoyu Gör “Çoklu çizgi”
Dikdörtgen
Bir dikdörtgen çizmek de bununla kolaydır
- Demoyu Gör “Dikdörtgen”
Daire
Ayrıca bir daire çizebiliriz. 100 ile tanımlanan yarıçap r özellik:
İlk iki özellik, cx ve cy dairenin merkez koordinatını tanımlarlar. Yukarıdaki örnekte belirledik 102 ikisi için de x ve y Bu özellikler belirtilmezse koordinat, 0 varsayılan değer olarak alınacak.
- Demoyu Gör “Daire”
Elips
İle bir elips çizebiliriz x çizgi yarıçapı ve y çizgi yarıçapı rx ve ry öznitelik;
- Demoyu Gör “Elips”
Çokgen
İle
- Demoyu Gör “Çokgen”
Vektör Grafik Düzenleyiciyi Kullanma
Gördüğünüz gibi, HTML'de SVG ile basit nesneler çizmek oldukça kolaydır. Bununla birlikte, nesne daha karmaşık hale geldiğinde, bu uygulama artık ideal değildir ve size baş ağrısı verir..
Neyse ki yukarıda belirttiğimiz gibi, bir vektör grafik editörü kullanabiliriz. Adobe Illustrator veya Inkscape işi yapmak için. Bu yazılıma aşina iseniz, grafiği HTML kodunda kendiniz kodlamak yerine GUI'leriyle nesne çizmek kesinlikle çok daha kolaydır..
Inkscape ile çalışıyorsanız, Vektör grafiğinizi düz SVG olarak kaydedebilir ve ardından metin kodu düzenleyicide açabilirsiniz. Şimdi, dosyadaki SVG kodlarını bulmalısınız. Tüm kodları kopyalayın ve HTML belgenizin içine yapıştırın.
Veya, .svg bu elemanlardan birinin içinden dosya; Göm, iframe ve nesne, Örneğin;
Sonuçlar sonunda aynı olacak.
Bu örnekte, bu Apple iPod'u OpenClipArt.org'dan kullanıyorum.
- Demoyu Gör “iPod”
Tarayıcı Desteği
Tarayıcı desteği ile ilgili olarak, SVG IE8 ve önceki sürümler dışındaki tüm büyük tarayıcılarda çok iyi desteklenmiştir. Ancak bu sorun Raphael.js adlı bu JavaScript Kütüphanesi ile çözülebilir. İşleri kolaylaştırmak için, SVG kodumuzu Raphael destekli formata dönüştürmek için ReadySetRaphael.com bu aracı kullanacağız. İşte nasıl.
Her şeyden önce, indirmek ve dahil Raphaël.js'nin HTML belgenize kitaplık. Ardından, yükleyin .svg dosyaya kopyalayın ve oluşturulan kodu aşağıdaki yükün içine kopyalayın ve yapıştırın fonksiyon;
window.onload = function () // Raphael kodu buraya gider
İçinde vücut etiketini yazın div ile rsr id niteliği;
İşte bu, bitti. Aşağıdaki linkten örnek göz atın.
- Demoyu Gör “Raphael”
Son düşünceler
Demek SVG'nin temelleri bu. Şimdi bu konuyla ilgili adil bir anlayışa sahip olduğunuzu umarız. Sitenizi, herhangi bir ekran çözünürlüğü için optimize etmenin en iyi yoludur, hatta Retina ekranda kullanmak için.
Her zamanki gibi, maceracı bir kişiyseniz, bu konuda daha derine inmek için birkaç referans ve tartışma yaptık..
- SVG'ye Giriş - W3 Okulları
- SVG'den Bağımsız Çözünürlük - Smashing Magazine
- Neden SVG Kullanmıyorsunuz? - NetTuts
Okuduğunuz için teşekkürler ve bu yazıyı beğeneceğinizi umuyoruz.
- Demoyu Gör
- Kaynak İndir
