SVG edo Scalable Vector Graphics irudi konplexuagoak marraztu eta web orrietan errendatu. Baina ezin duzu SVG etiketa hartu eta zure HTMLan sartu. Ez dira agertuko eta zure orria baliogabea izango da. Horren ordez, hiru metodo bat erabili behar duzu.
Erabili Objektuaren orria SVG txertatzeko
HTML etiketa SVG grafiko bat txertatuko du zure webgunean. Objektuaren etiketa datuen atributua idazten baduzu ireki nahi duzun SVG fitxategia zehazteko. Halaber, zabalera eta altuera atributuak izan behar dituzu SVG irudien zabalera eta altuera zehazteko (pixeletan).
Arakatzaile gurutzatuen bateragarritasunerako, motako atributua sartu behar duzu, hau irakurri beharko zenuke:
mota = "image / svg + xml"eta onartzen ez duten nabigatzaileentzako kodeketa (Internet Explorer 8 eta beheko). Zure kodeketa SVG plugin bat seinalatu litzateke SVG onartzen ez duten nabigatzaileentzat. Gehien erabilitako plugin hau Adobe-tik dago http://www.adobe.com/svg/viewer/install/. Hala ere, Adobeek ez du aurrerago plugin hau onartzen. Beste aukera bat Savarese Software Research-ren Ssrc SVG plugin-a da http://www.savarese.com/software/svgplugin/.
Zure objektua honakoa izango litzateke:
SVG objektuak erabiltzeko aholkuak
- Ziurtatu zabalera eta altuera kapsulatzen ari zaren irudia bezain handiak direla. Bestela, zure irudia moztu egin daiteke.
- Zure SVG agian ez da behar bezala erakutsi behar ez baduzu eduki mota egokia (type = "image / svg + xml"), beraz, ez dut gomendatzen utzi.
- SVG fitxategiak bistaratuko ez dituzten arakatzaileentzako objektuaren barneko informazioa biltzen du.
- Zure SVG iturria eta edukien mota parametroetan ere ezar dezakezu. Honek hobeto funtziona dezake IE 6 eta 7rekin:
Kontutan izan klasiko bat behar dela lan egiteko.
Ikus SVG objektu etiketa adibide batean.
Embed SVG Embed Tag
SVG barnean duzun beste aukera bat etiketa erabiltzea da. Objektuaren etiketaren ia atributu berberak erabiltzen dituzu, zabalera <, altuera, mota eta kodearen> barne. Ezberdintasun bakarra da datuen ordez, SVG dokumentuaren URLa src atributuan kokatzen duzula.
Zure kapsula hau itxura hau izango litzateke:
src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>Embed for SVG erabiltzeko aholkuak
- Txertatze etiketa HTML4 ez da baliozkoa, baina HTML5 baliozkoa da, beraz, HTML4 orri batean erabiltzen baduzu, zure orrialdean ez da baliozkoa izango.
- Erabili domeinu izen oso bateratua src atributuan bateragarritasun onena lortzeko.
- Adobe txertatzeko etiketa erabiliz Adobe txertatuko duten txostenek ere Mozilla bertsioak 1.0 eta 1.4 kraskatuko dituzte.
Ikusi SVG bat kapsulatutako etiketa adibidean.
Erabili iframe SVG bat gehitzeko
Iframes SVG irudi bat zure web orrialdeetan sartzeko modu erraz bat da. Hiru atributu bakarrik eskatzen ditu: zabalera eta altuera ohiko moduan, eta src zure SVG fitxategiaren kokalekua seinalatuz.
Zure iframe itxura hau izango litzateke: