Ölçeklenebilir Vektör Grafikleri (SVG) - Araştırma. HTML5'te Ölçeklenebilir Vektör Grafikleri Web Sayfalarına SVG XML Kodu Ekleme

.

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:

Tablo 1. Etiket özellikleri

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 elementin soyundan gelir geçerli bir href özelliğiyle. 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üllerle 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üllerle 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. Resim 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 piksellerden oluşan dikdörtgen bir ızgara olan, sıkıştırılmamış (orijinal) bir bitmap görüntüsü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.

Tablo 2. Etiket özellikleri

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- çokgen köşelerinin koordinatları gerekli sırayla; şeklin mantıksal olarak tamamlanması için 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şkiye ilişkin 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

Temel Kavramlar ve Kullanımı

Ölçeklenebilir Vektör Grafikleri (SVG) formatı, vektör grafik standartları ailesinin bir parçasıdır. Vektör grafikleri, her pikselin renk tanımının bir veri dizisinde saklandığı raster grafiklerden farklıdır. Günümüzde internette kullanılan en yaygın raster formatları JPEG, GIF ve PNG'dir ve bunların her birinin kendine göre avantajları ve dezavantajları vardır.

Yaygın olarak kullanılan kısaltmalar

• CSS: Basamaklı Stil Sayfaları
• GIF: Grafik Değişim Formatı
• GUI: Grafik Kullanıcı Arayüzü
• HTML: Köprü Metni Biçimlendirme Dili
• JPEG: Ortak Fotoğraf Uzmanları Grubu
• PNG: Taşınabilir Ağ Grafikleri
• SVG: Ölçeklenebilir Vektör Grafikleri
• XML: Genişletilebilir İşaretleme Dili

SVG formatının herhangi bir tarama formatına göre birçok avantajı vardır:

• SVG grafikleri, her bir piksel için veri saklamaya gerek olmadığından, orijinal dosyada çok daha az verinin saklanmasını gerektiren matematiksel formüller kullanılarak oluşturulur.
• Vektör görselleri daha iyi ölçeklenir. Çevrimiçi olarak yayınlanan görselleri orijinal boyutlarının ötesinde ölçeklendirmeye çalışmak, görsellerin bozulmasına (veya pikselleşmesine) neden olabilir.

  Bunun nedeni, orijinal piksel verilerinin belirli bir görüntü boyutu için tasarlanmış olmasıdır. Yeniden boyutlandırırken görüntü oluşturucu, yeni pikselleri doldurmak için hangi verilerin kullanılması gerektiğine dair bir tahminde bulunur. Vektör görselleri ölçeklendirmeye daha dayanıklıdır; Görüntü boyutunu değiştirirken karşılık gelen matematiksel formüller ayarlanabilir.

• Vektör grafiklerinin kaynak dosya boyutu genellikle daha küçüktür, dolayısıyla SVG grafikleri taramalı benzerlerinden daha hızlı yüklenir ve daha az veri yoğunluğuna sahiptir.
• SVG görüntüleri tarayıcı tarafından oluşturulur ve programlı olarak oluşturulabilir. Dinamik olarak değişebilmeleri, onları özellikle grafikler gibi veri odaklı uygulamalar için uygun hale getirir.
• Orijinal SVG resim dosyası metin biçiminde olduğundan erişilebilir ve arama motoru dostudur.

Bu makalede SVG formatlarının avantajlarını ve bunların HTML5 web siteleri oluşturmanıza nasıl yardımcı olabileceğini öğreneceksiniz.

SVG Temelleri

SVG grafikleri oluşturmak, JPEG, GIF veya PNG dosyaları oluşturmaktan tamamen farklı bir işlem kullanır. JPEG, GIF ve PNG dosyaları genellikle Adobe Photoshop gibi bir tür görüntü düzenleme programı kullanılarak oluşturulur. SVG görüntüleri genellikle bir tür XML tabanlı dil kullanılarak oluşturulur. SVG grafiklerini düzenlemek için görüntünün arkasındaki XML kodunu sizin için oluşturacak grafiksel kullanıcı arayüzleri vardır. Ancak bu makalede doğrudan XML ile çalıştığınız varsayılmaktadır. SVG resim düzenleme programları hakkında bilgiyi bölümde bulabilirsiniz.

Liste 1'de, 2 piksellik siyah kenarlıkla kırmızı bir daire çizen basit bir SVG XML dosyası örneği gösterilmektedir.

Listeleme 1. SVG XML dosyası

Yukarıdaki kod, Şekil 1'de gösterilen görüntüyü üretir.

Şekil 1. 2 piksel siyah çerçeveli kırmızı daire

Temel Geometrik Şekiller Oluşturma

SVG grafikleriyle çalışırken geometrik şekiller oluşturmak için XML etiketleri kullanılır; bu XML öğeleri Tablo 1'de gösterilmektedir.

Tablo 1. SVG grafikleri oluşturmaya yönelik XML öğeleri

çizgi öğesi

Çizgi öğesi en basit grafik öğesidir. Liste 2 yatay çizginin nasıl oluşturulacağını gösterir.

Liste 2. Yatay çizgi oluşturma

Liste 2'de gösterilen kod, Şekil 2'de gösterilen görüntüyü üretir.

Şekil 2. Basit yatay çizgi

SVG kök etiketi, çizilebilir alanı tanımlayan genişlik ve yükseklik niteliklerine sahiptir. Bu nitelikler, diğer HTML öğelerinin yükseklik ve genişlik nitelikleriyle aynı şekilde hareket eder. Bu durumda çalışma alanının mevcut tüm alanı kapladığı tespit edilmiştir.

Ayrıca bu örnekte stil etiketi kullanılmaktadır. SVG grafikleri, çok çeşitli yöntemler kullanarak içeriğe stil uygulamayı destekler. Bu makaledeki stiller, görsellerin kolayca görülebilmesini sağlamak için veya bir çizimin oluşturulması için renk ve çizgi genişliği gibi belirli niteliklerin gerekli olduğu durumlarda eklenmiştir. SVG grafiklerinde stil uygulama hakkında daha fazla bilgiyi bu bölümde bulabilirsiniz.

Çalışma alanına göre X ve Y eksenlerinde başlangıç ​​ve bitiş koordinatlarını belirterek çizgi tanımı oluşturabilirsiniz. x1 ve y1 nitelikleri çizginin başlangıç ​​koordinatlarını, x2 ve y2 nitelikleri ise bitiş koordinatlarını temsil eder. Bir çizginin yönünü değiştirmek için koordinatları değiştirmeniz yeterlidir. Örneğin, önceki örneği değiştirerek Liste 3'te gösterildiği gibi çapraz bir çizgi oluşturabilirsiniz.

Liste 3. Çapraz çizgi oluşturma

Şekil 3, Liste 3'te gösterilen kodun çıktısını göstermektedir.

Şekil 3. Çapraz çizgi

sürekli çizgi öğesi

Kırık çizgi, birkaç çizgiden oluşan bir çizimdir. Liste 4, merdiven basamaklarına benzeyen bir çizim oluşturma örneğini göstermektedir.

Liste 4'te gösterilen kod, Şekil 4'te gösterilen görüntüyü üretir.

Noktalar özelliği kullanılarak ve virgüllerle ayrılmış X ve Y koordinat çiftleri tanımlanarak bir sürekli çizgi oluşturulur. Gösterilen örnekte ilk nokta 0,40 olarak tanımlanmıştır, burada 0 X koordinatı ve 40 Y koordinatıdır.Ancak, bu set yalnızca SVG'yi ifade ettiğinden, görüntünün ekranda görüntülenmesi için bir nokta seti yeterli değildir. başlangıç ​​konumunu oluşturur. En az iki noktaya ihtiyacınız vardır: bir başlangıç ​​noktası ve bir bitiş noktası (örneğin, puan = "0,40 40,40").

Basit çizgiler çizerken olduğu gibi çizgilerin kesinlikle yatay veya dikey olması gerekmez. Önceki örnekteki değerleri değiştirirseniz Liste 5'teki gibi çizgilerden oluşan düzensiz şekiller elde edebilirsiniz.

Liste 5. Pürüzlü bir çizgi oluşturma

Liste 5'teki kod, Şekil 5'te gösterilen görüntüyü üretir.

Şekil 5. Pürüzlü çizgi

düz eleman

Bir dikdörtgen oluşturmak için Liste 6'da gösterildiği gibi genişliğini ve yüksekliğini tanımlamanız yeterlidir.

Listeleme 6. Dikdörtgen oluşturma

Liste 6'daki kod, Şekil 6'da gösterilen görüntüyü üretir.

Şekil 6. Dikdörtgen

rect etiketi aynı zamanda bir kare oluşturmak için de kullanılabilir; kare basitçe aynı yükseklik ve genişliğe sahip bir dikdörtgendir.

daire elemanı

Daire, Liste 7'de gösterildiği gibi dairenin merkezinin ve yarıçapının X ve Y koordinatlarının tanımlanmasıyla oluşturulur.

Listeleme 7. Bir çevre oluşturma

Liste 7'deki kod, Şekil 7'de gösterilen görüntüyü üretir.

Şekil 7. Daire

cx ve cy nitelikleri dairenin merkezinin tuvale göre konumunu belirler. Yarıçap, dairenin genişliğinin yarısı kadar olduğundan, bunu belirlerken görselin toplam genişliğinin belirttiğiniz değerin iki katı olacağını unutmayın.

Elips öğesi

Esas itibarıyla bir elips, Liste 8'de gösterildiği gibi, kodda belirtilen iki yarıçapa sahip bir dairedir.

Liste 8. Bir elips oluşturma

Liste 8'deki kod, Şekil 8'de gösterilen görüntüyü üretir.

Şekil 8. Elips

Bu durumda cx ve cy nitelikleri aynı zamanda merkezin tuvale göre koordinatlarını da tanımlar. Ancak bir elipsle, rx ve ry niteliklerini kullanarak X ekseni için bir yarıçap ve Y ekseni için ikinci bir yarıçap tanımlarsınız.

çokgen öğesi

Çokgen, en az üç kenar içeren geometrik bir şekildir. Liste 9 basit bir üçgen oluşturur.

Liste 9. Üçgen oluşturma

Liste 9'daki kod, Şekil 9'da gösterilen görüntüyü üretir.

Şekil 9. Üçgen

Çoklu çizgi elemanıyla çalışmaya benzer şekilde, çokgenler, noktalar özelliği kullanılarak X ve Y koordinat çiftlerinin tanımlanmasıyla oluşturulur.

X ve Y eksenleri boyunca koordinat çiftleri ekleyerek istediğiniz sayıda kenarlı çokgenler oluşturabilirsiniz. Örneğin, önceki örnekteki kodu değiştirerek Liste 10'da gösterildiği gibi dört kenarlı bir çokgen oluşturabilirsiniz.

Liste 10. Dört kenarlı bir çokgen oluşturma

Liste 10'da gösterilen kod, Şekil 10'da gösterilen görüntüyü üretir.

Şekil 10. Dört kenarlı çokgen

Poligon etiketini kullanarak karmaşık şekillerden geometrik şekiller de oluşturabilirsiniz. Liste 11 bir yıldız çizimi oluşturur.

Listeleme 11. Yıldız oluşturma

Liste 11'de gösterilen kod, Şekil 11'de gösterilen görüntüyü üretir.

Şekil 11. Yıldız çokgeni

yol öğesi

Yol öğesi, tüm çizim öğeleri arasında en karmaşık olanıdır ve bir dizi özel komut kullanarak rastgele çizimler oluşturmanıza olanak tanır. Yol öğesi Tablo 2'de listelenen komutları destekler.

Tablo 2. Yol öğesi tarafından desteklenen komutlar

Bu komutlar büyük veya küçük harflerle kullanılabilir. Komut büyük harfle belirtilirse mutlak konumlandırma uygulanır. Küçük harf komutu kullanılırsa göreceli konumlandırma uygulanır. Tüm komutların kullanımına ilişkin örnekler vermek bu makalenin kapsamı dışındadır. Ancak aşağıda bu komutları kullanmanın temellerini gösteren birkaç örnek bulunmaktadır.

Yol öğesini kullanarak bu makaledeki önceki örneklerden herhangi bir basit geometrik şekil oluşturabilirsiniz. Liste 12, normal bir üçgen oluşturmak için yol öğesini kullanır.

Liste 12. Yol öğesini kullanarak bir üçgen oluşturma

Liste 12'de gösterilen kod, Şekil 12'de gösterilen görüntüyü üretir.

Şekil 12. Yol elemanı kullanılarak oluşturulan üçgen

Komutların listesi d niteliği kullanılarak tanımlanır. Bu örnekte çizim, noktaya taşıma komutu (M150 0) tarafından tanımlanan X 150 ve Y 0 koordinatlarına sahip noktada başlar. Daha sonra noktaya (L75 200) bir çizgi çizmek için komutu kullanın. X = 75 ve Y = 200 koordinatlarına sahip bir noktaya bir çizgi çizilir. Bundan sonra, bir noktaya çizgi çizmek için başka bir komut kullanılarak başka bir çizgi çizilir (L225 200). Son olarak snap (Z) komutu kullanılarak desen kapatılır. Z komutuna hiçbir koordinat eşlik etmez, çünkü bir yolu kapatmak için tanım gereği mevcut konumdan çizimin başlangıç ​​noktasına (bu durumda koordinatları X = 150, Y = 0 olan nokta) kadar bir çizgi çizersiniz.

Verilen örneğin amacı size kavramı göstermekti; Sadece normal bir üçgen oluşturmanız gerekiyorsa polygon etiketini kullanmak daha iyidir.

Yol öğesinin gerçek gücü, Liste 13'te gösterildiği gibi, özel şekiller oluşturma yeteneğidir. Bu örnek, World Wide Web Konsorsiyumu (W3C) belgesinden alınmıştır. Ölçeklenebilir Vektör Grafikleri (SVG) 1.1 (2. baskı)(bkz. bölüm).

Liste 13. Yol öğesini kullanarak özel bir şekil oluşturma

Liste 13'te gösterilen kod, Şekil 13'te gösterilen görüntüyü üretir.

Şekil 13. Yol öğesi kullanılarak oluşturulan özel şekil

Yol öğesi, diyagramlar ve dalgalı çizgiler gibi karmaşık tasarımlar oluşturmak için kullanılabilir. Sağlanan örneğin birden çok yol öğesi kullandığını unutmayın. Çizimler oluştururken SVG kök etiketindeki herhangi bir çizim öğesiyle sınırlı değilsiniz.

Filtreler ve Degradeler

Yukarıdaki örneklerin çoğunda kullanılan temel CSS stillerine ek olarak SVG grafikleri, filtrelerin ve degradelerin kullanımını da destekler. Bu bölümde filtreleri ve degradeleri SVG görüntülerine nasıl uygulayacağınızı öğreneceksiniz.

Filtreler

SVG görüntülerine özel efektler uygulamak için filtreler kullanılabilir. SVG aşağıdaki filtreleri destekler.

• feBlend
• feColorMatrix
• feBileşenTransferi
• feKompozit
• feConvolveMatrix
• feDiffuseAydınlatma
• feDeplasman Haritası
• fesel
• feGauss Bulanıklığı
• feResim
• FeBirleştirme
• feMorfoloji
• feOfset
• feSpekülerAydınlatma
• verimli
• fe Türbülans
• feUzakIşık
• fePointLight
• feSpotLight

Liste 14, bir dikdörtgene uygulanan bir alt gölge efekti oluşturur.

Liste 14. Bir dikdörtgen için alt gölge efekti oluşturma

Liste 14'te gösterilen kod, Şekil 14'te gösterilen görüntüyü üretir.

Şekil 14. Bir dikdörtgen için alt gölge efekti

Filtreler def öğesinin içinde tanımlanır (“tanım”ın kısaltması). Bu örnekteki filtreye bir tanımlayıcı (id) "f1" atanmıştır. Filtre etiketinin kendisi, X ve Y koordinatlarının yanı sıra filtrenin genişliğini ve yüksekliğini tanımlayan niteliklere sahiptir. Filtre etiketinin içinde gerekli filtre öğelerini kullanır ve özelliklerini istediğiniz değerlere ayarlarsınız.

Bir filtre tanımlandıktan sonra, 'de gösterildiği gibi filtre özelliğini kullanarak onu belirli bir çizimle ilişkilendirirsiniz. URL değerini, filtreye atanan kimlik özelliği değerine ayarlayın.

Degradeler

Gradyan bir renkten diğerine kademeli geçişi temsil eder. İki ana degrade türü vardır: doğrusal ve radyal. Uygulanan degradenin türü kullandığınız öğeye göre belirlenir. Aşağıdaki örnekler bir elipse doğrusal ve radyal degradelerin nasıl uygulanacağını gösterir.

Liste 15, doğrusal eğime sahip bir elips oluşturur.

Liste 15. Doğrusal degradeli bir elips oluşturma

Liste 15'te gösterilen kod, Şekil 15'te gösterilen görüntüyü üretir.

Şekil 15. Doğrusal gradyanlı elips

Liste 16, radyal degradeye sahip bir elips oluşturur.

Liste 16. Radyal degradeli bir elips oluşturma

Liste 16'da gösterilen kod, Şekil 16'da gösterilen görüntüyü üretir.

Şekil 16. Radyal gradyanlı elips

Degradeler de filtreler gibi def öğesi içinde tanımlanır. Her degradeye bir tanımlayıcı (id) atanır. Degrade nitelikleri (renkler gibi), durdurma öğeleri kullanılarak degrade etiketinin içinde ayarlanır. Bir resme degrade uygulamak için dolgu özelliğinin url değerini istenen degradenin tanımlayıcısına (id) ayarlayın.

Metin ve SVG

SVG, temel geometrik şekiller oluşturmanın yanı sıra Liste 17'de gösterildiği gibi metin oluşturmak için de kullanılabilir.

Listeleme 17. SVG kullanarak metin oluşturma

Liste 17'de gösterilen kod, Şekil 17'de gösterilen görüntüyü üretir.

Şekil 17. SVG ile oluşturulan metin

Bu örnek, metin öğesini kullanarak bir SVG'yi seviyorum cümlesi oluşturur. Metin öğesini kullanırken görüntülenen gerçek metin, açılış ve kapanış metin öğeleri arasındadır.

Metni farklı eksenler boyunca ve hatta yollar boyunca görüntüleyebilirsiniz. Liste 18'de metin yay şeklinde bir yolda görüntülenir.

Liste 18. Yay şeklindeki bir yol boyunca metin oluşturma

Liste 18'de gösterilen kod, Şekil 18'de gösterilen görüntüyü üretir.

Şekil 18. Yay şeklindeki bir yol boyunca yerleştirilen metin

Bu örnek, SVG kök etiketine ek bir XML ad alanı (xlink) ekler. Metni yaylamak için kullanılan yol def öğesinin içinde oluşturulur, dolayısıyla yolun kendisi çizimde oluşturulmaz. Görüntülenen metin, istenen yolun kimliğine atıfta bulunmak için xlink ad alanını kullanan bir textPath öğesinin içine yerleştirilmiştir.

Diğer SVG grafiklerinde olduğu gibi metne filtreler ve degradeler de uygulayabilirsiniz. Liste 19 metne bir filtre ve degrade uygular.

Listeleme 19. Filtre ve degradeyle metin oluşturma

Liste 19'da gösterilen kod, Şekil 19'da gösterilen görüntüyü üretir.

Şekil 19. Filtreli ve degradeli metin

Web Sayfalarına SVG XML Kodu Ekleme

SVG XML oluşturulduktan sonra HTML sayfalarına çeşitli yollarla dahil edilebilir. İlk yöntem, Liste 20'de gösterildiği gibi SVG XML kodunu doğrudan HTML belgesine eklemektir.

Liste 20. SVG XML'i doğrudan bir HTML belgesine ekleme

Bu yöntem muhtemelen en basit olanıdır ancak yeniden kullanımı teşvik etmez. SVG XML'in .svg uzantılı bir dosya olarak kaydedilebileceğini unutmayın. Bir SVG grafiğini .svg dosyası olarak kaydettiğinizde, onu Web sayfalarına eklemek için yerleştirme, nesne ve iframe öğelerini kullanabilirsiniz. Liste 21, yerleştirme öğesini kullanarak bir SVG XML dosyasını gömme kodunu gösterir.

Liste 21. Gömme öğesini kullanarak bir SVG XML dosyası ekleme

Liste 22, nesne öğesini kullanarak bir SVG XML dosyasının eklenmesine ilişkin kodu gösterir.

Liste 22. Nesne öğesini kullanarak bir SVG XML dosyasının dahil edilmesi

Liste 23, bir iframe öğesi kullanılarak bir SVG XML dosyasının eklenmesine ilişkin kodu gösterir.

Liste 23. Bir iframe öğesi kullanarak bir SVG XML dosyasının dahil edilmesi

Bu yöntemlerden biriyle aynı SVG grafiğini birden fazla sayfaya ekleyebilir ve orijinal .svg dosyasını düzenleyerek güncelleyebilirsiniz.

Çözüm

Bu makale, SVG formatını kullanarak grafik oluşturmanın temellerini kapsamaktadır. Çizgi, dikdörtgen, daire vb. gibi temel geometrik şekiller oluşturmak için yerleşik geometri öğelerini nasıl kullanacağınızı öğrendiniz.Ayrıca, bir dizi komut vererek karmaşık tasarımlar oluşturmak için yol öğesini nasıl kullanacağınızı da öğrendiniz. bir noktaya doğru hareket etmek, bir noktaya doğru çizgi çizmek ve bir noktaya yay çizmek gibi. Bu makale aynı zamanda metin içeren grafikler de dahil olmak üzere SVG grafiklerine filtrelerin ve degradelerin nasıl uygulanacağını ve SVG grafiklerinin HTML sayfalarına nasıl ekleneceğini de öğretir.

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. 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 grafik nesnesi kullanmamıza olanak tanır: vektör grafik şekilleri (örneğin, düz ve eğri çizgilerden oluşan yollar), 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, grafiklere CSS kullanarak stil vermemize de olanak tanıyacaktır. 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 çizgisinin yarıçapını ve y çizgisinin 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.

Bu örnekte s 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, Retina ekranlarda bile net bir şekilde görüntülenebilen grafikler sunarken sayfalarınızın performansını optimize etmenin en iyi yollarından biridir.

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.

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). W3.org spesifikasyonuna göre SVG şu şekilde tanımlanır:

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.

SVG'nin Ağustos 2011'den bu yana W3C önerilerine dahil edilmesine rağmen, bu teknoloji, raster görüntülere göre bir takım avantajlara sahip olmasına rağmen pratikte web projelerinde kullanılmamaktadır. 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, svg etiketi kullanılarak doğrudan bir HTML belgesine gömülebilir, böylece tarayıcının grafikleri sunmak için herhangi bir istekte bulunmasına gerek kalmaz. 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. SVG nesneleri bir metin düzenleyici kullanılarak da değiştirilebilir.

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 . İki noktanın belirlenmesi gereken bir parça çiziyor: başlangıç ​​ve bitiş.

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: , ancak öğeyi kullanarak Aynı anda birkaç çizgi çizebilirsiniz.

Öğe Noktaların koordinatlarını belirtmek için kullanılan noktalar özelliğini içerir.

Dikdörtgen eleman kullanılarak çizilir . Genişliğini ve yüksekliğini belirlemeniz gerekir.

Bir daireyi görüntülemek için öğeyi kullanırız . Aşağıdaki örnekte r özelliğinde tanımlanan yarıçapı 100 olan bir daire oluşturuyoruz:

İ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 . Daire ile aynı şekilde çalışır ancak rx ve ry niteliklerini kullanarak x ve y yarıçaplarını özel olarak belirtebiliriz:

Öğe Üçgen, altıgen vb. gibi çok yüzlü şekilleri görüntüler. Örneğin:

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, IE sürüm 8 ve öncesi hariç çoğu modern tarayıcıda iyi bir desteğe sahiptir. Ancak sorun JavaScript kütüphanesi 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.

Çoğu Web sayfası grafikler içerir. Bilgileri renkli ve net bir şekilde sunmanızı sağlar. Çoğu durumda, uzun bir metin açıklaması vermek yerine bir resim göstermek daha iyidir.
Bir sayfaya grafik yerleştirmenin iki yolu vardır:

• bireysel resimlerin eklenmesi;
• arka planı bir resimle doldurmak.

Her durumda, grafik görüntüsü dosyadan alınır.

Grafik formatındaki bir dosyadan bir grafik görüntüsünün sayfaya eklenmesi etiketi kullanılarak yapılır. (İngilizce'den, resim - resim) dosya adresini SRC niteliğine argüman olarak belirten:

Grafik dosyası adresi, muhtemelen bir yol içeren bir URL veya dosya adıdır. Örneğin logotip.jpg grafik dosyasını görüntülemek için etiketini yazmalısınız.

Etiketteki grafik görüntünün aktarım hızını artırmak için grafik dosyasının adresini argüman olarak alan LOWSRC niteliğini (ek parametre) kullanabilirsiniz. İki grafik dosyası oluşturabilirsiniz: biri (örneğin, logotip.jpg) yüksek çözünürlüklü bir görüntü içerirken, diğeri (örneğin, logotip.gif) düşük çözünürlüklü bir görüntü içerir. Daha sonra etiketleyin

Tarayıcıya önce logotip.gif dosyasını indirmesi ve ardından bunu alındığında logotip.jpg dosyasıyla değiştirmesi talimatını verir.
Grafik yüklemeyi hızlandırmanın bir başka yolu da grafiğin yerleştirileceği dikdörtgen alanın boyutlarını piksel cinsinden ölçülen WIDTH ve HEIGHT niteliklerini kullanarak belirlemektir. Bu nitelikleri belirtirseniz, tarayıcı önce grafikler için yer ayırır, belge düzenini hazırlar, metni görüntüler ve ancak ondan sonra grafikleri yükler. Tarayıcının, görüntüyü belirtilen çerçeve boyutuna sığacak şekilde sıkıştırdığını veya genişlettiğini unutmayın. Görüntü boyutlarını belirtmeye bir örnek:

Grafikler genellikle metinle birlikte kullanıldığından metin ve grafikleri hizalama zorluğu ortaya çıkar. Bu sorun bu özellik kullanılarak çözülür. HİZALAMA etiket çeşitli argümanlar kullanarak. Örneğin, metnin bir görselin etrafında sağa veya sola doğru akmasını isteyebiliriz. Genellikle resim, çirkin olabilen metne yakın bir şekilde gömülür. Bunu önlemek için çizimin etrafına boş kenar boşlukları koyabilirsiniz. Alanlar öznitelikler kullanılarak oluşturulur VSPACEüst ve alt kenar boşlukları için ve UZAY etiketteki yan kenar boşlukları için . Bu özniteliklerin bağımsız değişkenleri, alanların boyutunu piksel cinsinden belirten sayılar olarak belirtilir. Grafiklerin etrafına metin sarmayı iptal etmek için etiketini kullanın
.
Aşağıdaki etiket, logotip.jpg dosyasındaki grafikleri sağa kaydırılacak şekilde ayarlar (resim metnin solunda olacaktır):

Metnin sağına bir resim yerleştirmek istiyorsanız bu özelliğe ihtiyacınız vardır. HİZALAMA argüman ata SAĞ:

Resmin etrafındaki kenar boşluklarını ayarlamak için şöyle bir etiket yazmanız gerekir:

Burada 20 ve 10 sayıları alanların büyüklüğünü belirliyor.
Grafik ve metinlerin birlikte kullanımına ilişkin bir örneği ele alalım. Not Defteri'ni (metin düzenleyicisi Not Defteri) Windows'u açın. Yukarıda tartışılan etiketleri kullanarak HTML kodunu yazın. Aşağıda bazı metin ve grafiklerin çıktısını alan bir program bulunmaktadır. Elinizde bulunan dosyalardan herhangi birini grafik dosyası olarak kullanabilirsiniz. Burada kullanılan dosya logotip.gif'tir.

<Н1>Metin sağdaki grafiklerin etrafına sarılır
Bu, metin ve grafiklerin birlikte kullanılmasına bir örnektir.
HTML program metni herhangi bir metin düzenleyicide yazılabilir. Bu, metin işaretleme etiketlerini kullanır.

Bu metin yeni bir paragraftan görüntülenir. Bunu yapmak için özel bir etiket kullandık.

Tarayıcı pencerenizi yeniden boyutlandırmayı deneyin. Metin düzeninin nasıl değiştiğine dikkat edin.

Pirinç. 657. Metin sağdaki resmin çevresine sarılır

Görüntülerin (diğer öğelerin yanı sıra) sayfa üzerinde hassas şekilde konumlandırılmasına yönelik geniş olanaklar, tablolar Ve stiller. Bu HTML öğeleri daha sonra tartışılacaktır. Örneğin, görünür çerçeveleri olmayan bir tablo tanımlayabilir ve bu tablonun hücrelerine resim, metin ve diğer öğeleri yerleştirebilirsiniz.