Ինչպես կարելի է SVG-ը տեղադրել HTML փաստաթղթում?

SVG- ն HTML-ում տեղադրելու մի քանի եղանակ կա.

• Inline SVG: SVG կոդը ուղղակիորեն տեղադրել <svg> թեգի միջոցով:
• <img> թեգ: Օգտագործել <img> թեգը src հատկությամբ, որը ցույց է տալիս SVG ֆայլին:
• <object> թեգ: SVG տեղադրելու <object> թեգի միջոցով:
• <embed> թեգ: SVG տեղադրելու <embed> թեգի միջոցով:
• CSS: Օգտագործել SVG որպես ֆոն CSS-ի միջոցով:
• <iframe>: HTML էջը SVG-ով տեղադրելու <iframe>-ի միջոցով:

Յուրաքանչյուր մեթոդ ունի իր առանձնահատկությունները և առավելությունները:

Մեթոդ	Առավելություններ	Թերություններ	Կիրառում
Inline SVG	Լրիվ վերահսկողություն, JS/CSS ինտերակտիվություն	HTML-ի չափի ավելացում, կեշավորման բարդություն	Փոքր և հաճախ փոփոխվող SVG-ներ, նշաններ
<img>	Պարզություն, կեշավորում	Մ محدود վերահսկողություն, JS ինտերակտիվություն չկա	Ստատիկ պատկերներ
<object>	Սեմանտիկա (արտաքին օբյեկտ), JS ինտերակտիվություն	Ավելի բարդ <img>-ից, բրաուզերների աջակցություն	Կոմպլեքս SVG-ներ, fallback բովանդակություն
<embed>	Ավելի պարզ <object>-ից, հին պլագինների աջակցություն	Չի առաջարկվում HTML5-ում	Համատեղելիություն հին կոդի հետ
CSS Background	Լայնածավալ դիրքավորում, առանց լրացուցիչ տեգերի HTML-ում	JS ինտերակտիվություն չկա, վերահսկողության սահմանափակում	Արվեստային տարրեր, օրինակներ
<iframe>	Լրիվ մեկուսացում, բեռնում առանձին էջ	Ավելորդ ծախսեր, փոխազդեցության բարդություններ	Կոմպլեքս, անկախ տարրեր տեղադրելու համար

Օրինակ Inline SVG:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Օրինակ <img> թեգի օգտագործման:

<img src="image.svg" alt="SVG նկարագրություն">

Օրինակ <object> թեգի օգտագործման:

<object data="image.svg" type="image/svg+xml">
  <!-- Փոխարինող բովանդակություն -->
  <img src="image.png" alt="Ալտերնատիվ նկար">
</object>

Օրինակ CSS-ի օգտագործմամբ:

.element {
  background-image: url('image.svg'); /* SVG օգտագործելով ֆոն */
  background-size: cover; /* Դիզայնի օրինակ */
}