SVG grafik formati va u qayerda ishlatiladi. SVG grafiklari bilan tanishish HTML svg brauzerida diagramma chizish

Vektor grafikasi bosma nashrlarda keng qo'llaniladi. Veb-saytda biz SVG vektor grafiklarini ham qo'shishimiz mumkin (Mashqlanadigan vektor grafikasi). W3.org saytidagi rasmiy spetsifikatsiyaga murojaat qilib, SVG XML-da 2D grafikalarni tavsiflash uchun til sifatida tasvirlangan. SVG sizga vektor grafik shakllarini (masalan, to'g'ri chiziqlar va egri chiziqlardan tashkil topgan yo'l), tasvirlar va matnlarni yaratish imkonini beradi.

SVG ning afzalliklari

SVG bitmap grafiklarga nisbatan bir qancha afzalliklarni taklif etadi, ulardan ba'zilari:

Masshtablilik

Rastrli tasvir piksellardan iborat bo'lib, masshtablanganda sifatini yo'qotadi, vektor grafiklari esa masshtabdan qat'iy nazar o'z nisbatlarini saqlaydi.

HTTP so'rovini tezlashtiring

SVG fayli to'g'ridan-to'g'ri HTML hujjatiga svg tegi yordamida kiritilishi mumkin, shuning uchun brauzer so'rov yuborishi shart emas. Bu yaxshi ishlashga va saytga kamroq yuklashga olib keladi.

Styling va skript

Svg tegini to'g'ridan-to'g'ri HTML hujjatiga joylashtirish bizga grafik uslublarni osongina o'rnatishga imkon beradi. Biz ob'ektning fon rangi, chegara shaffofligi va boshqalar kabi xususiyatlarini o'zgartirishimiz mumkin. Bunga qo'shimcha ravishda, biz grafiklarni ham manipulyatsiya qilishimiz mumkin.

Tasvirlar jonlantirilishi va tahrirlanishi mumkin

SVG obyekti CSS yoki JavaScript (JQuery) yordamida elementni jonlantirish orqali jonlantirilishi mumkin. SVG ob'ektini har qanday matn muharriri yoki Inkscape yoki Adobe Illustrator kabi grafik vektor muharriri bilan tahrirlash mumkin.

Kichikroq fayl hajmi

SVG bitmapga nisbatan kichikroq fayl hajmiga ega.

SVG yordamida oddiy shakllar yaratish

Spetsifikatsiyaga ko'ra, biz ba'zi bir asosiy shakllarni yaratishimiz mumkin to'rtburchaklar, doiralar, chiziqlar, ellipslar, poliliniyalar va ko'pburchaklar SVG bilan va brauzer SVG grafikalarini ko'rsatishi uchun barcha bu grafiklar tegga kiritilishi kerak teg. Keling, quyidagi misollarni ko'rib chiqaylik:

Chiziq

Kimga chiziq chizish SVG da siz elementdan foydalanishingiz mumkin ... Ushbu element bitta chiziq chizish uchun ishlatiladi, shuning uchun u faqat ikkita nuqtadan iborat bo'ladi, Boshlash va yakun.

< /svg>

Yuqorida ko'rib turganingizdek, chiziqning kelib chiqishi birinchi ikkita atribut x1 va x2 bilan, chiziqning oxirgi nuqtasi esa y1 va y2 bilan ifodalanadi.

Bundan tashqari, chegaraning rangi va kengligini aniqlash uchun ishlatiladigan ikkita boshqa atributlar, shtrix va chiziq kengligi mavjud. Shu bilan bir qatorda, biz ushbu atributlarni inline uslubda ham belgilashimiz mumkin:

Uslub = "zarb kengligi: 1; zarba: rgb (0,0,0);"

u ham xuddi shunday qiladi.

Buzilgan chiziq

Ushbu element o'xshaydi lekin yordam bilan Element, biz bitta o'rniga bir nechta chiziq chizishimiz mumkin. Mana bir misol:

"0,0 50,0 150,100 250,100 300,150" to'ldirish = "rgb (249,249,249)" stroke-width = "1" stroke = "rgb (0,0,0)" /> < /svg>

To'rtburchak

Bu bilan to'rtburchak chizish ham oson element. Biz faqat kenglik va balandlikni belgilashimiz kerak, masalan:

< /svg>

Bir doira

bilan doira chizishimiz ham mumkin element. Quyidagi misolda r atributi yordamida aniqlangan 100 radiusli aylana hosil qilamiz:

< /svg>

Birinchi ikkita atributda cx va cy aylana markazining koordinatalarini belgilaydi. Yuqoridagi misolda biz x va y koordinatalari uchun 102 ni yaratdik, agar bu atributlar ko'rsatilmagan bo'lsa, 0 standart sifatida qabul qilinadi.

Ellips

Teg yordamida ellips chizishimiz mumkin ... Yaratish printsipi aylana bilan bir xil, ammo bu safar biz chiziqning x-radiusini va y -radiusni, shuningdek, rx va ry atributlarini boshqarishimiz mumkin;

< /svg>

Poligon

Elementdan foydalanish Biz uchburchak, olti burchak va hatto to'rtburchak kabi ko'p qirrali shakllarni yasashimiz mumkin. Mana bir misol:

"70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" to'ldirish = "rgb (234,234,234)" stroke-width = "1" stroke = "rgb (0,0,0)" /> < /svg>

Vektorli grafik muharriridan foydalanish

Ko'rib turganingizdek, HTML hujjatida oddiy SVG obyektlaridan foydalanish juda oson. Biroq, ob'ekt yanada murakkablashgani sababli, bu usul endi ideal emas.

Yaxshiyamki, yuqorida aytib o'tganimizdek, biz kabi vektor grafik muharriridan foydalanishimiz mumkin Adobe illustrator yoki Inkscape .

Agar siz Inkscape bilan ishlayotgan bo'lsangiz, vektor fayllaringizni SVG formatida saqlashingiz va keyin uni matn muharriri kodida ochishingiz mumkin. Barcha kodlardan nusxa oling va ularni HTML hujjatingizga joylashtiring.

Siz svg fayllarni o'rnatish, iframe va ob'ekt teglari yordamida joylashtirishingiz mumkin, masalan;

Yakuniy natija bir xil bo'ladi.

* Ushbu misolda biz rasmdan foydalanamiz

Bugun biz SVG haqida gaplashamiz, u qanday format, u nima bilan iste'mol qilinadi va undan foydalanishga arziydimi. Format ayniqsa yangi bo'lmasa-da, u o'zining joriy etilishi tufayli mashhurlikka erishdi. Hamma narsa oxirgi versiyalari brauzerlar allaqachon ushbu formatni qo'llab-quvvatlagan.

Nega u shunchalik mashhur? Va uni boshqalardan nimasi bilan farq qiladi? Bugun biz ushbu savollarga javob beramiz, shuningdek, ushbu fayl turlari bilan ishlashni boshlash uchun nimani bilishingiz kerakligini aytamiz.

SVG nima?

SVG Scalable Vector Graphics - veb-ishlab chiquvchilar uchun vektorga asoslangan formatni anglatadi. Bu tur SVG vektor formati bo'lganligi sababli, uning tasvirlari sifatini yo'qotmasdan yuqori aniqlikda ko'rsatilishi mumkinligi sababli format juda mashhur bo'ldi.

Ushbu til belgisini rivojlantirishga turtki birinchi bo'lib Konsortsium tomonidan berilgan Butunjahon tarmog'i(World Wide Web Consortium), 1999 yilda W3C nomi bilan mashhur bo'lgan. W3C SVG tushunchasini berdi - ikki o'lchovli yaratish uchun til belgilari grafik interfeyslar va tasvirlar.

Amaliy foydalanish

SVG-ni nima uchun bu qadar mashhur qiladi va nima uchun ko'proq dizaynerlar undan foydalanishni boshlaydilar? Bu juda oddiy, u shunday ishlaydi.

SVG boshqa formatlarga qaraganda engilroq. Ushbu format ajoyib imkoniyatlarga ega. Bayroqlar, belgilar, interfeys elementlari. Va bu uni qanday ishlatishingizning kichik ro'yxati. Uni ishlatishning eng katta afzalligi shundaki, u vektor formatidir, ya'ni uni har qanday displeyda ishlatish mumkin - ularning o'lchamlari qanday bo'lishidan qat'i nazar, u hamma joyda bir xil ko'rsatiladi.

SVG fayllarni boshqarish juda oson, chunki ularning fayllari statik tasvir sifatida saqlanadi. SVG yordamida juda oddiy, ammo chiroyli animatsiyalarni yaratish orqali veb-saytingizga interaktivlikni qo'shishingiz mumkin.

Uni qayerda ishlatish mumkinligiga bir nechta misollar:

Logotiplar
Fon rasmi
Tugmalar sifatida foydalaning
Kartalar
Diagrammalar yoki rasmlar

Qoida tariqasida, SVG ko'pincha sezgir veb-saytlar, animatsiyalar va boshqa dinamik effektlarni yaratishda ishlatiladi.

SVG dan foydalanishning afzalliklari

Xo'sh, nega SVG foydasiga odatiy JPG yoki GIF-dan voz kechish kerak? Loyihangizda uni hali ham ishlatishingiz uchun ko'p sabablar bor.

SVG vektor formatidir, shuning uchun uni tasvir o'lchami foydalanuvchining ekran o'lchamlariga bog'liq bo'lgan va SVG juda mos keladigan sezgir saytlar uchun foydalanishga arziydi.
SVG tasvirlari o'z xususiyatlarini aniqlash uchun XML dan foydalanadi va shuning uchun yanada ko'proq siqish qobiliyatiga ega.
SVG tasvirlarini boshqarish juda oson va bu rangni o'zgartirish, soyalar, filtrlar, xiralashtirish va boshqa ko'plab effektlarni qo'shishi mumkin bo'lgan dizaynerlar uchun yanada ko'proq imkoniyatlar ochadi.
SVGni tushunish juda oson
SVG ochiq veb standartlari bilan ishlaydi
SVG yaratish uchun oddiy matn kod muharriridan foydalanishingiz mumkin. Bu sizga bir oz harakat erkinligini beradi, barchasi sizning ehtiyojlaringiz va ushbu sohadagi ekspert bilimlari darajasiga bog'liq.

SVG dan foydalanishning kamchiliklari

SVG-ning qancha afzalliklari borligiga hayron bo'lishingiz mumkin. Va, ehtimol, ular uning hech qanday kamchiliklari yo'q deb o'ylashgan. Ammo yo'q, albatta, bir juftlik bor va ulardan ba'zilari:

Explorer 8 va undan keyingi versiyalar kabi eski brauzerlar qo'llab-quvvatlanmaydi.
SVG-ni fotosuratlarda ishlatib bo'lmaydi, chunki u vektor formatidir va turli shakllar va chiziqlar yaratish uchun ishlatiladi.

Keyingisi nima?

SVG kelajagi endi boshlanmoqda. Mobil uchun qabul qilingan rasm formati (va standart) sifatida SVG faqat tortishishda davom etadi.

Ushbu post veb-saytdagi vektor grafikasi asoslarini qamrab oluvchi Scalable Vector Graphic (SVG) haqidagi maqolalar seriyasining birinchisidir.

Vektorli grafika poligrafiya sanoatida keng qo'llaniladi. Veb-saytlar uchun SVG mavjud, u rasmiy spetsifikatsiyaga muvofiq w3.org XML-da ikki o'lchovli grafiklarni tavsiflash uchun til. SVG uchta turdagi ob'ektlarni o'z ichiga oladi: shakllar, tasvirlar va matn. SVG 1999 yildan beri mavjud va 2011 yil 16 avgustdan beri W3C tavsiyalariga kiritilgan. SVG veb-ishlab chiquvchilar tomonidan juda kam baholanadi, garchi u bir qator muhim afzalliklarga ega.

SVG ning afzalliklari

Masshtablash: Bitmapli grafiklardan farqli o'laroq, SVG masshtablanganda sifatni yo'qotmaydi, shuning uchun uni retinani rivojlantirish uchun ishlatish qulay.
HTTP so'rovlarining kamayishi: SVG-dan foydalanganda serverga so'rovlar soni kamayadi va shunga mos ravishda saytni yuklash tezligi oshadi.
Styling va skript yaratish: CSS-dan foydalanib, siz saytdagi fon, shaffoflik yoki chegaralar kabi grafik parametrlarni o'zgartirishingiz mumkin.
Animatsiya va tahrirlash: JavaScript-dan foydalanib, siz SVG-ni jonlantirishingiz, shuningdek matn yoki matnni tahrirlashingiz mumkin. grafik muharriri(InkScape yoki Adobe Illustrator).
Kichik: SVG ob'ektlari bitmaplarga qaraganda ancha kam og'irlik qiladi.

Asosiy SVG shakllari

Rasmiy spetsifikatsiyaga ko'ra, siz SVG-dan foydalanib oddiy ob'ektlarni chizishingiz mumkin: to'rtburchak, doira, chiziq, ellips, poliliniya yoki teg yordamida ko'pburchak. svg.

Teg bilan oddiy chiziq chiziq faqat ikkita parametr bilan - boshlang'ich nuqtalari (x1 va x2) va yakuniy nuqtalar (y1 va y2):

Shuningdek, rang va kenglikni o'rnatish uchun chiziq va chiziq kengligi atributlari yoki uslublarini qo'shishingiz mumkin:

Uslub = "zarb kengligi: 1; zarba: rgb (0,0,0);"

Buzilgan chiziq

Sintaksis teg yordamida yuqoridagi bilan bir xil poliliniya, xususiyat ball nuqtalarni belgilaydi:

To'rtburchak

Rect teg bilan chaqirilgan ba'zi atributlar qo'shilishi mumkin:

Doira

Teg orqali chaqiriladi doira, atribut yordamida misolda r radiusni o'rnating, cx va cy markazning koordinatalarini belgilang:

Ellips

Teg orqali chaqiriladi ellips, xuddi shunday ishlaydi doira, lekin siz ikkita radiusni belgilashingiz mumkin - rx va ry:

Poligon

Teg orqali chaqiriladi poligon, ko'pburchak turli tomonlar soniga ega bo'lishi mumkin:

Tahrirlovchilardan foydalanish

Misollardan ko'rinib turibdiki, asosiy SVG shakllarini chizish juda oson, lekin ob'ektlar ancha murakkab bo'lishi mumkin. Buning uchun siz Adobe Illustrator yoki Inkscape kabi vektor grafik muharrirlaridan foydalanishingiz kerak, bu yerda fayllarni SVG formatida saqlashingiz va keyin ularni matn muharririda tahrirlashingiz mumkin. Embed, iframe va object yordamida SVG-larni sahifaga joylashtirishingiz mumkin:

Misol tariqasida OpenClipArt.org saytidan iPod tasvirini keltirish mumkin.

SVG (Scalable Vector Graphics) - W3C konsorsiumi tomonidan ishlab chiqilgan vektor grafika standarti.

SVG 2D grafik ilovalari va tasvirlarini tavsiflash uchun belgilash tili boʻlib, XML kengaytiriladigan belgilash tilining kichik toʻplamidir. Bunga bir qator tegishli grafik skriptlari ham kiradi.

SVG hamma tomonidan qo'llab-quvvatlanadi zamonaviy brauzerlar shaxsiy kompyuterlar va mobil telefonlar uchun. SMIL animatsiyasi va SVG shriftlari kabi baʼzi funksiyalar keng qoʻllanilmaydi.

To'liq spetsifikatsiyaning so'nggi versiyasi SVG 1.1.

SVG 2 ishlab chiqilmoqda. U SVG uchun yangi, ishlatish uchun qulay xususiyatlarni qo'shadi va HTML, CSS va DOM bilan qattiqroq integratsiya ustida ishlaydi.

SVG ning fazilatlari

SVG grafiklari matematik formulalar yordamida yaratiladi, ular tasvir hajmi o'zgartirilganda sozlanishi mumkin. Shunday qilib vektor tasvirlar bitmaplarga qaraganda yaxshiroq masshtablash.
Vektorli tasvirning o'lchami odatda JPEG, GIF yoki PNG bilan taqqoslanadigan sifatli tasvirlardan kichikroqdir.
SVG grafiklari mavjud matn formati, uni daftarda tahrirlash va Adobe Illustrator, CorelDRAW grafik vektor muharrirlarida chizish mumkin.
SVG-da skript va animatsiya dinamik va interaktiv grafiklarni yaratishga imkon beradi.
SVG grafikasidagi matn tasvir emas, matndir, shuning uchun u qidiruv tizimlari tomonidan indekslanadi.
SVG tasviriga bir nechta havolalar qo'shilishi mumkin.
Tashqi jadvallar SVG formatiga ulanishi mumkin CSS uslublari, konteyner ichidagi global uslublar yoki shakl va yoʻl teglarida uslub atributidan foydalanib, inline uslublarini qoʻshing.

SVG-ni veb-sahifaga kiritish

SVG tasvirini veb-sahifaga bir necha usul bilan kiritish mumkin. Birinchisi, sahifaga SVG kodini oddiy kiritish (katta rasm bilan sahifaning HTML kodi juda katta va o'qish qiyin bo'ladi). Boshqa usullar bilan siz avval SVG kodini kengaytmali faylga saqlashingiz kerak .svg.

Shunday qilib, veb-sahifaga SVG tasvirini kiritish usullari:

konteynerdagi HTML hujjatiga to'g'ridan-to'g'ri kod kiritish ;
fon tasviri sifatida SVG faylidan foydalanish;
teglar yordamida SVG faylni HTML hujjatiga ulash img, joylashtirish, ob'ekt va iframe;
funksiya yordamida SVG faylni PHP hujjatiga ulash o'z ichiga oladi.

1. SVG kodini veb-hujjatga bevosita kiritish

2. SVG faylni fon tasviri sifatida ishlatish

3. SVG faylni img tegi yordamida ulash

4. Embed yorlig'i yordamida SVG faylni o'z ichiga oladi

5. Ob'ekt tegi yordamida SVG faylni ulash

6. Iframe tegidan foydalangan holda SVG faylini o'z ichiga oladi

7. SVG faylni o'z ichiga olish funksiyasidan foydalangan holda

Murakkab traektoriya

Teg tomonidan belgilangan ... Bu SVG elementlarining eng ko'p qirrali. Shaxsiy shakllarni yaratishga imkon beradi. Shaklning shakli atributlar tomonidan o'rnatiladi d uning qiymati maxsus buyruqlar to'plamidir. Bu buyruqlar katta va kichik harflarda bo'lishi mumkin. Katta harflar mutlaq joylashishni aniqlashni, kichik harflar nisbiy joylashishni bildiradi.

Jingalak chiziqning yo'li va yo'nalishini belgilash buyruqlari

M, m	boshlang'ich nuqtasi Mx, y
L, l	Chiziq segmenti Lx, y
H, h	Gorizontal chiziq Hx, y yoki hx
V, v	Vertikal chiziq Vx, y yoki vy
A, a	Ellips yoyi Arx, ry x o'qi-burilish katta-yoy-bayrog'i, supurish-bayrog'i x, y rx, ry- ellips yoyi radiuslari; x o'qining aylanishi- yoyning X o'qiga nisbatan burilish burchagi; katta yoy bayrog'i- agar (= 1), u holda yoyning katta qismi qurilgan, agar (= 0) bo'lsa - kichikroq qismi; supurish bayrog'i- agar (= 1), u holda yoy soat yo'nalishi bo'yicha chiziladi, agar (= 0) - soat sohasi farqli o'laroq; x, y- koordinatalar yakuniy nuqta yoylar.
C, c	Kubik Bezier egri chizig'i Cx1, y1 x2, y2 x, y x1, y1- birinchi nazorat nuqtasining koordinatalari; x2, y2 x, y
S, s	Silliq kubik Bezier egri chizig'i Sx2, y2 x, y x2, y2- ikkinchi nazorat nuqtasining koordinatalari; x, y Birinchi nazorat nuqtasi ikkinchi nazorat nuqtasining oyna tasviridir.
Q, q	Kvadrat Bezier egri chizig'i Qx1, y1 x, y x1, y1- nazorat nuqtasining koordinatalari; x, y- egri chiziqning oxirgi nuqtasining koordinatalari.
T, t	Silliq kvadratik Bezier egri chizig'i Qx1, y1 x, y x, y- egri chiziqning oxirgi nuqtasining koordinatalari. Ushbu buyruqning boshqaruv nuqtasi oldingi buyruqning boshqaruv nuqtasining oyna tasviridir.
Z, z	Yo'lni yopish

Misol

NATIJA:

SVG - vektor grafikasi uchun tasvir formati. Bu tom ma'noda kengaytiriladigan vektor grafikasidan boshqa narsa emas. Ya'ni, siz Adobe Illustrator dasturida aynan shu narsa bilan ishlaysiz. Veb-ishlab chiqishda SVG-dan foydalanish juda oson, ammo e'tiborga olish kerak bo'lgan ba'zi xususiyatlar mavjud.

SVG nima uchun ishlatiladi

Yaxshi siqilgan kichik fayl hajmi
Sifatni yo'qotmasdan har qanday o'lchamga o'tkazing
Retina displeylarida ajoyib ko'rinadi
Interaktivlik va filtrlar bilan to'liq dizayn nazorati

Keling, Adobe Illustrator dasturida kelgusi ish uchun biror narsa chizamiz. Keling, Kivi qushini olaylik:

E'tibor bering, tuval rasmning to'liq chetiga kesilgan. SVG-dagi kanvas PNG yoki JPG bilan bir xil tarzda qurilgan. Siz to'g'ridan-to'g'ri Adobe Illustrator-dan faylni SVG fayli sifatida saqlashingiz mumkin.

Faylni saqlaganingizdan so'ng, boshqa SVG imkoniyatlari dialog oynasi paydo bo'ladi. Rostini aytsam, men ushbu oynada taqdim etilgan barcha sozlamalar haqida ko'p narsa bilmayman. SVG profillari uchun spetsifikatsiya mavjud, shuning uchun agar sizni qiziqtirsa, uni o'qishingiz mumkin. Menimcha, SVG 1.1 ajoyib ishlaydi.

Qiziqarli tomoni shundaki, siz "OK" tugmasini bosishingiz va faylni saqlashingiz yoki "SVG Code ..." tugmasini bosing va SVG kodi bilan matn muharriri ochiladi.

Ikkala usul ham foydali bo'lishi mumkin.

SVG dan img yorlig'i sifatida foydalanish

Illustrator-da bizning tuvalimiz 612px ✕ 502px.

Sahifada rasm qanchalik katta bo'lishi sizga bog'liq. Kenglik va balandlik xususiyatlarini belgilash orqali tasvir hajmini o'zgartirishingiz mumkin, bu PNG yoki JPG bilan bir xil. Mana bir misol:

Ushbu qalamni tekshiring!

Qanday qilib o'zaro faoliyat SVG-ni yaratish mumkin

SVG-ni shu tarzda ishlatganda, siz brauzerlar bo'ylab turli xil qo'llab-quvvatlashni yodda tutishingiz kerak. Asosan, SVG IE8 va undan past, Android 2.3 va undan past versiyalardan tashqari hamma joyda ishlaydi.

Agar siz SVG-dan foydalanishingiz kerak bo'lsa, lekin yuqorida sanab o'tilgan brauzerlardan yordam kerak bo'lsa, muammoning bir nechta echimlari mavjud. Men ushbu muammoni hal qilish uchun turli xil loyihalarda bir nechta texnikadan foydalanganman.

SVG qo'llab-quvvatlashini tekshirishning bir usuli Modernizr bo'lib, u src yo'lini o'zgartiradi:

Agar (! Modernizr.svg) ($ (". Logo img"). Attr ("src", "rasmlar / logo.png");)

Devid Bushell juda engil vazn toifasini o'ylab topdi muqobil yo'l lekin u belgilashda javascriptni o'z ichiga oladi:

SVGeezy xizmati ham yordam berishi mumkin. Ushbu maqola davom etar ekan, biz SVG-ni qo'llab-quvvatlash uchun turli xil qayta tiklash usullarini ajratamiz.

Fon rasmi sifatida SVG dan foydalaning

Img tegiga o'xshab, SVG fon tasviri sifatida ishlatilishi mumkin:

Kiwi Corp logotipi (displey: blok; matn chegarasi: -9999px; kenglik: 100px; balandlik: 82px; fon: url (kiwi.svg); fon oʻlchami: 100px 82px;)

E'tibor bering, biz fon o'lchamini element bilan bir xil o'lchamga o'rnatmoqdamiz. Buni qilish kerak, chunki aks holda biz kichikni ko'ramiz yuqori qismi asl tasvir. Bu raqamlar tasvirning asl nisbatlarini hisobga oladi. Shuningdek, siz fon o'lchamidan qiymat sifatida foydalanishingiz mumkin kalit so'zlar, masalan, tasvir butun elementni to'ldirishi uchun o'z ichiga oladi.

SVG-ni fon tasviri sifatida ishlatish brauzerni qo'llab-quvvatlashda o'z izini qoldiradi, lekin umuman olganda, hamma narsa img tegidan foydalanish bilan bir xil.

Modernizr bu erda bizga ko'proq yordam berishi mumkin samarali usul img bilan qaraganda. Gap shundaki, agar siz almashtirsangiz fon tasviri qo'llab-quvvatlanadigan format bilan, img bilan bo'lgani kabi ikkita o'rniga faqat bitta HTTP so'rovi bajariladi. Modernizr "no-svg" sinf nomini qo'shadi HTML teg agar brauzer SVG-ni qo'llab-quvvatlamasa:

Asosiy sarlavha (fon: url (logo.svg) takrorlanmaydigan yuqori chap; fon o'lchami: o'z ichiga oladi;) .no-svg .main-sarlavha (fon rasmi: url (logo.png);)

Agar sizda SVG dan foydalanishning yuqoridagi ikkita usulidan foydalanishda muammolar mavjud boʻlsa, quyida vektor grafiklarini joylashtirishning yana bir qancha usullari keltirilgan.

"Inline" SVG dan foydalanish

Yuqorida ta'kidlanganidek, rasmni SVG formatida saqlashda Illustrator muharriridan foydalanib, siz to'g'ri SVG kodini olishingiz mumkin (siz faylni ham ochishingiz mumkin matn muharriri va ushbu kodni nusxalash). Siz ushbu kodni HTML-ga nusxalashingiz mumkin va SVG img-dan foydalanganda xuddi shunday ishlaydi.

Bu foydali bo'lishi mumkin, chunki tasvirning tasviri hujjatdagi kod bilan birga keladi va HTTP so'rovini qilmaydi. Boshqacha qilib aytganda, foyda Data URI maʼlumotlaridan foydalanish bilan bir xil. Biroq, kamchiliklar ham mavjud. To'g'ridan-to'g'ri SVG kodini joylashtirish va joylashtirish tufayli hujjat katta shishgan axlatga o'xshay boshlaydi.

Server tomonida SVG kiritish imkoniyati ham mavjud:

SVG optimallashtirish

Adobe Illustrator sukut bo'yicha olingan SVG tasvirni optimallashtirmaydi. U DOCTYPE va izohlarni taqdim etadi, bu juda axlatdir. SVG sukut bo'yicha juda engil, lekin nega uni yanada engilroq qilmaysiz? Piter Kollingrij taqdim etilgan onlayn vosita SVG Optimizerni optimallashtirish uchun. Ushbu xizmat yordamida siz yuklashingiz mumkin eski fayl va optimallashtirilgan yangisini oling.

Agar siz ko'proq qattiq ishlashni istasangiz - muammo yo'q, bu erda server tomonidagi JavaScript Node JS vositasi bilan SVG-ni optimallashtirish vositasi https://github.com/svg/svgo

Styling SVG

SVG qanday HTMLga o'xshashligini ko'rasizmi? Buning sababi, ularning ikkalasi ham XML ma'lumotlaridir. Dizaynimizda bazani tashkil etuvchi ikkita element mavjud, ular ellips va yo'ldir. Biz ularni HTML kodi orqali hech qanday muammosiz sinflarga yo'naltira olamiz.

Endi biz ushbu elementlarni maxsus SVG CSS yordamida boshqarishimiz mumkin. Ushbu CSS to'g'ridan-to'g'ri SVG-ga o'rnatilishi shart emas, uni mutlaqo istalgan joyda joylashtirish mumkin. E'tibor bering, SVG elementlari vektor grafikalari bilan ishlash uchun maxsus mo'ljallangan uslublarning maxsus to'plamiga ega. Masalan, odatiy fon rangi ishlatilmaydi, lekin to'ldirish. Ba'zi umumiy uslublar ham ishlaydi, masalan: hover.

Kivi (to'ldirish: # 94d31b;). Kivi: hover (to'ldirish: # ace63c;)

SVG-da qiziqarli filtrlar mavjud. Masalan, loyqalik:

...

Keyin kerak bo'lganda buni CSS da qo'llashingiz mumkin:

Zamin: hover (filtr: url (#pictureFilter);)

Mana nima bo'ldi:

Ushbu qalamni tekshiring!

Inline SVG brauzerini qo'llab-quvvatlash

Qo'llab-quvvatlaydigan brauzerlar ro'yxati bu rejim SVG xaritalarini http://caniuse.com/#feat=svg-html5 bu yerda ko'rish mumkin. Shunga qaramay, IE8 va Android 2.3 da qo'llab-quvvatlanmaydi.

Ushbu turdagi SVG uchun zaxira variantlardan biri:

...

Keyin biz yana Modernizr-dan foydalanamiz:

Logotipni qayta tiklash (displey: yo'q; / * Uning o'lchami SVG bilan bir xil ekanligiga ishonch hosil qiling * /) .no-svg .logo-fallback (fon rasmi: url (logo.png);)

SVG dan ob'ekt sifatida foydalanish

Agar "inline" SVG-dan foydalanish sizga yoqmasa (esda tutingki, bu variantning kamchiliklari bor, masalan, keshlashning yo'qligi), siz SVG-ni ob'ektga bog'lashingiz va keyin uni CSS-dan foydalanib o'zgartirishingiz mumkin:

Brauzerlararo qo'llab-quvvatlash uchun biz Modernizr-dan foydalanamiz:

No-svg .logo (kengligi: 200px; balandlik: 164px; fon tasviri: url (kiwi.png);)

Ushbu parametr keshlash bilan ajoyib ishlaydi va yuqorida aytilganlarning barchasiga qaraganda ko'proq brauzerni qo'llab-quvvatlaydi. Lekin harakat qilish uchun CSS yordamida bunday ob'ektda uslublarni to'g'ridan-to'g'ri SVG fayliga yozishingiz kerak bo'ladi.

...

Ma'lumotlardan foydalanish URI SVG og'irligini kamaytirish uchun sust. Mobilefish.com shu maqsadda onlayn optimallashtirish vositasini taqdim etadi. SVG faylingiz tarkibini joylashtirish va shaklni to'ldirish kifoya, keyin natija nusxa ko'chirilishi mumkin bo'lgan matn maydonida ko'rsatiladi. Bu shunday ko'rinadi:

Ushbu kodni istalgan joyda ishlatishingiz mumkin! Misol uchun:

Logotip (fon: url (ma'lumotlar: image / svg + xml; base64,);)

Aytgancha, agar sizda SVG-da 64-dan oldingi inline uslubingiz bo'lsa, uni ob'ekt sifatida ishlatsangiz ishlaydi!