Таны Вэб хуудсанд SVG Graphics-ийг хэрхэн байрлуулах вэ

SVG буюу Scalable Vector Graphics нь илүү нарийн төвөгтэй зургийг гаргаж , тэдгээрийг веб хуудсанд байрлуулах боломжийг олгодог. Гэхдээ та зүгээр л SVG-ийн шошгуудыг авч, тэдгээрийг HTML рүү нь зөөж болохгүй. Тэд харагдахгүй бөгөөд таны хуудас хүчингүй болно. Харин та 3 аргын аль нэгийг ашиглах хэрэгтэй.

SVG-г Embed Object Object-ыг ашиглана уу

HTML таг таны вэб хуудсанд SVG графикийг оруулах болно. Та нээхийг хүссэн SVG файлыг тодорхойлохын тулд өгөгдлийн шинж чанар бүхий объект тагийг бичнэ. Та SVG дүрсний өргөн болон өндрийг (pixel -ээр) тодорхойлохын тулд width ба height шинж чанарыг оруулах хэрэгтэй.

Хөтөч хоорондын холболтын хувьд, та төрөлтийн шинж чанарыг агуулсан байх ёстой:

type = "image / svg + xml"

мөн үүнийг дэмждэггүй хөтчүүдэд зориулсан кодын (Internet Explorer 8 ба түүнээс доош). SVG-г дэмждэггүй хөтчүүдэд зориулж SVG залгаасыг зааж өгөх болно. Хамгийн түгээмэл хэрэглэгддэг өргөтгөл нь Adobe-ийн http://www.adobe.com/svg/viewer/install/ хаягаас татаж авч болно. Гэсэн хэдий ч, энэ залгаасыг Adobe дэмждэггүй болсон. Өөр нэг сонголт бол Savedese Software Research-ийн Ssrc SVG залгаас юм. Http://www.savarese.com/software/svgplugin/.

Таны объект иймэрхүү харагдах болно:

SVG-ийн объектыг ашиглах зөвлөмж

  • Өргөн ба өндрийг таны оруулах дүрснээс их хэмжээтэй байх хэрэгтэй. Үгүй бол, таны зургийг хуулж болно.
  • Хэрэв та зөв контентийн төрөл (type = "image / svg + xml") агуулаагүй бол таны SVG зөв харагдахгүй байж магадгүй тул би үүнийг орхихыг зөвлөхгүй.
  • SVG файлуудыг харуулахгүй байгаа хөтчүүдэд зориулж объектын хаяг доторх унах мэдээлэлийг оруулж болно.
  • Та мөн SVG-ийн эх сурвалж болон контентын төрлийг параметрүүд дээр тохируулж болно. Энэ нь IE 6 болон 7-т илүү сайн ажиллах болно:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Энэ нь классикийг ажиллуулахыг шаарддаг болохыг анхаарна уу.

Объектын хаягийн жишээнд SVG харах.

SVG-г Embed Тагийн хамт оруулах

SVG-г оруулаад өөр нэг сонголт бол шошгыг ашиглах явдал юм. Та өргөнтэй <, өндөр, төрөл, кодын төрөл гэх мэт объект таг зэрэг бараг ижил шинж чанаруудыг ашигладаг. Зөвхөн ялгаа нь өгөгдлөөс биш, та SVG баримт бичгийн URL src attribute дээр байрлуулна.

Таны институт иймэрхүү харагдах болно:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / үзүүлэгч / суулгах "/>

SVG-д зориулж ашиглах зөвлөмж

  • Embed embed нь HTML4 биш, гэхдээ энэ нь HTML5 хүчинтэй бөгөөд хэрэв та HTML4 хуудсанд үүнийг ашигладаг бол таны хуудас баталгаажуулахгүй гэдгийг санах хэрэгтэй.
  • Хамгийн сайн тохиргоонд зориулж src шинж чанарыг бүрэн дүүргэсэн домэйн нэрийг ашиглана уу.
  • Adobe plugin-тэй embed embed хаягийг ашиглах нь Mozilla хувилбарууд 1.0-ээс 1.4 хүртэл сүйрэх болно.

SVG-ийг embed програмын жишээнд харах.

SVG-г оруулах iframe ашиглана уу

Iframes бол таны вэб хуудсан дээр SVG дүрсийг оруулах өөр нэг хялбар арга юм. Зөвхөн ердийн өргөн, өндрийг гурван шинж чанарыг шаарддаг бөгөөд src тань SVG файлыг байршуулна.

Таны iframe дараах байдалтай харагдах болно: