Cum să plasați grafice SVG pe pagina dvs. Web

SVG sau Vector Graphics Scalable vă permit să desenați imagini mult mai complexe și să le prezentați pe paginile web. Dar nu poți pur și simplu să iei tagurile SVG și să le pui în HTML. Nu vor apărea și pagina dvs. va fi nevalidă. În schimb, trebuie să utilizați una din cele trei metode.

Utilizați eticheta obiect pentru a încorpora SVG

Eticheta HTML va încorpora un grafic SVG în pagina dvs. web. Puteți scrie eticheta obiect cu un atribut de date pentru a defini fișierul SVG pe care doriți să îl deschideți. De asemenea, ar trebui să includeți atribute de lățime și înălțime pentru a defini lățimea și înălțimea imaginii dvs. SVG (în pixeli).

Pentru compatibilitatea cu browserul încrucișat, trebuie să includeți atributul type, care ar trebui să citească:

type = "image / svg + xml"

și o bază de date pentru browsere care nu o acceptă (Internet Explorer 8 și versiuni ulterioare). Codul dvs. va indica un plugin SVG pentru browserele care nu acceptă SVG. Cel mai des folosit plugin este de la Adobe la http://www.adobe.com/svg/viewer/install/. Cu toate acestea, acest plugin nu mai este acceptat de Adobe. O altă opțiune este pluginul Ssrc SVG de la Savarese Software Research la http://www.savarese.com/software/svgplugin/.

Obiectul dvs. ar arăta astfel:

Sfaturi pentru utilizarea obiectului pentru SVG

  • Asigurați-vă că lățimea și înălțimea sunt cel puțin la fel de mari ca imaginea pe care o încorporați. În caz contrar, imaginea dvs. ar putea fi tăiată.
  • Este posibil ca SVG dvs. să nu fie afișat corect dacă nu includeți tipul de conținut corect (tip = "image / svg + xml"), așa că nu recomand să îl dezactivați.
  • Puteți include informații de rezervă în interiorul etichetei de obiect pentru browserele care nu vor afișa fișiere SVG.
  • De asemenea, puteți seta sursa SVG și tipul de conținut în parametri. Acest lucru poate funcționa mai bine în IE 6 și 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Rețineți că acest lucru necesită o clasificare pentru a face să funcționeze.

Vizualizați un SVG într-un exemplu de etichetă obiect.

Încărcați SVG cu eticheta încorporată

O altă opțiune pe care o aveți pentru a include SVG este utilizarea etichetei. Utilizați aproape aceleași atribute ca tag-ul obiect, inclusiv lățimea <, înălțimea, tipul și codul de bază>. Singura diferență este că, în loc de date, plasați adresa URL a documentului SVG în atributul src.

Embed-ul dvs. ar arăta astfel:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" tip = "imagine / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>

Sfaturi pentru utilizarea embedului pentru SVG

  • Eticheta de încorporare nu este validă HTML4, dar este validă HTML5, deci dacă o utilizați într-o pagină HTML4, trebuie să vă amintiți că pagina dvs. nu va fi validată.
  • Utilizați un nume de domeniu complet cvotecat în atributul src pentru cea mai bună compatibilitate.
  • Există, de asemenea, unele rapoarte care utilizează eticheta de încorporare cu pluginul Adobe va prăbuși versiunile Mozilla de la 1.0 la 1.4.

Vizualizați un SVG într-un exemplu de tag embed.

Utilizați o iframe pentru a include SVG

Dacă este o altă modalitate ușoară de a include o imagine SVG pe paginile dvs. web. Este necesar doar trei atribute: lățimea și înălțimea ca de obicei și src indicând locația fișierului dvs. SVG.

Cadrul dvs. iframe ar arăta astfel: