SVG графикасын веб-бетте қалай орналастыру керек

SVG немесе масштабталатын векторлық графика сізге әлдеқайда күрделі суреттерді түсіруге және оларды веб-беттерде көрсетуге мүмкіндік береді. Бірақ сіз SVG тегтерін ғана қабылдай алмайсыз және оларды HTML-ге көшіре алмайсыз. Олар көрсетілмейді және сіздің бетіңіз жарамсыз болады. Оның орнына үш әдісінің біреуін қолданыңыз.

Нысанны Тегтерді SVG-ге орналастыру үшін пайдаланыңыз

HTML тегі веб-беттегі SVG графигін ендіреді. Сіз объектінің тегін ашқыңыз келетін SVG файлын анықтау үшін деректер төлсипатымен жазасыз. SVG кескіннің енін және биіктігін (пикселдермен) анықтау үшін ені мен биіктік атрибуттарын қосу керек.

Кросс-браузердің үйлесімділігі үшін сіз мынаны оқуы керек тип түрін қамтуы керек:

type = «image / svg + xml»

және оны қолдамайтын браузерлер үшін кодтық негіз (Internet Explorer 8 және одан төмен). Сіздің кодтың негізі SVG-ны қолдамайтын браузерлер үшін SVG плагинін көрсетеді. Ең жиі қолданылатын плагин http://www.adobe.com/svg/viewer/install/ мекен-жайында орналасқан. Дегенмен, бұл плагин Adobe қолдамайды. Тағы бір нұсқасы Savarese Software Research компаниясының http://www.savarce.com/software/svgplugin/ сайтындағы Ssrc SVG плагині болып табылады.

Сіздің нысаныңыз мынаған ұқсайды:

SVG үшін нысанды пайдалану туралы кеңестер

  • Ені мен биіктігі сіз ендірген кескіннен кем емес екенін тексеріңіз. Әйтпесе, кескініңіз қиылады.
  • Егер дұрыс мазмұн түрін (type = «image / svg + xml») қоспасаңыз, сіздің SVG дұрыс көрсетілмеуі мүмкін, сондықтан мен оны қалдыруды ұсынбаймын.
  • SVG файлдарын көрсетпейтін браузерлер үшін объектілік тегтің ішіндегі жаңартылған ақпаратты қосуға болады.
  • Сондай-ақ, SVG және мазмұн түрінің көзін параметрлерде орнатуға болады. Бұл 6 және 7-тармақтарда жақсы жұмыс істей алады:
classid = «CLSID: 1339B54C-3453-11D2-93B9-000000000000» width = «110» height = «60» codebase = «http://www.savarese.com/software/svgplugin/»>

Есіңізде болсын, бұл оны жұмыс істеу үшін classid қажет.

SVG-ді объект үлгісіндегі мысалда көріңіз.

Ендірілген тегпен SVG қойыңыз

SVG-ді қосу үшін тағы бір нұсқаңыз - бұл тегті пайдалану. <, Height, type және codebase> енін қоса алғанда, нысан тегі сияқты бірдей атрибуттарды пайдаланасыз. Жалғыз айырмашылық деректердің орнына SVG құжатының URL мекен-жайын src төлсипатына орналастырады.

Сіздің ендірілім мынаған ұқсайды:

src = «http://your-domain.here/z-circle.svg» width = «210» height = «210» type = «image / svg + xml» codebase = «http://www.adobe.com / svg / viewer / install «/> бөлімін қараңыз

SVG үшін кірістіруді пайдалану туралы кеңестер

  • Енгізу тегі жарамды HTML4 болып табылады, бірақ HTML5 жарамды, сондықтан оны HTML4 бетінде пайдалансаңыз, сіздің бетіңіз расталмайтынын есте сақтаңыз.
  • Үздік үйлесімділік үшін src атрибутында толығымен квалификацияланған домен атауын пайдаланыңыз.
  • Сондай-ақ, Adobe плагині арқылы ендірілген тегті пайдалану Mozilla 1.0 нұсқасынан 1.4 нұсқасына дейін бұзылады.

Ендірілген тегтің мысалында SVG көріңіз.

SVG-ні қосу үшін iframe пайдаланыңыз

Iframes веб-беттеріңізде SVG кескінін қосудың тағы бір оңай жолы. Ол тек үш атрибутты талап етеді: ені мен биіктігі әдеттегідей және src сіздің SVG файлыңыздың орналасқан жеріне нұсқайды.

Сіздің iframe келесідей болады: