HTML5'te ölçeklenebilir vektör grafikleri. Grafik görselleri ekleme Svg html örnekleri
(Yekaterinburg'daki yazılım geliştirme konferansını ve diğer sunumları takip eden makaleyi inceleyin. Raporun Yekaterinburg'daki video versiyonutechdays.ru'ya bakın )
HTML5 Canvas ve SVG nedir?
HTML5 Kanvas
– öğe, raster grafiklerin çizilmesi için bir tuvaldir. Aslında boş bir blok verilen boyutlar JavaScript için özel API'leri kullanarak çizim yapabileceğiniz.
API, grafik temellerini görüntülemek, stilleri ayarlamak, dönüşümleri yapmak, tek tek piksellere erişmek ve görüntüleri ve videoları yansıtmak için kullanılan 45 özel yöntem ve 21 öznitelik içerir.
Kendim öğesi doğrudan HTML5 spesifikasyonunda tanımlanır. Bunun API'si ayrı bir belgede açıklanmaktadır - HTML Canvas 2D Context.
SVG
Müzik Eğlenceli Olabilir
Güzel müzikal ve grafik görselleştirme oyunu (http://musiccanbefun.edankwan.com/).
SVG'deki diyagram örnekleri
İnsan iskeletinin diyagramı, periyodik sistem kimyasal elementler ve solunum sistemi (http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml).
Yandex Haritaları
Gerçek hayattan daha yakın bir örnek, SVG kullanarak (tarayıcı destekliyorsa) rota çizme işlemidir. Ayrıca HTML5 Kampımızdaki “Haritalar ve SVG” konuşmasına da bakın.
Daha fazla örnek:
- Webin Güzelliği http://www.beautyoftheweb.com/ – gerçek dünyadan gerçek siteler
- Geliştirici: unplugged http://contest.beautyoftheweb.com/ – HTML5 uygulama yarışmasına katılan projeler
Canvas ve SVG arasındaki fark
Çeşitli senaryolarda, Canvas veya SVG, dinamik grafik oluşturma için daha uygun olabilir; bu konuya sonunda döneceğiz. Şimdilik biri ile diğeri arasındaki temel farklara bakalım:
| Tuval | SVG | |
| Biçim | Raster | Vektör |
| Ölçeklendirme | ||
| Erişim |
Bireysel Piksel Erişimi (RGBA) |
Erişim bireysel unsurlar(DOM) |
| Dizinlenebilirlik ve Erişilebilirlik |
Yalnızca son tarama görünür (şekilleri, metni vb. seçemezsiniz) - Erişilebilirlik açısından kötü |
Yapıyı görüntüleyebilirsiniz (örneğin, metnin tamamını dışarı çekin) |
| Stilizasyon |
API aracılığıyla oluşturulurken görsel stiller ayarlanır |
Görsel stiller niteliklere göre belirlenir; CSS'yi dahil edebilirsiniz |
| Programlama |
İlkellerle çalışmak için JS API'si |
Öğelerle çalışmak için DOM |
| Güncelleme |
Güncellemek için - üzerine çizim yapmak veya tamamen yeniden çizmek |
Bireysel elemanları değiştirmek mümkündür |
| Olaylar |
Fare olaylarını işlemenin kolay bir yolu yoktur. İmlecin altındaki nesneler manuel olarak tanımlanmalıdır. |
Fare olayları DOM aracılığıyla kolayca gönderilir ve otomatik olarak işlenir. |
| Kod entegrasyonu |
Canvas'tan ayrı JS kodu |
JS'yi içeriye dahil edebilirsiniz |
Veri görselleştirme için bir veya başka bir teknoloji kullanılırken bu farklılıklar dikkate alınmalıdır. Örneğin, Canvas ile bir fonksiyonun grafiğini çizmek daha kolay olabilirken, araç ipuçlarını görüntülemek (fare işaretçisinin altındaki nesneyi tanımlamak) SVG ile daha kolaydır.
Ancak pratikte, veri görselleştirmeye yönelik olarak bu farklılıkları kısmen etkisiz hale getiren bir dizi hazır kitaplık zaten mevcuttur.
Teknolojilerin her biriyle çalışmanın temellerine girmeyeceğim; giriş olarak Vadim Makeev'in (Opera) HTML5 Kampı "Dinamik Grafikler: Kanvas ve SVG" raporunu öneriyorum.
Ayrıca MIX 2011 raporlarına da bakın:
Görüntüleri Kanvasla İşleme
Canvas'ın dikkate değer özelliklerinden biri, bu teknolojinin görüntülenen verilere piksel piksel erişim sağlaması ve video dahil çeşitli grafik öğelerini tuval üzerine yansıtmanıza olanak sağlamasıdır.
Bunun gerekli olduğu yere iyi bir örnek, görüntü işleme/analiz görevidir.
Processing.js, görselleştirmeyi tanımlamak için iki yaklaşım sunar: daha sonra kütüphanenin kendisi tarafından ayrıştırılan ara kod ( ayrı dosya veya sayfanın içinde) ve açık JavaScript kodunu içerir.
Örneğin, bir Mandelbrot seti fraktalı çizmek için, hem ilgili örnekle sayfada belirtilen seçeneği hem de aşağıdaki JavaScript kodunu kullanabilirsiniz:
var xmin = -2,5; var ymin = -2; var wh = 4; function SketchProc(processing) (processing.setup = function () (processing.size(200, 200);process.noLoop(); );processing.draw = function () (processing.loadPixels(); var maxiterations = 200; var xmax = xmin + wh; var ymax = ymin + wh; var dx = (xmax - xmin) / (işleme.genişlik);< processing.height; j++) { var x = xmin; for (var i = 0; i < processing.width; i++) { var a = x; var b = y; var n = 0; while (n < maxiterations) { var aa = a * a; var bb = b * b; var twoab = 2.0 * a * b; a = aa - bb + x; b = twoab + y; if (aa + bb >16.0) ( ara ; ) n++; ) if (n == maksimumlar) Processing.pixels.setPixel(i+j*processing.width, 0); else işleniyor.pixels.setPixel(i+j*işlem.genişlik, işleniyor.renk(n*16 % 255)); x += dx; ) y += dy; ) işleme.updatePixels(); ); ) var canvas = document.getElementById("myCanvas" ); var p = new İşleme(tuval, eskizProc);Burada kendiniz deneyebilirsiniz: http://silverbook.ru/projects/html5datavisualization/demo3-processingjs.htm (kodu kopyalayın, konsola yapıştırın ve çalıştırın).
JavaScript InfoVis Araç Seti (JIT)
JIT, verileri görüntülemek için ham değerleri JSON olarak alır:
var json = ( "etiket" : ["etiket A" , "etiket B" , "etiket C" , "etiket D" ], "değerler" : [ ( "etiket" : "tarih A" , "değerler" : ) , ( "etiket" : "B tarihi" , "değerler" : ), ( "etiket" : "E tarihi" , "değerler" : ), ( "etiket" : "F tarihi" , "değerler" : ), ( "etiket" : "tarih D" , "değerler" : ), ( "etiket" : "tarih C" , "değerler" : )] ); var pieChart = new $jit.PieChart(( injectInto: "infovis", animate: true, offset: 30, dilimOffset: 0, labelOffset: 20, type: "stacked:gradient", showLabels:true, resizeLabels: 7, Label: ( type: "Native" , size: 20, family: "Arial" , color: "white" ), İpuçları: ( active: true , onShow: function (tip, elem) ( tip.innerHTML = " " + eleman.adı + ": " + elem.value; ) ) ));sadece render'ı çağırın:
PieChart.loadJSON(json);
jQuery Sparkline'ları
SVG kullanarak harita üzerinde görselleştirme
SVG'ye geçelim ve basit bir örnekle başlayalım. Bazı verileri bölge haritası üzerinde görüntülemeniz gerektiğini düşünün, bunu yapmanın en kolay yolu nedir?
SVG biçiminde hazır bir haritanız varsa (Rusya haritasını Wikipedia web sitesinden aldım), o zaman bu çok basit bir şekilde yapılır - SVG belgesinde her bölgenin kendi benzersiz kimliğine sahip olması yeterlidir, o zaman haritayı satır içi svg olarak ekleyin ve basit bir kodla istediğiniz renkte renklendirin:
var SverdlovskOblast = document.getElementById("SverdlovskOblast" ); SverdlovskOblast.style.fill = "#fe3300" ;Aynı şeyi döngü halinde yaparsanız, yalnızca bir alanı değil, tüm bölgeyi ve hatta tüm ülkeyi renklendirebilirsiniz:
var veri = [(id: "KurganOblast", değer: 30), (id: "SverdlovskOblast", değer: 200), (id: "TyumenOblast", değer: 75), (id: "KhantiaMansia", değer: 100 ), (id: "YamaloNenetsAutDistrict", değer: 20), (id: "ChelyabinskOblast", değer: 150)]; for (var i = 0; i< data.length; i++) { var item = data[i]; var region = document.getElementById(item.id); region.style.fill = RGBtoHex(item.value, 0, 0); }
SVG kullanarak verileri görselleştirmeye yönelik kitaplıklar
Daha önce de söylediğim gibi, hem Canvas hem de SVG, sayısal verileri grafikler ve çizelgeler biçiminde görselleştirmeye ilişkin geleneksel sorunu çözmek için uygundur. Her iki durumda da bu, uygun kütüphaneler kullanılarak oldukça kolay bir şekilde yapılabilir.
Canvas ile örneklere zaten baktık, şimdi SVG ile çalışmak için çeşitli kütüphanelere bakalım. (Bu aynı zamanda kapsamlı bir liste değil, oldukça kaliteli ve popüler çözümlerdir.)
Raphael
Basit bir pasta grafiği eklemek için tek ihtiyacınız olan aşağıdaki koddur:
var r = Raphael("grafik", 640, 480); var pasta = r.g.piechart(320, 240, 100, );
Birkaç ek adımla bir gösterge, grafik başlıkları ve etkileşimli araç ipuçları ekleyebilirsiniz:
var r = Raphael("grafik", 640, 480); r.g.txtattr.font = "12 piksel "Fontin Sans", Fontin-Sans, sans-serif"; r.g.text(320, 100, "Etkileşimli Pasta Grafiği" ).attr(("font-size" : 20)); var pasta = r.g.piechart(320, 240, 100, ,(açıklama: ["%%.%% – Kurumsal Kullanıcılar" , "IE Kullanıcıları" ], açıklama: "batı" ,
href: ["http://raphaeljs.com", http://g.raphaeljs.com]});
pie.hover(function () ( this .sector.stop(); this .sector.scale(1.1, 1.1, this .cx, this .cy); if (this .label) ( this .label.stop(); this .label.scale(1.5); this .label.attr(("font-weight" : 800) ) ), function () ( this .sector.animate((scale: ), 500, "bounce" ) ; if (this .label) ( this .label.animate((scale: 1), 500, "bounce" ); this .label.attr(("font-weight" : 400)); ) ));
Diğer grafik türleri de uygun yöntemler kullanılarak benzer şekilde üretilebilir. Örnekleri doğrudan http://g.raphaeljs.com/ uzantı sitesinde görebilirsiniz.
Yüksek Grafikler JS
Kütüphane API'si, JSON'daki verileri kullanarak grafik oluşturmayı oldukça kolaylaştırır:
var chart1 = new Highcharts.Chart(( chart: ( renderTo: "charts", defaultSeriesType: "bar" ), title: ( text: "Meyve Tüketimi" ), xAxis: (category: ["Elmalar" , "Muz" , "Portakallar" ]), yAxis: ( title: ( text: "Yenen meyve" ) ), seri: [( name: "Jane" , data: ), ( name: "John" , data: )] ));
Biraz daha karmaşık bir komut dosyasıyla ek ayrıntılar belirtebilirsiniz, örneğin bir göstergeyi görüntülemek, araç ipuçlarını yapılandırmak gibi:
var chart = new Highcharts.Chart(( chart: ( renderTo: "charts" , defaultSeriesType: "area" , spacingBottom: 30 ), title: ( text: "Meyve tüketimi *" ), alt başlık: ( text: "*Jane'in muz tüketimi bilinmiyor", kayan: doğru , hizala: "sağ" , dikeyAlign: "alt" , y: 15 ), açıklama: ( düzen: "dikey" , hizala: "sol" , dikeyAlign: "üst" , x: 150, y: 100 , float: true , borderWidth: 1, arka planRenk: "#FFFFFF" ), xAxis: ( kategoriler: ["Elmalar" , "Armut" , "Portakal" , "Muz" , "Üzüm" , "Erik" , "Çilek" , "Raspberries" ] ), yAxis: ( title: ( text: "Y-Ekseni" ), labels: ( formatter: function () ( return this .value; ) ) ), tooltip: ( formatter: function () ( return " "+bu.dizi.adı+"" + bu .x +": " + bu .y; ) ), arsaSeçenekler: ( alan: ( fillOpacity: 0,5 ) ), seri: [( name: "John" , data: ), ( name: "Jane" , veri: )] ));
Gerekirse varsayılan stilleri kendinizinkiyle değiştirebilirsiniz.
Canvas'ı mı yoksa SVG'yi mi seçmelisiniz?
Yukarıdaki örneklerden de görülebileceği gibi her iki teknoloji de genellikle veri görselleştirme görevleri için uygundur. Birçok şey benzer şekilde yapılır. Piksel piksel çıktının gerekli olduğu durumlarda Canvas'ın daha uygun olduğu açıktır. Diyagramın etkileşimi korumanız gereken ayrı nesnelere bölündüğü durumlarda SVG daha uygundur.
Kanvas daha iyi
- Raster grafiklerini düzenleme
- Grafiklere/videoya efekt ekleme
- Raster grafiklerin oluşturulması (veri görselleştirme, fraktallar, fonksiyon grafikleri)
- Görüntü analizi
- Oyun grafikleri (spritelar, arka plan vb.)
SVG daha iyi
- Ölçeklenebilir Arayüzler
- İnteraktif Arayüzler
- Diyagramlar, diyagramlar
- Vektör görsel düzenleme
Grafiksel olarak bu şu şekilde temsil edilebilir:
Son olarak, teknoloji seçerken göz önünde bulundurulması gereken önemli bir husus da Canvas ve SVG kullanırken performansın oluşturulmasıdır:
Pratikte Canvas aşağıdaki durumlarda daha iyi çalışır: küçük boyutlarçizim alanı ve benzeri çok sayıda nesneleri ölçeklendirmeniz veya görüntülemeniz gerektiğinde SVG daha uygundur büyük ekran ve çok fazla değil Büyük miktarlar Aynı anda görüntülenen nesneler.
Bu sonuç, Bashneft yönetim kurulu başkanının şirketin hissedarlar genel kuruluna duyurulan ve bir kopyası editörler tarafından alınan raporundan kaynaklanmaktadır.
Belgeden, jeolojik araştırma sonucunda 2018 yılında 19 milyon ton rezervli 81 verimli yatağın keşfedildiği anlaşılmaktadır.
Aynı zamanda son derece etkili jeolojik ve teknik önlemlerin kullanılması ve tanıtılması modern teknolojiler Artan petrol geri kazanımı, Başkurtya'daki olgun sahalardaki petrol üretiminin 11 ay boyunca 2017 seviyesinde - 15 milyon ton - korunmasını mümkün kıldı. Bu dönemdeki toplam üretim hacmi 17,3 milyon ton petrol olarak gerçekleşti.
Raporda ayrıca Rosneft üretim ve rafineri kompleksi ile tek bir üretim zincirinin oluşturulmasının Ufa rafinerilerinin verimliliğini artırdığı ve işletme ve lojistik maliyetlerinde azalmaya yol açtığı belirtiliyor. Özellikle Euro-6 benzin üretimine hakim olunmuş ve yeni GOST'a uygun olarak yol bitümünün endüstriyel üretimine başlanmıştır.
Bashneft benzin istasyonlarında 2018 yılı 11 aylık perakende satış hacmi geçen yılın aynı dönemine göre yüzde 13,2 artarak 1,7 milyon tona ulaştı.
Petrokimya stratejisini uygulamak için petrokimya üretimi modernize ediliyor. Böylece Mayıs 2018'de Ufaorgsintez faaliyete geçti yeni kurulum kümen üretimi - otomotiv endüstrisinde, tıpta ve farmakolojide kullanılan boyaların, solventlerin, çeşitli polimerlerin üretimi için hammadde. Sırada Ufaneftekhim'deki aromatik üretim kompleksinin yeniden inşası ve Ufaorgsintez'de yeni olefin üretim tesislerinin inşası var.
2018 yılının 9 aylık konsolide faaliyet karı ise 2017 yılının aynı dönemine göre yüzde 22,6 artarak 135,5 milyar ruble olarak gerçekleşti. Bashneft'in net karı geçen yıla göre yüzde 73,5 artışla 74,6 milyar rubleye ulaştı.
Bashneft, üçüncü çeyrekte hissedarlara Haziran 2018'deki yıllık toplantıda açıklanan 28,2 milyar ruble tutarında temettü ödedi ve yılın başından bu yana ödenen toplam temettü hacmi 43 milyar ruble oldu.
Aynı zamanda şirketin net borç seviyesi de azalarak 30 Eylül 2018 itibarıyla 40,1 milyar rubleye (2017'nin aynı tarihi itibarıyla bu rakam 104,7 milyar ruble) ulaştı.
Aynı zamanda raporlama döneminde Başkurdistan bütçesine vergi katkıları, tek seferlik gelir vergisi ödemesi de dikkate alındığında geçen yılın aynı dönemine göre 1,5 kat artarak 50,5 milyar ruble olarak gerçekleşti.
HTML görselleri etiket kullanılarak web sayfalarına eklendi . Grafik kullanımı web sayfalarını görsel olarak daha çekici hale getirir. Resimler bir web belgesinin özünü ve içeriğini daha iyi aktarmaya yardımcı olur.
HTML etiketlerini kullanma
Görüntüleri bir HTML belgesine ekleme
1. Etiket ![]()
Öğe bir görüntüyü ve onun alt niteliği kullanılarak eklenen yedek içeriğini temsil eder. Elementten beri
küçük harf ise bir blok öğesinin içine yerleştirilmesi önerilir; örneğin,
Veya
Etiket değeri görüntünün mutlak veya göreceli yolu olan gerekli bir src niteliğine sahiptir:
Etiket için Aşağıdaki özellikler mevcuttur:
| Bağlanmak | Açıklama, kabul edilen değer |
|---|---|
| alternatif | alt özelliği görsele alternatif metin ekler. Görüntünün yüklenmeden önce veya grafikler devre dışı bırakıldığında göründüğü yerde görüntülenir ve ayrıca fare görüntünün üzerine getirildiğinde bir araç ipucu olarak görüntülenir. Sözdizimi: alt="resim açıklaması" . !} |
| çapraz köken | Crossorigin özelliği, CORS isteklerini kullanarak başka bir etki alanındaki kaynaklardan görseller yüklemenize olanak tanır. CORS istekleri kullanılarak tuvale yüklenen görseller yeniden kullanılabilir. İzin verilen değerler: anonim - Çapraz kaynak isteği bir HTTP üstbilgisi kullanılarak yapılır ve hiçbir kimlik bilgisi iletilmez. Sunucu, içeriğin talep edildiği sunucuya kimlik bilgileri sağlamadığı takdirde görüntü bozulacak ve kullanımı sınırlı olacaktır. use-credentials — Çapraz kaynak isteği, kimlik bilgilerinin iletilmesiyle gerçekleştirilir. Söz dizimi: crossorigin="anonim" . |
| yükseklik | Height özelliği görselin yüksekliğini belirtir. Px veya % olarak belirtilebilir. Sözdizimi: yükseklik: 300 piksel. |
| ismap | ismap özelliği, resmin sunucuda bulunan bir harita görüntüsünün parçası olduğunu belirtir (harita görüntüsü, tıklanabilir alanlara sahip bir görüntüdür). Bir harita görseline tıkladığınızda koordinatlar sunucuya bir URL sorgu dizisi olarak gönderilir. ismap niteliğine yalnızca öğenin Söz dizimi: ismap. |
| uzun tanım | Alt özelliğini tamamlayan genişletilmiş bir resim açıklaması URL'si. Sözdizimi: longdesc="http://www.example.com/description.txt" . |
| kaynak | Src özelliği görüntünün yolunu belirtir. Söz dizimi: src="çiçek.jpg" . |
| boyutlar | Görüntüleme seçeneklerine bağlı olarak görüntü boyutunu ayarlar. Yalnızca srcset niteliği belirtildiğinde çalışır. Özellik değeri, virgülle ayrılmış bir veya daha fazla dizedir. |
| kaynak seti | Ekran çözünürlüğüne göre seçilecek görüntü kaynaklarının bir listesini oluşturur. Src niteliği ile birlikte veya onun yerine kullanılabilir. Özellik değeri, virgülle ayrılmış bir veya daha fazla dizedir. 
|
| kullanım haritası | Usemap özelliği, görüntüyü bir görüntü haritası olarak belirtir. Değer # sembolüyle başlamalıdır. Değer, etiketin adı veya kimlik özelliğinin değeriyle ilişkilidir |
| Genişlik | Widget özelliği görüntünün genişliğini belirtir. Px veya % olarak belirtilebilir. Sözdizimi: genişlik: %100 . |
1.1. Resim adresi
Resim adresi tam olarak (mutlak URL) belirtilebilir, örneğin:
URL(http://anysite.ru/images/anyphoto.png)
Veya göreceli bir yol aracılığıyla belge veya kök diziniİnternet sitesi:
url(../images/anyphoto.png) - belgedeki göreli yol,
url(/images/anyphoto.png) - kök dizinden göreli yol.
Bu şu şekilde yorumlanır:
../ - bir seviye yukarı, kök dizine gitmek anlamına gelir,
resimler/ - resimlerin bulunduğu klasöre gidin,
anyphoto.png - bir resim dosyasına işaret eder.
1.2. Görüntü Boyutları
Görüntü boyutlarını ayarlamadan çizim sayfada gerçek boyutunda görüntülenir. Genişlik ve yükseklik özelliklerini kullanarak görselin boyutlarını düzenleyebilirsiniz. Niteliklerden yalnızca biri belirtilirse, resmin oranlarını korumak için ikincisi otomatik olarak hesaplanacaktır.
1.3. Grafik dosya formatları
JPEG formatı (Birleşmiş Fotoğraf Uzmanları Grubu). JPEG görüntüler fotoğraflar için idealdir ve milyonlarca farklı renk içerebilir. Resimler GIF'lerden daha iyi sıkıştırılır, ancak metin ve geniş düz renkli alanlar lekeli hale gelebilir.
GIF formatı (Grafik Değişim Formatı). Logolar gibi düz renkli alanlara sahip görüntüleri sıkıştırmak için idealdir. GIF'ler, renklerden birini şeffaf olacak şekilde ayarlamanıza olanak tanıyarak bir web sayfasının arka planının görüntünün bir bölümünde gösterilmesine olanak tanır. GIF'ler ayrıca basit animasyonlar da içerebilir. GIF görüntüleri yalnızca 256 renk tonu içerir, bu da görüntülerin posterler gibi lekeli ve gerçekçi olmayan görünmesine neden olur.
PNG formatı (Taşınabilir Ağ Grafikleri). GIF ve JPEG formatlarının en iyi özelliklerini içerir. 256 renk içerir ve görüntüleri bir GIF dosyasından daha küçük bir boyuta sıkıştırırken renklerden birinin şeffaf olmasını mümkün kılar.
APNG biçimi (Animasyonlu Taşınabilir Ağ Grafikleri). PNG formatını temel alan bir resim formatı. Animasyonu saklamanıza olanak tanır ve ayrıca şeffaflığı destekler.
SVG biçimi (Ölçeklendirilebilir Vektör Grafiği). Bir SVG çizimi, XML formatında tanımlanan bir dizi geometrik şekilden oluşur: çizgi, elips, çokgen vb. Hem statik hem de animasyonlu grafikler desteklenir. İşlev seti çeşitli dönüşümleri, alfa maskelerini, filtre efektlerini ve şablon kullanma yeteneğini içerir. SVG görüntüleri kalite kaybı olmadan yeniden boyutlandırılabilir.
BMP formatı (Bitmap Resmi). Şablonu dikdörtgen bir piksel ızgarası olan sıkıştırılmamış (orijinal) bir raster görüntüdür. Bir bitmap dosyası bir başlık, bir palet ve grafik verilerinden oluşur. Başlık, grafik görüntüsü ve dosyası hakkındaki bilgileri (piksel derinliği, yüksekliği, genişliği ve renk sayısı) saklar. Palet yalnızca palet görüntüleri (8 veya daha az bit) içeren ve 256'dan fazla öğe içermeyen Bitmap dosyalarında gösterilir. Grafik verileri resmin kendisini temsil eder. Bu formattaki renk derinliği piksel başına 1, 2, 4, 8, 16, 24, 32, 48 bit olabilir.
ICO biçimi (Windows simgesi). Microsoft Windows'ta dosya simgesi depolama biçimi. Ayrıca Windows simgesi internetteki web sitelerinde simge olarak kullanılmaktadır. Tarayıcıda web sitesi adresinin veya yer iminin yanında görüntülenen bu formatın bir resmidir. Bir ICO dosyası, her birinin boyutu ve rengi ayrı ayrı ayarlanabilen bir veya daha fazla simge içerir. Simge boyutu herhangi bir boyutta olabilir, ancak en yaygın olanı kenarları 16, 32 ve 48 piksel olan kare simgelerdir.
2. Etiket
Etiket
Etiketin, haritanın adını belirten bir name özelliği vardır. Etiketin name özelliğinin değeri
Öğe
3. Etiket
Etiket istemci tarafı görüntü haritasının parçası olarak yalnızca bir aktif bölgeyi tanımlar. Öğenin kapanış etiketi yoktur. Bir aktif alan diğeriyle örtüşüyorsa alanlar listesindeki ilk bağlantı uygulanacaktır.
| Bağlanmak | Kısa Açıklama |
|---|---|
| alternatif | Aktif harita alanı için alternatif metni ayarlar. |
| koordinatlar | Alanın ekrandaki konumunu belirler. Koordinatlar uzunluk birimi cinsinden verilmiştir ve virgülle ayrılmıştır: İçin daire- dairenin merkezinin ve yarıçapının koordinatları; İçin dikdörtgen- sol üst ve sağ alt köşelerin koordinatları; İçin çokgen- şeklin mantıksal olarak tamamlanması için çokgen köşelerinin koordinatları, birinciye eşit olan son koordinatların da belirtilmesi önerilir. |
| indirmek | href niteliğini tamamlar ve tarayıcıya, kaynağın örneğin önce açılması gerekmek yerine (bir PDF dosyası gibi) kullanıcı bağlantıyı tıkladığı anda yüklenmesi gerektiğini söyler. Bir nitelik için bir isim belirterek, yüklenen nesneye bir isim vermiş oluyoruz. Bir özelliğin değerini belirtmeden kullanılmasına izin verilir. |
| href | Bağlantının URL'sini belirtir. Mutlak veya göreceli bir bağlantı adresi belirtilebilir. |
| hreflang | İlişkili web belgesinin dilini belirtir. Yalnızca href özelliğiyle birlikte kullanılır. Kabul edilen değerler, dil kodunu belirten bir çift harften oluşan kısaltmadır. |
| medya | Dosyanın hangi tür cihazlar için optimize edileceğini belirler. Değer herhangi bir medya sorgusu olabilir. |
| göreceli | Href niteliğini geçerli ve ilgili belge arasındaki ilişki hakkındaki bilgilerle genişletir. Kabul edilen değerler: alternatif - belgenin alternatif bir sürümüne bağlantı (örneğin, sayfanın basılı formu, çeviri veya ayna). yazar — belgenin yazarına bağlantı. yer imi - Yer imleri için kullanılan kalıcı URL. yardım - yardıma bağlantı. lisans - bu web belgesinin telif hakkı bilgilerine bağlantı. sonraki/önceki - bireysel URL'ler arasındaki ilişkiyi gösterir. Bu işaretleme sayesinde Google, bu sayfaların içeriğinin mantıksal bir sırayla ilişkili olduğunu belirleyebilir. nofollow - arama motorunun belirli bir sayfadaki veya belirli bir bağlantıdaki bağlantıları izlemesini engeller. noreferrer - bir bağlantıyı takip ederken tarayıcının, site ziyaretçisinin hangi sayfadan geldiğine ilişkin bilgileri kaydeden bir HTTP istek başlığı (Yönlendiren) göndermemesi gerektiğini belirtir. prefetch - hedef belgenin önbelleğe alınması gerektiğini belirtir; Arka plandaki tarayıcı sayfanın içeriğini önbelleğine indirir. arama - Hedef belgenin bir arama aracı içerdiğini belirtir. etiketi - geçerli belgenin anahtar sözcüğünü belirtir. |
| şekil | Haritadaki aktif alanın şeklini ve koordinatlarını belirtir. Aşağıdaki değerleri alabilir: düz — dikdörtgen aktif alan; daire — daire şeklindeki aktif alan; poli - çokgen şeklindeki aktif alan; varsayılan — etkin alan görüntünün tüm alanını kaplar. |
| hedef | Bağlantıya tıklandığında belgenin nereye indirileceğini belirtir. Aşağıdaki değerleri kabul eder: _self — sayfa geçerli pencereye yüklenir; _blank — sayfa yeni bir tarayıcı penceresinde açılır; _parent — sayfa ana çerçeveye yüklenir; _top - sayfa tam tarayıcı penceresinde yüklenir. |
| tip | Bağlantı dosyalarının MIME türünü belirtir; Dosya uzantısı. |
4. Görüntü haritası oluşturma örneği
1) Orijinal görüntüyü istenen şeklin aktif alanlarına işaretleyin. Alanların koordinatları bir fotoğraf işleme programı kullanılarak hesaplanabilir; örneğin, Adobe Photoshop veya Boyamak.
Pirinç. 1. Harita oluşturmak için resim işaretleme örneği 2) Etikete ekleyerek kartın adını ayarlayın
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
!}
Pirinç. 2. Bir görüntü haritası oluşturma örneği; bir çiçeğin üzerine fare imlecini tıkladığınızda, açıklama içeren bir sayfaya gidersiniz
Vektör grafikleri baskıda yaygın olarak kullanılmaktadır. Ancak bunu SVG kullanan web siteleri için de kullanabiliriz ( Ölçeklenebilir Vektör Grafiği - ölçeklenebilir vektör grafikleri). Buna göre W3.org spesifikasyonu SVG'yi şu şekilde tanımlar:
XML'de iki boyutlu grafikleri tanımlamak için kullanılan bir dil. SVG üç tür nesneye izin verir: vektör grafikleri (düz çizgilerden ve eğrilerden oluşan yollar gibi), resimler ve metin.
Her ne kadar SVG, Ağustos 2011'den bu yana W3C önerilerine dahil edilmiş olsa da, bu teknoloji Raster görüntülere göre bir takım avantajları olmasına rağmen pratikte web projelerinde kullanılmaz. Bu ders dizisinde web sayfalarında SVG öğeleriyle nasıl çalışılacağını tanıtacağız.
SVG'nin Avantajları
Çözünürlük bağımsızlığı
Raster görüntüler çözünürlüğe bağlıdır. Grafikler belirli bir ölçeğe yeniden boyutlandırıldığında sunulamaz bir görünüm kazanır. Vektör grafiklerde bu durum prensipte imkansızdır çünkü her şey ölçek değiştiğinde otomatik olarak yeniden hesaplanan matematiksel ifadelerle temsil edilir ve kalite her koşulda korunur.
HTTP isteklerinin sayısını azaltmak
SVG doğrudan içine gömülebilir HTML belgesi svg etiketini kullanarak tarayıcının grafikleri sunmak için isteklere ihtiyacı olmaz. Bu yaklaşımın web sitesinin yükleme özellikleri üzerinde iyi bir etkisi vardır.
Stiller ve komut dosyaları
Svg etiketiyle gömmek, grafiklerinizi CSS kullanarak şekillendirmenizi de kolaylaştırır. Arka plan rengi, şeffaflık, kenarlıklar vb. gibi nesne özelliklerini değiştirebilirsiniz. Grafikler, JavaScript kullanılarak benzer şekilde değiştirilebilir.
Düzenlemesi ve canlandırması kolay
SVG nesneleri CSS veya JavaScript kullanılarak canlandırılabilir. Ayrıca SVG nesneleri kullanılarak değiştirilebilir. Metin düzeltici.
Daha küçük dosya boyutu
SVG, raster grafiklerle karşılaştırıldığında daha küçük bir dosya boyutuna sahiptir.
Temel SVG Şekilleri
Spesifikasyona göre birkaç temel şekil çizebiliriz: çizgi, çoklu çizgi, dikdörtgen, daire, elips. Tüm öğeler etikete eklenmelidir . Temel unsurlara ayrıntılı olarak bakalım.
Astar
SVG'de bir satırı görüntülemek için öğeyi kullanın
Segmentin başlangıcı x1 ve y1 nitelikleriyle belirlenir ve bitiş noktası x2 ve y2 niteliklerindeki koordinatlar tarafından belirlenir.
Ayrıca çizginin rengini ve genişliğini tanımlamak için kullanılan iki özellik daha (kontur ve kontur genişliği) vardır.
Bu nesne şuna benzer:
Öğe
Dikdörtgen eleman kullanılarak çizilir
Bir daireyi görüntülemek için öğeyi kullanırız
İlk iki özellik cx ve cy merkezin koordinatlarını tanımlar. Yukarıdaki örnekte her iki koordinat için değeri 102 olarak ayarladık. Varsayılan değer 0'dır.
Bir elips görüntülemek için öğeyi kullanırız
Öğe
Bir vektör grafik düzenleyicisi kullanma
Basit SVG nesnelerinin HTML'ye çıktısını almak kolaydır. Ancak nesnenin karmaşıklığı arttıkça bu uygulama büyük miktarda çalışmanın gerekli olmasına yol açabilir.
Ancak herhangi bir vektör grafik düzenleyicisini kullanabilirsiniz (örneğin, Adobe İllüstratör veya Inkscape) nesneler oluşturmak için. Böyle bir aracınız varsa, gerekli nesneleri bunların içine çizmek, grafikleri bir HTML etiketinde kodlamaktan çok daha kolaydır.
Vektör grafik komutlarını bir dosyadan bir HTML belgesine kopyalayabilirsiniz. Veya .svg dosyasını şu öğelerden birini kullanarak gömebilirsiniz: embed, iframe ve object.
Sonuç aynı olacaktır.
Tarayıcı desteği
SVG'de var iyi destekçoğunlukta modern tarayıcılar, IE sürüm 8 ve öncesi hariç. Ancak sorun JavaScript kitaplığı kullanılarak çözülebilir. İşinizi kolaylaştırmak için ReadySetRaphael.com aracını kullanarak SVG kodunu Raphael formatına dönüştürebilirsiniz.
Öncelikle kütüphaneyi indirip HTML belgesine ekliyoruz. Daha sonra .svg dosyasını yüklüyoruz, ortaya çıkan kodu kopyalayıp yükleme sonrasında fonksiyona yapıştırıyoruz:
Body etiketine aşağıdaki div öğesini rsr tanımlayıcısıyla yerleştiririz.
Ve her şey hazır.
Serinin bir sonraki eğitiminde CSS'de SVG nesnelerine nasıl stil uygulanacağına bakacağız.
Vektör grafikleri basılı materyallerde yaygın olarak kullanılmaktadır. Web sitesine gelince, burada SVG veya Ölçeklenebilir Vektör Grafikleri aracılığıyla vektör grafiklerini de kullanabiliriz. Vektör grafikleri). Resmi W3.org spesifikasyonu bunu şu şekilde açıklamaktadır:
XML kullanarak iki boyutlu grafikleri tanımlamak için kullanılan bir dil. SVG üç tür kullanmamıza olanak tanır grafik nesneleri: Vektör grafik şekilleri (düz ve eğri çizgilerden oluşan yollar gibi), resimler ve metin.
Teknoloji 1999'dan beri mevcut ve 16 Ağustos 2011'de W3C önerileri listesine dahil edildi. Ancak, raster grafikler yerine vektör grafikleri kullanmanın birçok avantajına rağmen SVG hâlâ bu kadar sık kullanılmıyor.
Ölçeklenebilir Vektör Grafiklerinin Faydaları
Web sitesi sayfalarında grafik kullanımı açısından, ölçeklenebilir vektör grafikleri bize taramalı grafiklere göre çeşitli avantajlar sunar; bunlar arasında şunlar bulunur:
Çözünürlükten bağımsız
Raster grafikler (veya Bitmap), pikseller kullanılarak oluşturulduğundan çözünürlüğe bağlıdır. Böyle bir grafik öğesinin boyutu büyütülürse, büyük kareler hemen görünür hale gelecektir. Bu, vektör grafiklerde gerçekleşmez çünkü çözünürlüğe bağlı değildir, bunun yerine matematiksel hesaplamalar üzerine kuruludur, bu da onu kaliteden ödün vermeden herhangi bir boyuta yükseltmemize olanak tanır.
HTTP İsteklerini Azaltma
Ölçeklenebilir vektör grafikleri, svg etiketi kullanılarak doğrudan bir HTML belgesine gömülebilir, böylece tarayıcının grafikler için ek bir istek yapmasına gerek kalmaz. Bu aynı zamanda web sitesi performansı üzerinde de olumlu bir etkiye sahiptir.
Şekillendirme ve komut dosyası yazma
Svg etiketini kullanan doğrudan entegrasyon, aynı zamanda grafikleri stilize etmemize de olanak tanıyacaktır. CSS yardımı. Arka plan rengi, opaklık, kenarlıklar vb. nesne parametrelerini HTML'de olduğu gibi değiştirebiliriz. Ayrıca javascript kullanarak grafikleri de kontrol edebiliriz.
Animasyon ve düzenleme imkanı
Bir SVG nesnesi, bir animasyon öğesi kullanılarak veya jQuery gibi bir JS kitaplığı kullanılarak canlandırılabilir. SVG nesnesi ayrıca (ücretsiz) veya gibi herhangi bir metin düzenleyici veya grafik yazılımı kullanılarak da düzenlenebilir.
Daha küçük dosya boyutu
SVG, raster grafiklerle karşılaştırıldığında daha küçük bir dosya boyutuna sahiptir.
SVG Kullanarak Basit Şekiller Çizme
Spesifikasyonu takiben SVG kullanarak çokgenler, daireler, çizgiler veya elipsler gibi şeyler çizebiliriz ve tarayıcının ölçeklenebilir vektör grafikleri oluşturabilmesi için tüm bu grafik öğelerinin "svg" etiketlerinin içine yerleştirilmesi gerekir. Aşağıdaki örneklere bir göz atalım:
Astar
SVG kullanarak çizgi çizmek için "line" öğesini kullanabiliriz. Bu eleman bir düz çizgi çizmek için kullanılır, dolayısıyla yalnızca iki noktadan oluşur: başlangıç noktası ve bitiş noktası.
Yukarıda görüldüğü gibi çizginin başlangıç noktasının koordinatı ilk iki x1 ve x2 özelliğinde, bitiş noktasının koordinatı ise y1 ve y2 niteliklerinde belirtilmiştir.
Burada ayrıca iki nitelik daha vardır: kenarlığın rengini ve genişliğini kontrol eden kontur ve kontur genişliği. Öte yandan bu nitelikleri satır içi stilde de şu şekilde tanımlayabiliriz:
Stil = "kontur genişliği: 1; kontur: rgb (0,0,0);"
ve bu bize aynı sonucu verecektir.
*
bozuk hat
Burada her şey “çizgiye” çok benzer, ancak “çoklu çizgi” elemanıyla tek bir çizgi yerine birden fazla çizgi çizebiliriz. İşte bir örnek:
"Çoklu çizgi" elemanı, çizgilerin tüm koordinatlarını içeren nokta niteliklerine sahiptir.
*
Dikdörtgen
Yalnızca “rect” öğesini kullanarak aynı kolaylıkla bir dikdörtgen çizebiliriz. Sadece genişliği ve yüksekliği belirtmemiz gerekiyor:
*
Daire
Ayrıca "circle" elemanını kullanarak bir daire çizebiliriz. Bu örnekte r niteliğiyle tanımlanan, yarıçapı 100 olan bir daire çizeceğiz:
İlk iki nitelik, cx ve cy, dairenin merkez koordinatını tanımlar. Yukarıdaki örnekte hem x hem de y koordinatları için 102'yi ayarladık. Bu nitelikler belirtilmezse varsayılan olarak 0 olacaktır.
*
Elips
Elips elemanını kullanarak elips çizebiliriz. Burada her şey daire ile hemen hemen aynı şekilde çalışır, ancak bu sefer x çizgisi yarıçapını ve y çizgisi yarıçapını rx ve ry nitelikleri aracılığıyla ayrı ayrı kontrol edebiliriz.
*
Çokgen
"Çokgen" elemanının yardımıyla çokgenler, üçgen, sekizgen gibi çeşitli açıları ve kenarları olan şekiller çizebiliriz. Örnek:
*
Bir vektör grafik düzenleyicisi kullanma
Gördüğünüz gibi HTML'de SVG kullanarak basit şekiller çizmek oldukça kolaydır. Ancak daha karmaşık bir nesneye ihtiyacımız varsa bu yöntem artık bize uymayacaktır.
Neyse ki yukarıda da belirttiğimiz gibi bu işi yapmak için Adobe Illustrator veya Inkscape gibi bir vektör grafik editörü kullanabiliriz. Bu yazılıma aşina iseniz, HTML kodu kullanmak yerine kullanıcı dostu bir arayüz kullanarak nesneleri kolayca çizebilirsiniz.
Veya şu öğelerden birini kullanarak svg dosyasının kendisini de gömebilirsiniz: embed, iframe, object.
Sonuç benzer olacaktır.
İÇİNDE bu örnekte ile kullandık.
*
Ölçeklenebilir vektör grafikleri için tarayıcı desteği
Tarayıcı desteğine gelince, ölçeklenebilir vektör grafikleri IE8 ve öncesi hariç zaten iyi bir şekilde desteklenmektedir. Ancak bu, adlı bir javascript kitaplığı kullanılarak düzeltilebilir. İşleri kolaylaştırmak için SVG kodumuzu Raphael tarafından desteklenen bir formata dönüştürecek bir araç kullanacağız.
Başlamak için Raphael.js kitaplığını indirin ve HTML kodunuza ekleyin. Daha sonra svg dosyasını siteye yükleyin, oluşturulan kodu kopyalayıp aşağıdaki yükleme işlevine yapıştırın:
Window.onload=işlev() (
//Raphael kodu buraya gelecek
}
Body etiketinin içine, rsr id niteliğini içeren aşağıdaki div'i ekleyin.
Ve bu kadar! Aşağıdaki bağlantıda verilen örneği inceleyin.
Sonuç olarak
İşte SVG'nin temelleri budur. Artık bu konuyu biraz anlamış olduğunuzu umuyoruz. Bu bir tanesi en iyi yollar Retina ekranlarda bile net bir şekilde görüntülenebilen grafikler sunarken sayfalarınızın performansını optimize edin.
Her zamanki gibi merak ediyorsanız sizin için küçük bir ek makale seçkisi hazırladık.
* (SVG'ye Giriş)
* (SVG: çözünürlüğe bağlı kalmayalım)
* (Neden SVG kullanmıyorsunuz?)
Okuduğunuz için teşekkür ederiz ve bu makaleyi faydalı bulacağınızı umuyoruz!
Dikkat! Gizli metni görüntüleme izniniz yok.