Si të Vendosni SVG Graphics në Webfaqen Tuaj

SVG ose grafikët e shkallëzuar të vektorit ju lejojnë të nxjerrni imazhe shumë më komplekse dhe t'i bëni ato në faqet e internetit. Por ju nuk mund të merrni thjesht etiketat SVG dhe t'i futni në HTML. Ata nuk do të shfaqen dhe faqja juaj do të jetë e pavlefshme. Në vend të kësaj, duhet të përdorni një nga tre metodat.

Përdorni tagun e objektit për të vendosur SVG

Etiketa HTML do të vendosë një grafik SVG në faqen tuaj të internetit. Ju shkruani tagun e objektit me një atribut të të dhënave për të përcaktuar skedën SVG që dëshironi të hapni. Duhet gjithashtu të përfshini gjerësinë dhe lartësinë e atributeve për të përcaktuar gjerësinë dhe lartësinë e imazhit tuaj SVG (në piksele).

Për pajtueshmërinë ndër-shfletuese, duhet të përfshini atributin e tipit, i cili duhet të lexojë:

type = "image / svg + xml"

dhe një kodbase për shfletues që nuk e mbështesin atë (Internet Explorer 8 dhe më të ulët). Kodibazi juaj do të tregonte një plugin SVG për shfletues që nuk e mbështesin SVG. Shtojca më e përdorur është nga Adobe në http://www.adobe.com/svg/viewer/install/. Megjithatë, ky plugin nuk mbështetet më nga Adobe. Një tjetër opsion është shtojca Ssrc SVG nga Savarese Software Research në http://www.savarese.com/software/svgplugin/.

Objekti yt do të dukej kështu:

Këshilla për përdorimin e objektit për SVG

  • Sigurohuni që gjerësia dhe lartësia të jenë të paktën aq të mëdha sa imazhi që po futni. Përndryshe, imazhi yt mund të jetë i prerë.
  • SVG-ja juaj nuk mund të shfaqet në mënyrë korrekte nëse nuk përfshini llojin e saktë të përmbajtjes (type = "image / svg + xml"), kështu që unë nuk rekomandoj ta lë jashtë.
  • Ju mund të përfshini informacion rezervë brenda tagit të objektit për shfletues që nuk do të shfaqin skedarë SVG.
  • Ju gjithashtu mund të vendosni burimin e SVG tuaj dhe llojin e përmbajtjes në parametra. Kjo mund të funksionojë më mirë në IE 6 dhe 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Vini re se kjo kërkon një klasë për ta bërë punën.

Shikoni një SVG në një shembull tag objektesh.

Embed SVG me Tag Embed

Një tjetër opsion që keni për të përfshirë SVG është përdorimi i tagit. Përdorni pothuajse të njëjtat atribute si tagun e objektit, duke përfshirë gjerësinë <, lartësinë, llojin dhe bazën e kodit>. I vetmi ndryshim është që në vend të të dhënave, vendosni URL-në tuaj të dokumentit SVG në atributin src.

Embed juaj do të duket si kjo:

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

Këshilla për përdorimin e Embed për SVG

  • Etiketa embed nuk është e vlefshme për HTML4, por është HTML5 e vlefshme, kështu që nëse e përdorni në një faqe HTML4, duhet të mbani mend se faqja juaj nuk do të vërtetojë.
  • Përdorni një emër domain plotësisht quoalified në atributin src për pajtueshmërinë më të mirë.
  • Ka gjithashtu disa raporte që përdorimi i tag embed me plugin Adobe do të rrëzojnë versionet Mozilla 1.0 deri në 1.4.

Shikoni një SVG në një shembull tag embed.

Përdorni një iframe për të përfshirë SVG

Iframes janë një tjetër mënyrë e lehtë për të përfshirë një imazh SVG në faqet tuaja të internetit. Ajo kërkon vetëm tre atribute: gjerësia dhe lartësia si zakonisht, dhe src duke treguar vendin e skedarit SVG.

Iframe juaj do të duket kështu: