როგორ შევიტანოთ 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	მოქნილი პოზიციონირება, დამატებითი ტეგების გარეშე	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; /* სტილიზაციის მაგალითი */
}