1 Puteți modifica culorile, mărimea, alinierea și alte stiluri de text simplu
2 Stilurile trebuie să fie scrise fie în fișierul SVG, fie în legătură cu un stil extern în SVG la începutul fișierului:
În realitate, stilurile scrise în SVG vor funcționa și atunci când se utilizează eticheta IMG sau imaginea de fundal, dar acest lucru nu are sens.
Icon Font
Pro și contra acestei abordări:
+ pictograma se comportă ca un simbol al fontului și toți parametrii sunt configurați în același mod prin CSS (dimensiune, culoare, aliniere etc.);
+ Singura modalitate de a lucra în IE 8 fără manipulare suplimentară;
- toate elementele fișierului SVG sunt combinate într-un singur caracter, astfel încât să îl puteți controla folosind CSS sau JS numai ca o singură entitate;
- sunt acceptate numai icoanele cu o singură culoare;
- utilizator failover, fie nu apare în pictogramele de fonturi de descărcare, la toate, sau pentru potrivirea cod pictograme cu caractere Unicode afișează simbolul corect.
SVG ca OBIECT
Din nefericire (sau din fericire) codepen și jsfiddle blochează încărcarea obiectelor externe din motive de securitate.
Embedding-ul arată astfel:
Obiectul încorporări date atribut elmement, cum ar fi iframe, adăugând spre interior marcaj inclus fișier, astfel încât elementele pot fi accesate folosind JS, dar nu destul de modul obișnuit:
Este demn de remarcat faptul că în stilurile CSS pentru elementele SVG diferă de cele standard, o listă completă a stilurilor SVG acceptate poate fi găsită aici.
SVG nu se comportă ca o imagine normală, nu poate fi transformată în mod disproporționat prin specificarea lățimii și înălțimii. Obiectul din interior va ocupa suprafața maximă și va fi centrat în container:
Dar obiectul poate fi transformat folosind CSS de exemplu:
IE 8 și mai jos nu acceptă SVG din cuvântul "absolut", deci dacă există o audiență specifică printre utilizatorii site-ului dvs., merită verificată și înlocuită SVG cu o imagine raster. Puteți face acest lucru într-o varietate de moduri, de exemplu folosind Modernizr pentru a adăuga clasa .no-svg pentru organism:
Pro și contra acestei abordări:
+ Puteți utiliza un fișier extern CSS pentru a gestiona stilurile;
+ Sunt acceptate animațiile și filtrele SVG;
+ sunt acceptate animații interactive;
- pentru IE 8 și mai jos, este necesară înlocuirea unei imagini bitmap.
SVG în IMG sau imagini de fundal
Ambele metode de încorporare sunt oarecum similare cu încorporarea cu ajutorul unei etichete de obiect, de exemplu, nu puteți schimba proporția schimbând lățimea și înălțimea containerului, dar aveți mai multe restricții.
Stilurile externe care sunt incluse în SVG nu vor funcționa, nu puteți accesa elementele prin intermediul JS. Interacțiunile animate în SVG nu vor funcționa. Și problemele cu IE 8 și cu cele de mai jos rămân, de asemenea.
Dar animațiile SVG vor funcționa, în ambele cazuri.
În cazul IMG, maparea arată ca o imagine normală:
În cazul imaginii de fundal ca bloc normal:
De asemenea, utilizând imaginea de fundal puteți utiliza sprites, ca și în cazul imaginilor png și puteți schimba dimensiunea folosind dimensiunea fundalului:
Având în vedere faptul că procentul de persoane c ecranul dispozitivului de pixeli raport care este mai mare decât 1, iar dispozitivul nu acceptă SVG tinde la zero (dacă este cazul), puteți utiliza mass-media de expresie pentru a conecta SVG, numai pentru ei, ci pentru alții de a utiliza versiunea png:
Pro și contra acestor abordări:
+ Sunt acceptate animațiile și filtrele SVG;
+ în cazul imaginii de fundal puteți folosi sprite de tip SVG;
- Nu puteți schimba proprietățile elementelor SVG prin CSS sau JS;
- animațiile interactive nu sunt acceptate;
- pentru IE 8 și mai jos, este necesară înlocuirea unei imagini bitmap.
SVG inline
În această versiune a codului SVG, care poate fi obținută prin deschiderea oricărui fișier SVG cu un document text, acesta este încorporat direct în codul paginii.
Fără îndoială, un astfel de design dăunează citibilității codului și mărește volumul său, dar deschid noi oportunități.
De exemplu, având un set de pictograme într-un fișier SVG, le puteți reutiliza cu o construcție simplă a formularului:
unde some_svg_element_id este id-ul elementului din fișierul original SVG.
Pentru un singur element, puteți aplica, de exemplu, transformări SVG:
Pro și contra acestei abordări:
+ nici o încărcare a fișierelor externe;
+ sunt disponibile manipulări cu elemente SVG prin intermediul CSS și JS;
+ Sunt acceptate animațiile și filtrele SVG;
+ sunt acceptate animații interactive;
+ posibilitatea reutilizării elementelor;
- codul paginii este poluat;
- pentru IE 8 și mai jos, este necesară marcarea suplimentară și înlocuirea imaginii bitmap.
concluzie
Articole similare
Trimiteți-le prietenilor: