Ինչպես տեղադրել SVG գրաֆիկա ձեր վեբկայքում

SVG- ն կամ Scalable Vector Graphics- ը թույլ են տալիս նկարել ավելի բարդ պատկերներ եւ դրանք մատուցել ինտերնետային էջերում: Բայց դուք չեք կարող պարզապես վերցնել SVG պիտակները եւ դրանք հարվածել ձեր HTML- ին: Նրանք չեն ցուցադրի եւ ձեր էջը անվավեր կլինի: Փոխարենը, դուք պետք է օգտագործեք երեք մեթոդներից մեկը:

Օգտագործեք օբյեկտի թագը Embed SVG- ին

HTML պիտակը կցուցադրի SVG գրաֆիկա ձեր վեբ էջում: Դուք գրեք օբյեկտի պիտակը տվյալների հատկանիշով `սահմանելու SVG ֆայլը, որը ցանկանում եք բացել: Դուք նաեւ պետք է ընդգրկեք լայնության եւ բարձրության հատկանիշներ `SVG պատկերի լայնությունը եւ բարձրությունը սահմանելու համար (փիքսելներում):

Խաչաձեւ զննարկիչի համատեղելիության համար դուք պետք է ներառեք տեսակի հատկանիշը, որը պետք է կարդա:

type = "image / svg + xml"

եւ բրաուզերների համար codebase, որոնք չեն աջակցում այն ​​(Internet Explorer 8 եւ ավելի ցածր): Ձեր codebase- ը կցուցադրի SVG- ի բլոկների բրաուզերների համար, որոնք չեն աջակցում SVG- ին: Ամենատարածված օգտագործվող plugin- ն Adobe- ից է `http://www.adobe.com/svg/viewer/install/: Այնուամենայնիվ, այս plugin- ն այլեւս Adobe- ի կողմից չի աջակցվում: Մեկ այլ տարբերակ `Ssrc SVG- ի հավելվածը, Savarese Software Research- ից` http://www.savarese.com/software/svgplugin/:

Ձեր առարկան նման կլինի:

SVG- ի համար օբյեկտ օգտագործելու վերաբերյալ խորհուրդներ

  • Համոզվեք, որ լայնությունը եւ բարձրությունը առնվազն մեծ են, քանի որ պատկերն եք ներդնում: Հակառակ դեպքում, ձեր պատկերը կարող է կտրվել:
  • Ձեր SVG- ը չի կարող ճիշտ ցուցադրվել, եթե չեք ներառում ճիշտ բովանդակության տեսակը (type = "image / svg + xml"), ուստի ես չեմ առաջարկում այն ​​թողնել:
  • Դուք կարող եք ներառել պահեստային տեղեկատվությունը օբյեկտի պիտակի մեջ, բրաուզերների համար, որոնք չեն ցուցադրի SVG ֆայլեր:
  • Դուք նաեւ կարող եք սահմանել SVG- ի եւ բովանդակության աղբյուրը պարամետրերով: Սա կարող է ավելի լավ աշխատել IE 6 եւ 7-ում.
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Նշենք, որ սա պահանջում է classid- ը, որպեսզի այն աշխատի:

Դիտել SVG- ը օբյեկտի տեքստի օրինակում:

Տեղադրեք SVG- ն Embed Tag- ի հետ

Մեկ այլ տարբերակ, որը դուք պետք է ներառեք SVG- ը, օգտագործեք պիտակը: Դուք օգտագործում եք գրեթե նույն հատկանիշները որպես օբյեկտի պիտակ, ներառյալ լայնությունը <, բարձրությունը, տիպը եւ 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 "/>

Tips for Embed օգտագործելու համար SVG

  • Ներդիրի պիտակը չի համապատասխանում HTML4- ին, բայց այն վավեր HTML5 է, այնպես որ, եթե այն օգտագործում եք HTML4 էջում, հիշեք, որ ձեր էջը չի հաստատվում:
  • Օգտագործեք լիովին quoalified տիրույթի անունը src հատկանիշում լավագույն համատեղելիության համար:
  • Կան նաեւ որոշ զեկույցներ, որ Adobe Plugin- ի ներդրված պիտակը օգտագործելու դեպքում Mozilla- ի 1.0 տարբերակները կվնասեն 1.4-ը:

Դիտեք SVG- ի ներդրված տեքստային օրինակում:

Օգտագործեք SVG- ը ներառելու iframe

Iframes- ը եւս հեշտ միջոց է SVG- ի պատկերը ներդնել ձեր վեբ-էջերում: Այն միայն պահանջում է երեք ատրիբուտներ `լայնություն եւ բարձրություն, ինչպես սովորական, եւ src` մատնացույց անելով ձեր SVG ֆայլի գտնվելու վայրը:

Ձեր iframe- ն այսպիսին կլիներ: