HTML5-də miqyaslana bilən vektor qrafikası. Svg Qrafik Şəkillərin HTML Nümunələrinin Daxil edilməsi

.

Tag src tələb olunan atributuna malikdir, onun dəyəri şəklin mütləq və ya nisbi yoludur:

Tag üçün aşağıdakı atributlar mövcuddur:

Cədvəl 1. Tag atributları

Atribut	Təsvir, qəbul edilmiş dəyər
alt	Alt atributu şəkilə alternativ mətn əlavə edir. Şəklin yüklənməmişdən əvvəl və ya qrafiklər söndürüldükdə göründüyü yerdə göstərilir, həmçinin siçan kursorunu şəklin üzərinə gətirdiyiniz zaman alət ipucu kimi göstərilir. Sintaksis: alt="şəkil təsviri" . !}
çarpaz mənşəli	Crossorigin atributu CORS sorğularından istifadə edərək başqa domendən olan resurslardan şəkillər yükləməyə imkan verir. CORS sorğularından istifadə edərək kətana yüklənmiş şəkillər təkrar istifadə edilə bilər. İcazə verilən dəyərlər: anonim - Çarpaz mənşəli sorğu HTTP başlığından istifadə etməklə edilir və heç bir etimadnamə ötürülmür. Əgər server məzmunun tələb olunduğu serverə etimadnamələri təqdim etmirsə, o zaman şəkil korlanacaq və onun istifadəsi məhdudlaşdırılacaq. use-credentials - Çarpaz mənşəli sorğu keçilən etimadnamə ilə edilir. Sintaksis: crossorigin = "anonim" .
hündürlük	height atributu şəklin hündürlüyünü təyin edir. px və ya % ilə müəyyən edilə bilər. Sintaksis: hündürlük: 300px .
ismap	Ismap atributu təsvirin serverdə yerləşən xəritə şəklinin bir hissəsi olduğunu göstərir (xəritə şəkli tıklanabilir sahələri olan şəkildir). Xəritə şəklinə kliklədiyiniz zaman koordinatlar URL sorğu sətri kimi serverə göndərilir. ismap atributuna yalnız element olduqda icazə verilir elementin uşağıdır etibarlı href atributu ilə. Sintaksis: ismap.
longdesc	Alt atributunu dolduran şəklin genişləndirilmiş təsviri URL-i. Sintaksis: longdesc="http://www.example.com/description.txt" .
src	src atributu təsvirin yolunu müəyyən edir. Sintaksis: src="flower.jpg" .
ölçüləri	Ekran parametrlərindən asılı olaraq şəkil ölçüsünü təyin edir. Yalnız srcset atributu təyin edildikdə işləyir. Atribut dəyəri vergüllə ayrılmış bir və ya bir neçə sətirdir.
srcset	Ekran ayırdetmə qabiliyyətinə əsasən seçiləcək şəkil mənbələrinin siyahısını yaradır. src atributu ilə və ya onun əvəzinə istifadə edilə bilər. Atribut dəyəri bir və ya daha çox vergüllə ayrılmış sətirdir.
istifadə xəritəsi	Usemap atributu təsviri şəkil xəritəsi kimi müəyyən edir. Dəyər # simvolu ilə başlamalıdır. Dəyər etiketin adı və ya id atributunun dəyəri ilə əlaqələndirilir
eni	width atributu təsvirin enini təyin edir. px və ya % ilə müəyyən edilə bilər. Sintaksis: genişlik: 100% .

1.1. Şəkil ünvanı

Şəkil ünvanı tam olaraq göstərilə bilər (mütləq URL), məsələn:
url(http://anysite.ru/images/anyphoto.png)

Və ya nisbi bir yol vasitəsilə sənəd və ya kök kataloqu Sayt:
url(../images/anyphoto.png) — sənəddən nisbi yol,
url(/images/anyphoto.png) kök kataloqdan nisbi yoldur.

Bu aşağıdakı kimi şərh olunur:
../ - bir pillə yuxarı, kök qovluğuna çıxmaq deməkdir,
images/ - şəkillərin olduğu qovluğa keçin,
anyphoto.png - şəkil faylına işarə edir.

1.2. Şəkil ölçüləri

Şəkil ölçülərini təyin etmədən, rəsm səhifədə faktiki ölçüsündə göstərilir. Siz en və hündürlük atributlarından istifadə edərək şəklin ölçülərini redaktə edə bilərsiniz. Atributlardan yalnız biri təyin olunarsa, ikincisi şəklin nisbətlərini qorumaq üçün avtomatik olaraq hesablanacaqdır.

1.3. Qrafik fayl formatları

JPEG formatı (Birgə Fotoqrafiya Ekspertlər Qrupu). JPEG şəkilləri fotoşəkillər üçün idealdır, onlar milyonlarla müxtəlif rəngləri ehtiva edə bilər. Şəkillər GIF-lərdən daha yaxşı sıxışdırılır, lakin mətn və bərk rəngli böyük sahələr ləkəli ola bilər.

GIF formatı (Qrafik Mübadilə Formatı). Loqolar kimi bərk rəngli sahələri olan şəkilləri sıxmaq üçün idealdır. GIF-lər sizə rənglərdən birini şəffaf təyin etməyə imkan verir, veb səhifənin fonunu təsvirin bir hissəsində göstərməyə imkan verir. GIF-lərə sadə animasiyalar da daxil ola bilər. GIF-lərdə yalnız 256 çalar var ki, bu da şəkilləri afişalar kimi ləkəli və qeyri-real göstərir.

PNG formatı (Portativ Şəbəkə Qrafikası). GIF və JPEG formatlarının ən yaxşı xüsusiyyətlərini ehtiva edir. O, 256 rəngdən ibarətdir və şəkilləri GIF faylından daha kiçik ölçüdə sıxaraq rənglərdən birini şəffaf etməyə imkan verir.

APNG formatı (Animasiyalı Portativ Şəbəkə Qrafikası). PNG formatına əsaslanan şəkil formatı. Animasiya saxlamağa imkan verir və həmçinin şəffaflığı dəstəkləyir.

SVG formatı (Ölçülənə bilən vektor qrafikası). SVG rəsmi XML formatında təsvir edilmiş həndəsi fiqurlar toplusundan ibarətdir: xətt, ellips, çoxbucaqlı və s. Həm statik, həm də animasiyalı qrafika dəstəklənir. Xüsusiyyətlər dəstinə müxtəlif çevrilmələr, alfa maskaları, filtr effektləri, şablonlardan istifadə etmək imkanı daxildir. SVG şəkilləri keyfiyyətini itirmədən ölçüsünü dəyişdirilə bilər.

BMP formatı (Bitmap şəkli). Şablonu piksellərdən ibarət düzbucaqlı şəbəkə olan sıxılmamış (orijinal) bitmapı təmsil edir. Bitmap faylı başlıqdan, palitradan və qrafik məlumatlardan ibarətdir. Başlıq qrafik təsvir və fayl haqqında məlumatları (pikselin dərinliyi, hündürlüyü, eni və rənglərin sayı) saxlayır. Palitra yalnız palitralı şəkilləri (8 bit və ya daha az) ehtiva edən və 256 elementdən çox olmayan Bitmap fayllarında müəyyən edilir. Qrafik məlumatlar şəklin özünü təmsil edir. Bu formatda rəng dərinliyi hər piksel üçün 1, 2, 4, 8, 16, 24, 32, 48 bit ola bilər.

ICO formatı (Windows simvolu). Microsoft Windows-da fayl simvolu saxlama formatı. Həmçinin, Windows ikonası İnternetdəki veb-saytlarda simvol kimi istifadə olunur. Bu, brauzerdə sayt ünvanı və ya əlfəcin yanında göstərilən bu formatın şəklidir. Bir ICO faylı hər birinin ölçüsü və rəngi ayrıca təyin olunan bir və ya daha çox nişandan ibarətdir. İşarənin ölçüsü istənilən ola bilər, lakin ən çox yayılmış nişanlar tərəfləri 16, 32 və 48 piksel olan kvadrat nişanlardır.

2. Tag

Tag

Xəritənin adını təyin edən teq üçün ad atributu mövcuddur. Teq üçün ad atributunun dəyəri

Element

3. Tag

Tag müştəri tərəfi təsvir xəritəsində yalnız bir qaynar nöqtəni təsvir edir. Elementin bağlama teqi yoxdur. Bir qaynar nöqtə digəri ilə üst-üstə düşərsə, o zaman qaynar nöqtələr siyahısından ilk keçid həyata keçiriləcək.

Cədvəl 2. Tag atributları

Atribut	Qısa Təsvir
alt	Xəritənin aktiv sahəsi üçün alternativ mətni təyin edir.
koordinatları	Bölgənin ekrandakı mövqeyini təyin edir. Koordinatlar uzunluq vahidləri ilə müəyyən edilir və vergüllə ayrılır: üçün dairə— mərkəzin koordinatları və dairənin radiusu; üçün düzbucaqlı— yuxarı sol və aşağı sağ künclərin koordinatları; üçün çoxbucaqlı— çoxbucaqlı təpələrinin koordinatları düzgün ardıcıllıqla, həmçinin rəqəmin məntiqi tamamlanması üçün birincilərə bərabər olan sonuncu koordinatları da göstərmək tövsiyə olunur.
yükləyin	Href atributunu tamamlayır və brauzerə bildirir ki, resurs, məsələn, onu əvvəlcədən açmaq əvəzinə (PDF faylı kimi) istifadəçi linki kliklədiyi anda yüklənməlidir. Atributa ad verməklə yüklənmiş obyektə ad vermiş oluruq. Atributun dəyərini göstərmədən istifadə etməyə icazə verilir.
href	Link üçün URL-i müəyyən edir. Mütləq və ya nisbi keçid ünvanı göstərilə bilər.
hreflang	Əlaqədar veb sənədin dilini təyin edir. Yalnız href atributu ilə birlikdə istifadə olunur. Qəbul edilmiş dəyərlər dil kodunu bildirən bir cüt hərfdən ibarət qısaldılmışdır.
media	Faylın hansı cihaz növləri üçün optimallaşdırılacağını müəyyənləşdirir. Dəyər istənilən media sorğusu ola bilər.
rel	Href atributunu cari sənəd və əlaqəli sənəd arasındakı əlaqə haqqında məlumatla doldurur. Qəbul edilmiş dəyərlər: alternativ - sənədin alternativ versiyasına keçid (məsələn, çap edilə bilən səhifə, tərcümə və ya güzgü). müəllif - sənədin müəllifinə keçid. bookmark əlfəcinlər üçün istifadə olunan daimi URL-dir. kömək - kömək üçün keçid. lisenziya - Bu veb sənəd üçün müəllif hüququ məlumatlarına keçid. sonrakı/əvvəlki - fərdi URL-lər arasındakı əlaqəni göstərir. Bu işarələmə vasitəsilə Google bu səhifələrin məzmununun məntiqi ardıcıllıqla bağlı olduğunu müəyyən edə bilər. nofollow - axtarış sisteminə bu səhifədəki və ya müəyyən bir keçiddəki keçidləri izləməyi qadağan edir. noreferrer - göstərir ki, keçidi izləyərkən brauzer HTTP sorğu başlığını (Referrer) göndərməməlidir ki, burada sayt ziyarətçisinin hansı səhifədən gəldiyi barədə məlumat var. prefetch - hədəf sənədin önbelleğe alınması lazım olduğunu göstərir, yəni. Arxa fonda olan brauzer səhifənin məzmununu öz keşinə yükləyir. axtarış Hədəf sənəddə axtarış alətinin olduğunu göstərir. tag - cari sənəd üçün açar sözü təyin edir.
formalar	Xəritədə qaynar nöqtənin formasını və onun koordinatlarını təyin edir. Aşağıdakı dəyərləri qəbul edə bilər: düz düzbucaqlı aktiv sahədir; dairə - dairə şəklində aktiv sahə; poli - çoxbucaqlı şəklində aktiv sahə; default — qaynar nöqtə şəklin bütün sahəsini tutur.
hədəf	Linkə kliklədikdə sənədin harada yüklənəcəyini müəyyən edir. Aşağıdakı dəyərləri alır: _self - səhifə cari pəncərəyə yüklənir; _blank - səhifə yeni brauzer pəncərəsində açılır; _parent - səhifə ana çərçivəyə yüklənir; _top - Səhifə tam brauzer pəncərəsində yüklənir.
növü	Bağlantı fayllarının MIME növünü təyin edir, yəni. fayl uzantısı.

4. Təsvir xəritəsinin yaradılması nümunəsi

1) Mənbə şəklini istədiyiniz formanın aktiv sahələrinə işarələyirik. Sahə koordinatları bir fotoşəkil emal proqramı ilə hesablana bilər, məsələn, Adobe Photoshop və ya Çəkmək.

düyü. 1. Xəritə yaratmaq üçün təsvirin işarələnməsi nümunəsi

2) Xəritənin adını etiketə əlavə edərək təyin edin

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
düyü. 2. Şəkil xəritəsinin yaradılması nümunəsi, çiçəyin üzərinə tıkladığınız zaman təsviri olan səhifəyə keçirsiniz

Vektor qrafikası çapda geniş istifadə olunur. Lakin vebsaytlar üçün biz onu SVG ilə də istifadə edə bilərik ( Scalable Vector Graphic - miqyaslana bilən vektor qrafikası). görə W3.org spesifikasiyası SVG-ni belə müəyyən edir:

XML-də ikiölçülü qrafikləri təsvir etmək üçün dil. SVG üç növ obyektdən istifadə etməyə imkan verir: vektor qrafik formaları (məsələn, düz xətlərdən və əyrilərdən ibarət yollar), şəkillər və mətn.

2011-ci ilin avqust ayından SVG W3C tövsiyələrinə daxil edilsə də, bu texnologiya bitmaplarla müqayisədə bir sıra üstünlüklərə malik olsa da, praktiki olaraq veb layihələrində istifadə edilmir. Bu dərsliklər silsiləsində biz veb səhifələrdə SVG elementləri ilə necə işləməyi təqdim edəcəyik.

SVG-nin üstünlükləri

Qətnamə Müstəqilliyi

Raster təsvirlər həlledicilikdən asılıdır. Müəyyən miqyasda ölçü dəyişdirildikdə qrafika görünməz olur. Vektor qrafikası ilə belə bir vəziyyət prinsipcə mümkün deyil, çünki hər şey miqyas dəyişdikdə avtomatik olaraq yenidən hesablanan və keyfiyyət istənilən şəraitdə qorunan riyazi ifadələrlə təmsil olunur.

HTTP sorğularının sayının azaldılması

SVG birbaşa daxil edilə bilər HTML sənədi svg etiketindən istifadə edərək, brauzerin qrafiklərə xidmət göstərmək üçün sorğulara ehtiyacı yoxdur. Bu yanaşma veb saytın yükləmə xüsusiyyətlərinə yaxşı təsir göstərir.

Stillər və skriptlər

svg teqi ilə yerləşdirmə də CSS ilə qrafika üslubunu asanlaşdırır. Arxa fon rəngi, şəffaflıq, haşiyələr və s. kimi obyekt xüsusiyyətlərini dəyişə bilərsiniz. Eynilə, qrafiklər JavaScript ilə manipulyasiya edilə bilər.

Redaktə etmək və canlandırmaq asandır

SVG obyektləri CSS və ya JavaScript istifadə edərək canlandırıla bilər. Siz həmçinin SVG obyektlərini dəyişdirə bilərsiniz mətn redaktoru.

Daha kiçik fayl ölçüsü

SVG rastr qrafika ilə müqayisədə daha kiçik fayl ölçüsünə malikdir.

Əsas SVG formaları

Spesifikasiyaya uyğun olaraq bir neçə əsas fiqur çəkə bilərik: xətt, polyline, düzbucaqlı, dairə, ellips. Bütün elementlər etiketə daxil edilməlidir . Əsas elementləri ətraflı nəzərdən keçirin.

Xətt

SVG-də xətt çəkmək üçün elementdən istifadə olunur . O, iki nöqtənin müəyyən edilməli olduğu bir seqment çəkir: başlanğıc və son.

Seqmentin başlanğıcı x1 və y1 atributları ilə, son nöqtəsi isə x2 və y2 atributlarında koordinatlarla müəyyən edilir.

Xəttin rəngini və enini təyin etmək üçün müvafiq olaraq istifadə olunan iki başqa atribut (vuruş və vuruş eni) var.

Bu obyekt oxşardır , lakin elementi ilə Eyni anda bir neçə xətt çəkə bilərsiniz.

Element Nöqtələrin koordinatlarını təyin etmək üçün istifadə olunan nöqtə atributunu ehtiva edir.

Element ilə işlənmiş düzbucaqlı . Genişliyi və hündürlüyü təyin etməliyik.

Bir dairə çəkmək üçün elementdən istifadə edin . Aşağıdakı misalda r atributunda müəyyən edilmiş radiusu 100 olan çevrə yaradırıq:

İlk iki atribut cx və cy mərkəzin koordinatlarını təyin edir. Yuxarıdakı misalda hər iki koordinatı 102-yə təyin etdik. Varsayılan dəyər 0-dır.

Ellips çəkmək üçün elementdən istifadə edin . O, bir dairə kimi işləyir, lakin rx və ry atributlarından istifadə edərək x və y radiuslarını xüsusi olaraq təyin edə bilərik:

Element Üçbucaq, altıbucaqlı və s. kimi çoxüzlü formaları göstərir. Misal üçün:

Vektor qrafikası üçün redaktordan istifadə

Sadə SVG obyektlərini HTML-də göstərmək asandır. Lakin obyektin mürəkkəbliyi artdıqca, bu təcrübə böyük həcmdə işlərin görülməsinə səbəb ola bilər.

Lakin vektor qrafikası üçün istənilən redaktordan istifadə edə bilərsiniz (məsələn, Adobe Illustrator və ya inkscape) obyektlər yaratmaq. Əgər belə bir alətə sahibsinizsə, HTML teqində qrafikləri kodlaşdırmaqdansa, onlara lazımi obyektləri çəkmək daha asandır.

Vektor qrafikası üçün əmrləri fayldan HTML sənədinə köçürə bilərsiniz. Və ya aşağıdakı elementlərdən birini istifadə edərək .svg faylını yerləşdirə bilərsiniz: embed , iframe və obyekt .

Nəticə eyni olacaq.

Brauzer dəstəyi

SVG var yaxşı dəstəkəksər müasir brauzerlər, IE 8 və daha əvvəlki versiyalar istisna olmaqla. Lakin məsələ JavaScript kitabxanasından istifadə etməklə həll edilə bilər. İşi asanlaşdırmaq üçün SVG kodunu Raphael formatına çevirmək üçün ReadySetRaphael.com alətindən istifadə edə bilərsiniz.

Əvvəlcə kitabxananı yükləyirik və HTML sənədinə daxil edirik. Sonra .svg faylını yükləyirik, yüklədikdən sonra yaranan kodu kopyalayıb funksiyaya yapışdırırıq:

Bədən etiketində rsr ID ilə aşağıdakı div elementini yerləşdiririk.

Və hər şey hazırdır.

Serialdakı növbəti dərslikdə biz CSS-də SVG obyektlərinin üslubunu necə tərtib etməyə baxacağıq.

Vektor qrafikası çap materiallarında geniş istifadə olunur. Vebsayta gəlincə, burada biz SVG və ya Ölçəklənən Vektor Qrafikası (miqyaslana bilən) vasitəsilə vektor qrafikasından da istifadə edə bilərik. Vektor qrafikası). Rəsmi W3.org spesifikasiyasında o, aşağıdakı kimi təsvir edilmişdir:

XML-dən istifadə edərək ikiölçülü qrafikləri təsvir etmək üçün dil. SVG bizə üç növdən istifadə etməyə imkan verir qrafik obyektlər: Vektor qrafik formaları (məsələn, düz və əyri xətlərdən ibarət yollar), şəkillər və mətn.

Texnologiya 1999-cu ildən mövcuddur və 16 avqust 2011-ci ildə W3C tövsiyələri siyahısına daxil edilmişdir. Bununla belə, bitmaplar əvəzinə vektor qrafiklərindən istifadənin bir çox üstünlüklərinə baxmayaraq, SVG hələ də geniş istifadə olunmur.

Ölçəklənən Vektor Qrafiklərinin Faydaları

Veb sayt səhifələrində qrafiklərdən istifadə baxımından genişlənə bilən vektor qrafikası bizə rastr qrafika ilə müqayisədə bir sıra üstünlüklər təklif edir, bunlara daxildir:

Qətnamə Müstəqilliyi

Raster qrafika (və ya Bitmap) piksellərdən istifadə edərək yaradıldığı üçün rezolyusiyadan asılıdır. Belə bir qrafik element ölçüsündə artırsa, böyük kvadratlar dərhal görünəcəkdir. Bu, vektor qrafikası ilə baş vermir, çünki onlar rezolyusiyadan asılı deyil, əksinə, riyazi hesablamalar üzərində qurulur ki, bu da bizə onları istənilən ölçüdə artırmağa və keyfiyyətini itirməməyə imkan verir.

HTTP sorğularının azaldılması

Ölçəklənən vektor qrafikası svg teqindən istifadə etməklə birbaşa HTML sənədinə daxil edilə bilər, ona görə də brauzerin qrafik üçün əlavə sorğuya ehtiyacı yoxdur. O, həmçinin veb-saytın fəaliyyətinə müsbət təsir göstərir.

Styling və skript

svg teqi ilə birbaşa inteqrasiya bizə qrafikləri tərtib etməyə imkan verəcəkdir CSS yardımı. Biz HTML-də olduğu kimi fon rəngi, qeyri-şəffaflıq, sərhədlər və s. kimi obyekt xüsusiyyətlərini dəyişə bilərik. Biz həmçinin javascript vasitəsilə qrafikləri idarə edə bilərik.

Canlandırma və redaktə etmək bacarığı

SVG obyekti animasiya elementi və ya jQuery kimi JS kitabxanası ilə canlandırıla bilər. SVG obyekti həmçinin hər hansı mətn redaktoru və ya (pulsuz) və ya kimi qrafik proqram təminatı ilə redaktə edilə bilər.

Daha kiçik fayl ölçüsü

SVG rastr qrafikadan daha kiçik fayl ölçüsünə malikdir.

SVG istifadə edərək sadə fiqurlar çəkin

Spesifikasiyadan sonra biz SVG ilə çoxbucaqlılar, dairələr, xətlər və ya ellipslər çəkə bilərik və brauzerin miqyaslana bilən vektor qrafikası yaratması üçün bütün bu qrafik elementlər "svg" teqlərində yerləşdirilməlidir. Aşağıdakı nümunələrə baxaq:

Xətt

SVG-dən istifadə edərək xətt çəkmək üçün "xətt" elementindən istifadə edə bilərik. Bu element bir düz xətt çəkmək üçün istifadə olunur, ona görə də o, yalnız iki nöqtədən ibarət olacaq: başlanğıc və son.

Yuxarıda gördüyünüz kimi, xəttin başlanğıc nöqtəsi koordinatı ilk iki atributda x1 və x2, son nöqtə koordinatı isə y1 və y2 atributlarında göstərilmişdir.

Burada həmçinin iki başqa atribut var: sərhədin rənginə və eninə cavabdeh olan stroke və stroke-width. Digər tərəfdən, bu atributları daxili üslubda da müəyyən edə bilərik:

Style="stroke-width:1; stroke:rgb(0,0,0);"
və bizə eyni nəticəni verəcəkdir.

*

qırıq xətt

Bu, "xətt"ə çox bənzəyir, lakin "polyline" elementi ilə biz bir əvəzinə bir neçə xətt çəkə bilərik. Budur bir nümunə:

"Polyline" elementi xətlərin bütün koordinatlarını ehtiva edən nöqtə atributlarına malikdir.

*

Düzbucaqlı

Biz yalnız "düz" elementin köməyi ilə bir düzbucaqlı çəkə bilərik. Biz yalnız eni və hündürlüyü təyin etməliyik:

*

Dairə

"Dairə" elementi ilə də dairə çəkə bilərik. Bu misalda r atributu ilə müəyyən edilən radiusu 100 olan dairə çəkəcəyik:

İlk iki atribut, cx və cy, dairənin mərkəzi koordinatını təyin edir. Yuxarıdakı misalda biz həm x, həm də y koordinatları üçün 102 təyin etdik. Bu atributlar təyin edilmədikdə, onlar standart olaraq 0 olacaq.

*

Ellips

“Elips” elementi ilə ellipslər çəkə bilərik. Burada hər şey dairə ilə eyni şəkildə işləyir, lakin bu dəfə biz rx və ry atributlarından istifadə edərək x xətti radiusunu və y xətti radiusunu ayrıca idarə edə bilərik.

*

Poliqon

"Çoxbucaqlı" elementi ilə çoxbucaqlılar, üçbucaq, səkkizbucaq kimi çoxbucaqlı və tərəfləri olan formalar çəkə bilərik. Misal:

*

Vektor qrafik redaktorundan istifadə etməklə

Gördüyünüz kimi, HTML-də SVG ilə sadə fiqurlar çəkmək olduqca asandır. Ancaq daha mürəkkəb bir obyektə ehtiyacımız varsa, bu üsul artıq bizə uyğun olmayacaq.

Xoşbəxtlikdən, yuxarıda qeyd etdiyimiz kimi, işi görmək üçün Adobe Illustrator və ya Inkscape kimi vektor qrafik redaktorundan istifadə edə bilərik. Bu proqram təminatı ilə tanışsınızsa, HTML kodundan istifadə etmək əvəzinə, istifadəçi dostu interfeysdən istifadə edərək asanlıqla obyektlər çəkə bilərsiniz.

Və ya siz həmçinin aşağıdakı elementlərdən birini istifadə edərək svg faylının özünü yerləşdirə bilərsiniz: embed, iframe, object.

Nəticə oxşar olacaq.

IN bu misal ilə istifadə etdik.

*

Genişləndirilə bilən vektor qrafikası üçün brauzer dəstəyi

Brauzer dəstəyi baxımından, IE8 və daha əvvəlki versiyalar istisna olmaqla, genişlənə bilən vektor qrafikaları artıq çox yaxşı dəstəklənir. Lakin bu, adlı javascript kitabxanası ilə düzəldilə bilər. İşləri asanlaşdırmaq üçün biz SVG kodumuzu Raphael tərəfindən dəstəklənən formata çevirmək üçün alətdən istifadə edəcəyik.

Başlamaq üçün Raphael.js kitabxanasını endirin və HTML kodunuza daxil edin. Sonra, svg faylını sayta yükləyin, yaradılan kodu kopyalayıb aşağıdakı yükləmə funksiyasına yapışdırın:

window.onload=function() (
//Rafael kodu bura gedir
}
Bədən etiketinin içərisinə id atributu rsr ilə aşağıdakı div daxil edin.

Və işimiz bitdi! Aşağıdakı linkdəki nümunəyə baxın.

Yekun olaraq

Beləliklə, SVG-nin əsasları budur. Ümid edirik ki, indi bu mövzu haqqında bir az anlayışınız var. Bu biridir daha yaxşı yollar Səhifələrinizin performansını optimallaşdırın, eyni zamanda hətta Retina ekranlarında aydın şəkildə göstərilə bilən qrafikləri təmin edin.

Həmişə olduğu kimi, əgər maraqlanırsınızsa, biz sizin üçün kiçik bir əlavə məqalə seçmişik.

* (SVG-yə giriş)
* (SVG: qətnamədən asılı olmayaq)
* (Niyə SVG istifadə etmirsiniz?)

Oxuduğunuz üçün təşəkkür edirik və ümid edirik ki, bu məqalə sizin üçün faydalı olacaq!

Diqqət! Sizin gizli mətnə ​​baxmaq icazəniz yoxdur.