Hogyan helyezzük el az SVG grafikákat az Ön weboldalán

Az SVG vagy a skálázható vektoros grafika lehetővé teszi, hogy sokkal összetettebb képeket rajzoljon, és ezeket weboldalakon jelenítse meg. De nem teheti egyszerűen az SVG-címkéket, és megölheti őket a HTML-ben. Nem fognak megjelenni, és az oldal érvénytelen lesz. Ehelyett a három módszer valamelyikét kell használni.

Az Objektum címke használata az SVG beágyazásához

A HTML-címke SVG-grafikát helyez el a weboldaladon. Az objektumcímkét egy adat attribútummal írja meg, hogy meghatározza a megnyitni kívánt SVG fájlt. A szélességet és a magassági attribútumokat is tartalmaznia kell az SVG-kép szélességének és magasságának meghatározásához (képpontban).

A böngészővel való kompatibilitás érdekében fel kell tüntetni a típus attribútumot, amely a következőképpen fog megjelenni:

type = "image / svg + xml"

és kódbázist az olyan böngészők számára, amelyek nem támogatják ezt (Internet Explorer 8 és újabb). A kódbázisa egy olyan SVG-bővítményre mutatna, amely nem támogatja az SVG-t. A leggyakrabban használt plugin az Adobe webhelyéről a http://www.adobe.com/svg/viewer/install/ címen található. Az Adobe azonban már nem támogatja ezt a plugint. Egy másik lehetőség az Ssrc SVG plugin a Savarese Software Research-ről a http://www.savarese.com/software/svgplugin/ címen.

A tárgya így fog kinézni:

Tippek az objektum SVG használatához

  • Győződjön meg róla, hogy a szélesség és a magasság legalább olyan nagy, mint a beágyazott kép. Ellenkező esetben a képét le lehet vágni.
  • Lehet, hogy az SVG nem megfelelően jelenik meg, ha nem tartalmazza a megfelelő tartalomtípust (type = "image / svg + xml"), ezért nem javaslom, hogy hagyja ki.
  • Tartalmazhat visszaadott információkat az objektum címkéjén belül olyan böngészők számára, amelyek nem jelenítik meg az SVG fájlokat.
  • Az SVG forrását és a tartalomtípus paramétereit is beállíthatja. Ez jobban működhet az IE 6-ban és a 7-ben:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Ne feledje, hogy ehhez egy osztályosnak kell működnie.

Egy objektumcímke SVG megtekintése.

Az SVG beágyazása a beágyazott címkével

Az SVG-t tartalmazó másik lehetőség a címke használata. Az objektumcímke közel azonos tulajdonságokkal rendelkezik, beleértve a szélességet, a magasságot, a típust és a kódbázist. Az egyetlen különbség az, hogy az adatok helyett az SVG dokumentum URL-jét helyezzük el az src attribútumba.

A beágyazás így fog kinézni:

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

Tippek az SVG beágyazásához

  • A beágyazott címke nem érvényes HTML4-re, de érvényes HTML5, tehát ha HTML4-ben használja, ne felejtse el, hogy az oldal érvénytelen.
  • A legjobb kompatibilitás érdekében használjon teljesen quoalizált domain nevet az src attribútumban.
  • Vannak jelentések is, amelyek a beépülő címke használatával az Adobe bővítményével összeomlik a Mozilla verziók 1.0-ról 1.4-re.

Egy SVG beillesztése egy beágyazott címke példájába.

Használjon iframe-t az SVG beillesztéséhez

Az iframe- ek egy másik egyszerű módja annak, hogy SVG-képet is felvehessenek a weboldalain. Ez csak három attribútumot igényel: szélesség és magasság a szokásos módon, és az SRC az SVG fájl helyére mutat.

Az iframeje így fog kinézni: