Როგორ განათავსოთ SVG გრაფიკა თქვენს ვებ გვერდზე

SVG ან Scalable ვექტორული გრაფიკა მოგცემთ ბევრად უფრო კომპლექსურ სურათებს და ვებ გვერდებზე მათ გაეცანით. მაგრამ თქვენ არ შეგიძლიათ უბრალოდ მიიღოს SVG tags და slap მათ თქვენი HTML. ისინი არ გამოჩნდებიან და თქვენი გვერდი არასწორია. ამის ნაცვლად, თქვენ უნდა გამოიყენოთ სამი მეთოდი.

გამოიყენეთ ობიექტის ჩანართის ჩასმა SVG

HTML ტეგი იქნება SVG გრაფიკული თქვენს ვებ გვერდზე. თქვენ წერენ ობიექტის tag მონაცემების ატრიბუტი განსაზღვრავს SVG ფაილი გსურთ გახსნათ. თქვენ ასევე უნდა შეიცავდეს სიგანე და სიმაღლე ატრიბუტები, რომ განსაზღვროთ თქვენი SVG გამოსახულების სიგანე და სიმაღლე (პიქსელებში).

ჯვარედინი ბრაუზერის თავსებადობისთვის, თქვენ უნდა შეიცავდეს ტიპის ატრიბუტს, რომელიც უნდა წაიკითხო:

ტიპი = "სურათი / svg + xml"

და კოდის ბაზირება ბრაუზერებისთვის, რომლებიც მხარს არ უჭერენ მას (Internet Explorer 8 და ქვედა). შენი კოდექსში იქნება SVG მოდული ბრაუზერისთვის, რომელიც SVG- ს არ უჭერს მხარს. ყველაზე ხშირად გამოყენებული მოდული Adobe- დან http://www.adobe.com/svg/viewer/install/. თუმცა, ამ მოდულს აღარ უჭერს მხარს Adobe. კიდევ ერთი ვარიანტია Ssrc SVG მოდული Savarese Software Research- ზე http://www.savarese.com/software/svgplugin/.

შენი ობიექტი გამოიყურება ასე:

მინიშნებები SVG- ის ობიექტის გამოყენებით

  • დარწმუნდით, რომ სიგანე და სიმაღლე მინიმუმ ისეთივე დიდია, როგორიც არის გამოსახულება. წინააღმდეგ შემთხვევაში, თქვენი სურათი შეიძლება დაიხურა.
  • შენი SVG არ შეიძლება სწორად გამოჩნდეს, თუ არ შედის სწორი შინაარსის ტიპი (ტიპი = "სურათი / svg + xml"), ამიტომ არ გირჩევთ რეკომენდაციას დატოვონ.
  • შეგიძლიათ შემომავალი ინფორმაცია შეიტანოთ ბრაუზერის ობიექტის შიგნით, რომელიც SVG ფაილებს არ აჩვენებს.
  • თქვენ ასევე შეგიძლიათ დააყენოთ წყარო თქვენი SVG და შინაარსის ტიპის პარამეტრებში. ეს შეიძლება უკეთესად იმუშაონ IE 6 და 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" სიმაღლე = "60" კოდიბაზის = "http://www.savarese.com/software/svgplugin/">

გაითვალისწინეთ, რომ ეს მოითხოვს კლასს, რათა ის მუშაობდეს.

ნახეთ SVG ობიექტის ტეგებში.

Embed SVG ჩასმა ჩანართში

კიდევ ერთი ვარიანტი გაქვთ SVG- ის ჩათვლით, გამოიყენოთ ტეგი. თქვენ გამოიყენეთ თითქმის იგივე ატრიბუტები, როგორც ობიექტის ტეგი, მათ შორის სიგანე <სიმაღლე, ტიპი და კოდიბაზა>. ერთადერთი განსხვავება ისაა, რომ მონაცემთა ნაცვლად, SVG ატრიბუტში თქვენი SVG დოკუმენტის URL შეიტანეთ.

შენი ჩართვა ასე გამოიყურება:

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

  • Embed tag არ არის სწორი HTML4, მაგრამ ეს არის სწორი HTML5, ასე რომ, თუ ის გამოიყენოთ HTML4 გვერდზე, გახსოვდეთ, რომ თქვენი გვერდი ვერ დადასტურდება.
  • გამოიყენეთ სრული quoalified დომენი src ატრიბუტი საუკეთესო თავსებადობა.
  • ასევე არსებობს გარკვეული ინფორმაცია, რომ Adobe მოდულით ჩანერგილი ტეგით იყენებენ Mozilla- ის ვერსიებს 1.0-დან 1.4-მდე.

SVG- ის ნახვა ჩანართის მაგალითში.

SVG ჩართეთ iframe

Iframes არის კიდევ ერთი მარტივი გზა მოიცავს SVG სურათს თქვენს ვებ გვერდებზე. ეს მხოლოდ სამი ატრიბუტი: სიგანე და სიმაღლე, როგორც ყოველთვის, და src მიუთითებს ადგილმდებარეობის თქვენი SVG ფაილი.

შენი iframe ასე გამოიყურება: