Cum se configurează smartphone-uri și PC-uri. Portal informativ
  • Acasă
  • Recenzii
  • Folosind svg în html5. Folosind SVG ca imagine de fundal

Folosind svg în html5. Folosind SVG ca imagine de fundal

Literal: scalabil Grafică vectorială. MVG? SVG! ÎN formate vectoriale nu imaginea în sine este stocată, ci instrucțiunile de construcție din puncte și curbe.


ÎN formate bitmap informațiile despre un anumit număr de puncte de imagine sunt împachetate dens într-o cărămidă binară. Este inutil să te uiți în el și îl poți schimba doar în editorii grafici.


�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~

Formatul SVG poate fi, de asemenea, creat și modificat în editori grafici precum Illustrator, Sketch sau Inkscape. Dar este și text, ceea ce înseamnă că poate fi deschis ca HTML sau CSS în orice editor de cod.



Vă spun mai multe: SVG este ca o pagină HTML independentă. Când încorporați un SVG, de fapt încorporați nu doar o imagine, ci o întreagă pagină. Cu propriul sistem de coordonate, vizualizare, stiluri, scripturi și caracteristici uimitoare.


Stiluri și scenarii, Carl! Iată o poză simplă pentru tine.


Dacă te uiți la SVG ca pagină separată- devine mai clar de ce metodă de inserare aveți nevoie. Există patru caracteristici principale și fiecare -.


Primul și cel mai simplu element chiar în codul HTML. Acesta este practic cel mai mult metoda eficientaîncărcați orice imagine - browserele știu dinainte prin codul HTML că există și încep să o încarce.


Dezavantajul este că scripturile nu vor funcționa într-un astfel de SVG și orice încercare de a interacționa cu elementele din interior este condamnată. Fișierul va fi ca în spatele geamului: poți privi, dar nu poți atinge. Deși totul funcționează bine în interior, inclusiv animațiile CSS.



Această metodă este cea mai potrivită pentru imaginile de conținut care nu necesită interacțiune: logo-uri, grafice, diagrame.


A doua cale - imagine de fundalîn CSS. Și nu contează dacă îl setați la un element, un pseudo-element sau inserați conținut - rezultatul va fi același ca și cu : în spatele geamului, dar în interior ceva funcționează.


.picture ( imagine de fundal: url(picture.svg); )

Această metodă este potrivită pentru grafica de proiectare care nu necesită interacțiune: fundaluri, pictograme și alte fleacuri.


A treia cale, prin , наконец-то выбивает стекло между страницей и внутренностями SVG-файла. Работают скрипты, взаимодействие, анимация - если они описаны внутри SVG. Между тегами можно вставить фолбэк, который покажется, если браузер не говорит на SVG.



De fapt, în loc de poți chiar să folosești