HTML svg brauzerində diaqram çəkin. SVG nədir: istifadənin müsbət və mənfi tərəfləri. SVG nədir

Vektor qrafikası çap mediasında geniş istifadə olunur. Veb-saytda biz SVG vektor qrafiklərini də əlavə edə bilərik (Ölçəklənən Vektor Qrafiki). W3.org saytındakı rəsmi spesifikasiyaya istinad edərək, SVG XML-də ikiölçülü qrafikləri təsvir etmək üçün bir dil kimi təsvir edilmişdir. SVG sizə vektor qrafik formaları (məsələn, düz xətlərdən və əyrilərdən ibarət kontur), şəkillər və mətn yaratmağa imkan verir.

SVG-nin üstünlükləri

SVG rastr qrafika ilə müqayisədə bir sıra üstünlüklər təklif edir, onlardan bəziləri bunlardır:

Ölçeklenebilirlik

Rastr təsviri piksellərdən ibarətdir və ölçüləndikdə keyfiyyətini itirir, vektor qrafikası isə miqyasdan asılı olmayaraq öz nisbətlərini saxlayır.

HTTP sorğusunun sürətləndirilməsi

SVG faylı svg teqindən istifadə etməklə birbaşa HTML sənədinə daxil edilə bilər, ona görə də brauzerin sorğu göndərməsinə ehtiyac yoxdur. Bu, daha yaxşı performans və saytın daha az yüklənməsi ilə nəticələnir.

Stilizasiya və skriptlər

Svg teqini birbaşa HTML sənədinə daxil etmək də bizə qrafik üslubları asanlıqla təyin etməyə imkan verir. Fon rəngi, sərhəd şəffaflığı və s. kimi obyekt xüsusiyyətlərini dəyişə bilərik. Bundan əlavə, biz də istifadə edərək qrafikləri manipulyasiya edə bilərik.

Şəkillər animasiya və redaktə edilə bilər

SVG obyekti css və ya JavaScript (JQuery) istifadə edərək element animasiyasından istifadə etməklə canlandırıla bilər. SVG obyekti Inkscape və ya Adobe Illustrator kimi istənilən mətn redaktoru və ya vektor qrafik redaktoru ilə redaktə edilə bilər.

Daha kiçik fayl ölçüsü

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

SVG ilə sadə formaların yaradılması

Spesifikasiyaya uyğun olaraq, kimi bəzi əsas formalar yarada bilərik düzbucaqlılar, dairələr, xətlər, ellipslər, çoxbucaqlılar və çoxbucaqlılar SVG istifadə edərək və brauzerin SVG qrafikasını göstərməsi üçün bu qrafik elementlərin hamısı etiketə daxil edilməlidir. etiket. Aşağıdakı nümunələrə baxaq:

Xətt

Kimə xətt çəkmək SVG-də elementdən istifadə edə bilərsiniz . Bu element bir xətt çəkmək üçün istifadə olunur, buna görə də yalnız iki nöqtədən ibarət olacaq, Başlamaq Və son.

< /svg>

Yuxarıda gördüyünüz kimi, xəttin başlanğıc nöqtəsi ilk iki atributla ifadə edilir x1 və x2 , xəttin koordinatının son nöqtəsi isə y1 və y2 ilə ifadə edilir.

Haşiyənin rəngini və enini təyin etmək üçün istifadə edilən digər iki atribut var, vuruş və vuruş eni. Bundan əlavə, biz bu atributları daxili üslubda da müəyyən edə bilərik:

Style="stroke-width:1; stroke:rgb(0,0,0);"

o, eyni şeyi etməklə sona çatır.

qırıq xətt

Bu element oxşardır , lakin köməyi ilə Bir element üçün bir əvəzinə bir neçə xətt çəkə bilərik. Budur bir nümunə:

"0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" vuruş eni ="1" stroke="rgb(0,0,0)" /> < /svg>

Düzbucaqlı

Bununla düzbucaqlı çəkmək də asandır element. Biz yalnız eni və hündürlüyü müəyyən etməliyik, məsələn:

< /svg>

Dairə

ilə də dairə çəkə bilərik element. Aşağıdakı nümunədə r atributundan istifadə edərək müəyyən edilmiş radiusu 100 olan bir dairə yaradacağıq:

< /svg>

İlk iki atribut, cx və cy, dairənin mərkəzinin koordinatlarını təyin edir. Yuxarıdakı misalda biz həm x, həm də y koordinatları kimi 102 yaratdıq, əgər bu atributlar göstərilməyibsə, 0 standart dəyər kimi qəbul ediləcək.

Ellips

Teqdən istifadə edərək ellips çəkə bilərik . Yaratma prinsipi dairə ilə eynidir, lakin bu dəfə xəttin x-radiusunu və y-radiusunu, həmçinin rx və ry atributlarını idarə edə bilərik;

< /svg>

Poliqon

Elementdən istifadə Üçbucaq, altıbucaqlı və hətta düzbucaqlı kimi çoxtərəfli formalar yarada bilərik. Budur bir nümunə:

"70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" vuruş eni ="1" stroke="rgb(0,0,0)" /> < /svg>

Vektor qrafik redaktorundan istifadə

Gördüyünüz kimi, HTML sənədində sadə SVG obyektlərindən istifadə etmək olduqca asandır. Lakin, obyekt daha mürəkkəbləşdikdə, bu üsul artıq ideal deyil.

Xoşbəxtlikdən, yuxarıda qeyd etdiyimiz kimi, məsələn, bir vektor qrafik redaktorundan istifadə edə bilərik Adobe Illustrator və ya Inkscape .

Inkscape ilə işləyirsinizsə, siz vektor fayllarınızı SVG formatında saxlaya və sonra onu mətn kodu redaktorunda aça bilərsiniz. Bütün kodları kopyalayın və HTML sənədinizə yapışdırın.

Siz embed , iframe və obyekt teqlərindən istifadə edərək .svg fayllarını yerləşdirə bilərsiniz, məsələn;

Nəticə sonda eyni olacaq.

*Bu nümunədə biz bir şəkil istifadə edirik

Bu gün biz SVG haqqında danışacağıq, hansı formatdır, nə ilə istifadə olunur və istifadə etməyə dəyərmi? Format xüsusilə yeni olmasa da, tətbiqi sayəsində populyarlığını qazandı. Brauzerlərin bütün son versiyaları artıq bu format üçün dəstək alıb.

O, niyə bu qədər məşhurdur? Və onu başqalarından fərqləndirən nədir? Bu gün biz bu suallara cavab verəcəyik və həmçinin bu fayl növləri ilə işləməyə başlamaq üçün nə bilməli olduğunuzu sizə xəbər verəcəyik.

SVG nədir?

SVG – Ölçəklənən Vektor Qrafikası – veb tərtibatçıları üçün vektor əsaslı formatdır. SVG vektor formatı olduğundan, onun şəkilləri keyfiyyətini itirmədən yüksək qətnamələrdə göstərilə bildiyi üçün bu tip format o qədər populyarlaşdı.

Bu işarələmə dilinin inkişafına təkan ilk dəfə 1999-cu ildə W3C kimi daha yaxşı tanınan World Wide Web Konsorsiumu tərəfindən verilmişdir. W3C SVG konsepsiyasını verdi - ikiölçülü qrafik interfeyslər və şəkillər yaratmaq üçün işarələmə dili.

Praktikada istifadə edin

SVG-ni bu qədər populyar edən nədir və niyə getdikcə daha çox dizayner ondan istifadə etməyə başlayır? Çox sadədir, lazım olduğu kimi işləyir.

SVG digər formatlarla müqayisədə yüngüldür. Bu formatın inanılmaz imkanları var. Bayraqlar, simvollar, interfeys elementləri. Və bu, necə istifadə oluna biləcəyinin kiçik bir siyahısıdır. Onun istifadəsinin ən böyük üstünlüyü ondan ibarətdir ki, vektor formatıdır, yəni istənilən displeydə istifadə oluna bilər – onların qətnaməsi nə olursa olsun, hər yerdə eyni şəkildə göstəriləcək.

SVG fayllarını idarə etmək olduqca asandır, çünki faylları statik şəkil kimi saxlanılır. SVG-dən istifadə edərək çox sadə, lakin gözəl animasiyalar yaradaraq vebsaytınıza interaktivlik əlavə edə bilərsiniz.

Harada istifadə oluna biləcəyinə dair bir neçə nümunə:

Loqolar
Fon şəkli
Düymə kimi istifadə edin
Kartlar
Diaqramlar və ya rəsmlər

Bir qayda olaraq, SVG ən çox cavab verən veb-saytlar, animasiyalar və digər dinamik effektlər yaratarkən istifadə olunur.

SVG-dən istifadənin üstünlükləri

Bəs niyə SVG-nin xeyrinə adi JPG və ya GIF-dən imtina etməliyik? Layihənizdə hələ də istifadə etməyin bir neçə səbəbi var.

SVG vektor formatıdır, buna görə də şəkillərin ölçüsünün istifadəçinin ekran qətnaməsindən asılı olduğu həssas saytlar üçün istifadə etməyə dəyər və SVG qanun layihəsinə qüsursuz uyğun gəlir.
SVG şəkilləri xassələrini müəyyən etmək üçün XML-dən istifadə edir və buna görə də daha da sıxılma qabiliyyətinə malikdir.
SVG şəkillərini idarə etmək çox asandır və bu, rəngləri dəyişdirə, kölgələr, filtrlər, bulanıqlıqlar və bir çox başqa effektlər əlavə edə bilən dizaynerlər üçün daha çox imkanlar açır.
SVG anlamaq olduqca asandır
SVG açıq veb standartları ilə işləyir
SVG yaratmaq üçün adi mətn kodu redaktorundan istifadə edə bilərsiniz. Bu, sizə hərəkətlərinizdə bir qədər sərbəstlik verir, hamısı sizin ehtiyaclarınızdan və bu sahədə ekspert biliklərinin səviyyəsindən asılıdır.

SVG-dən istifadənin mənfi cəhətləri

Yəqin ki, SVG-nin nə qədər faydası olduğuna görə şoka düşmüsünüz. Və bəlkə də bunun heç bir mənfi tərəfi olmadığını düşünürdülər. Ancaq yox, mütləq bir cüt var və bunlardan bəziləri:

Explorer 8 və daha aşağı versiyalar kimi köhnə brauzerlər üçün dəstək yoxdur.
SVG fotoşəkillərdə istifadə edilə bilməz, çünki o, vektor formatıdır və müxtəlif formalar və xətlər yaratmaq üçün istifadə olunur.

Sonra nə var?

SVG-nin gələcəyi yeni başlayır. Mobil üçün qəbul edilmiş şəkil formatı (və standart) olaraq SVG yalnız təcil qazanmağa davam edəcək.

SVG faylları genişlənə bilən vektor qrafikası fayllarıdır. Daha dəqiq desək, ikiölçülü qrafikləri təsvir etmək üçün bir dildir. Əsas XML işarələmə dili idi.
Bu formatın bir sıra üstünlükləri var: vektor şəkilləri olmaqla, SVG şəkilləri necə ölçülüb-biçilsə də, keyfiyyətini qoruyur. SVG şəkilləri interaktivliyi və animasiyanı dəstəkləyir. SVG W3C standartıdır, yəni yaxşı və keyfiyyətli dəstəyə malikdir. SVG fayllarını təkcə qrafik redaktorlarda deyil, həm də istənilən mətn redaktorunda yarada bilərsiniz.
XML əsaslı SVG şəkilləri axtarıla, indeksləşdirilə və skriptlə yazıla və sıxıla bilər.

Rəsmsiz rəsmə keçməzdən əvvəl boş svg faylının strukturuna nəzər salaq, istənilən proqramda nümayiş etdirmək üçün kifayətdir.

1.
2.
3.
4.
5.

Rahatlıq üçün sətirlər nömrələnir. Birinci sətir XML sənədinin standart bəyannaməsini ehtiva edir.
İkinci sətir sənədin DTD sxeminin göstəricisidir. Üçüncü sətir yaradılmış sənədin ölçüsünü 600x600 pikselə təyin edir. İlk etiket atributu
Inkscape-də yaradılmış çertyoyu notepadda açsanız, inkscape-in defolt olaraq yaratdığı əlavə teqləri tapa bilərsiniz. Rəsmi saxlayarkən sadə svg seçsəniz, fayl strukturu bir qədər fərqli olacaq.
Əsas formaların yaradılmasına keçək. Özünüzü notepad ilə silahlandırın və davam edin. Biz inkscape-də nə etdiyimizi yoxlayırıq, ona görə də onun işləməsinə davam edirik.

Dairə.

Dairə yaratmaq üçün xətti boş svg faylımıza əlavə edin
Atributlar çevrənin mərkəzinin (cx və cy) və onun radiusunun (r) koordinatlarıdır. Bu halda, koordinatların mənşəyi iş vərəqinin yuxarı sol küncündə yerləşir. Tam svg faylı:

Sənədin tam mərkəzində radiusu 100 piksel olan bir dairə yaradılacaq. Doldurma rəngi, ştrix, təbəqələr və ya digər effektlər haqqında heç bir təlimat olmadığı üçün dairə ştrixsiz çəkilir və qara rənglə doldurulur, bunu Inkscape-də sənədi açarkən görürük. Nəzərə alın ki, sənəddə heç bir təbəqə olmayacaq.

Atribut təyinatları cx, cy Və r standartdır. Gəlin dairəmizin vuruşunu və doldurmasını təyin edək, həmçinin vuruşun qalınlığını 6 pikselə təyin edək.

doldurun = "yaşıl" vuruş = "sarı" vuruşun eni = "6"/>

Doldurma yaşıl rəngə, vuruş isə sarıya təyin edilib.

Maraqlısı odur ki, bu sənəddə bir təbəqə yaratsanız, dairə rəsminin yaradılmış təbəqədə deyil, orada bir yerdə olacağını görə bilərsiniz? Müvafiq atributlar qırmızı rənglə vurğulanır. Doldurma və ya vuruş olmadan dairə yaratmaq lazımdırsa, müvafiq atributun dəyərini heç biri kimi təyin edin

vuruş = "heç biri"

Doldurmanın şəffaflığını dəyişmək üçün atribut əlavə edin qeyri-şəffaflıq, Misal üçün qeyri-şəffaflıq = "0.5" doldurmanın şəffaflığını 2 dəfə azaldır və vuruşun şəffaflığını dəyişdirmək üçün atribut əlavə edin vuruş-şəffaflıq, Misal üçün vuruş-şəffaflıq = "0.5" Vuruşun şəffaflığını 2 dəfə azaldır.

Düzbucaqlılar, kvadratlar.

Düzbucaqlıların qurulması belə görünür

Düzbucaqlının atributları (kvadrat) rect yuxarı sol küncün koordinatlarını, həmçinin düzbucaqlının enini və hündürlüyünü göstərin. Doldurma və vuruş parametrləri eyni görünür.

Yaxşı, sonunda, kvadrat ilə bir dairə

Şəffaflığı dəyişdirmək üçün biz artıq məlum yanaşmadan istifadə edirik - bir atribut əlavə edin qeyri-şəffaflıq doldurmaq və atribut üçün vuruş-şəffaflıq təsvir etmək üçün.

Ardı var.

Bu yazı saytda vektor qrafikasının əsaslarını əhatə edən SVG (Scalable Vector Graphic) haqqında məqalələr silsiləsində birincidir.

Vektor qrafikası çapda geniş istifadə olunur. Veb saytlar üçün w3.org saytındakı rəsmi spesifikasiyaya görə SVG mövcuddur XML-də ikiölçülü qrafikləri təsvir etmək üçün dil. SVG-ə üç növ obyekt daxildir: formalar, şəkillər və mətn. SVG 1999-cu ildən mövcuddur və 16 avqust 2011-ci ildən W3C tövsiyələrinə daxil edilmişdir. SVG bir sıra mühüm üstünlüklərə malik olsa da, veb tərtibatçıları tərəfindən yüksək qiymətləndirilmir.

SVG-nin üstünlükləri

Ölçəkləmə: Rastr qrafikasından fərqli olaraq, SVG miqyaslandıqda keyfiyyətini itirmir, ona görə də tor qişanın inkişafı üçün istifadə etmək rahatdır.
HTTP sorğularının azaldılması: SVG istifadə edərkən serverə edilən zənglərin sayı azalır və saytın yükləmə sürəti müvafiq olaraq artır.
Styling və skript: CSS-dən istifadə edərək, siz saytda fon, şəffaflıq və ya sərhədlər kimi qrafik parametrlərini dəyişə bilərsiniz.
Animasiya və redaktə: javascript-dən istifadə etməklə siz SVG-ni canlandıra, həmçinin onu mətn və ya qrafik redaktorda (InkScape və ya Adobe Illustrator) redaktə edə bilərsiniz.
Kiçik ölçü: SVG obyektlərinin çəkisi rastr şəkillərdən çox azdır.

Əsas SVG formaları

Rəsmi spesifikasiyaya görə, SVG-dən istifadə edərək sadə obyektlər çəkə bilərsiniz: etiketdən istifadə edərək düzbucaqlı, dairə, xətt, ellips, çoxbucaqlı və ya çoxbucaqlı svg.

Etiketdən istifadə edərək sadə xətt xətt yalnız iki parametrlə - başlanğıc nöqtələri (x1 və x2) və son nöqtələr (y1 və y2):

Rəng və eni təyin etmək üçün siz həmçinin vuruş və vuruş eni atributları və ya üslublar əlavə edə bilərsiniz:

Style="stroke-width:1; stroke:rgb(0,0,0);"