Încorporați SVG în HTML - Iată cum

Grafica SVG oferă mai multe avantaje față de formatele convenționale de imagine. Acest sfat practic vă arată cum să integrați grafică SVG în fișiere HTML.

Integrați imaginile SVG direct în HTML

Există diferite moduri de a integra SVG-urile în HTML. Majoritatea, însă, au unele dezavantaje.

• Este deosebit de ușor să integrați SVG folosind „". Pentru a face acest lucru, pur și simplu deschideți SVG-ul într-un editor de cod (de ex. Notepad ++) și copiați codul în codul HTML.
• Codul sursă al fișierului dvs. HTML poate ajunge foarte mult, deoarece SVG ocupă mult spațiu.

Includeți SVG ca o componentă de imagine în HTML

O modalitate simplă de a încorpora un fișier SVG în HTML este de a utiliza o etichetă "img".

• Cu eticheta "img" încorporați SVG-ul ca orice altă imagine. Deși acest lucru este ușor, acesta previne, de asemenea, utilizarea JavaScript și link-uri în cadrul SVG.

Introduceți SVG cu retragere în HTML

Această opțiune este potrivită dacă utilizați un fișier SVG, dar doriți, de asemenea, să păstrați o imagine convențională disponibilă pentru browserele mai vechi.

• Puteți utiliza o etichetă „imagine” în eticheta „SVG”, în care aveți atât SVG-ul real, cât și o altă imagine cu un atribut „xlink: href” și un „src”. Navigatoarele care nu acceptă SVG ignoră atributul "xlink: href". Toate celelalte produc imaginea SVG.

Un alt sfat practic vă spune cum să deschideți un fișier SVG pe computer.