SVG என்பது ஒரு vector image format (XML-அடிப்படையிலானது), எனவே இது எந்த அளவிற்கும் மங்கலாகாமல் scale ஆகிறது. நீங்கள் இதை இரண்டு முக்கிய வழிகளில் சேர்க்கலாம், ஒவ்வொன்றிற்கும் அதன் trade-offs உள்ளன.
Inline SVG — HTML-இல் நேரடியாக markup
html
SVG என்பது ஒரு vector image format (XML-அடிப்படையிலானது), எனவே இது எந்த அளவிற்கும் மங்கலாகாமல் scale ஆகிறது. நீங்கள் இதை இரண்டு முக்கிய வழிகளில் சேர்க்கலாம், ஒவ்வொன்றிற்கும் அதன் trade-offs உள்ளன.
நன்மைகள்: இது உண்மையான DOM என்பதால் — நீங்கள் இதை CSS (fill, stroke) கொண்டு style செய்யலாம், அதன் பாகங்களை animate செய்யலாம், currentColor மூலம் color-ஐ மாற்றலாம் (text color-ஐ inherit செய்கிறது), மற்றும் events-க்கு பதிலளிக்கலாம். கூடுதல் HTTP request இல்லை.
தீமைகள்: HTML-ஐ பெருக்குகிறது, தனியாக cache செய்யப்படுவதில்லை, மீண்டும் மீண்டும் வரும் icons markup-ஐ நகலெடுக்கின்றன.
<img> மூலம் SVG — ஒரு file ஆக குறிப்பிடப்படுகிறது<img src="logo.svg" alt="Company logo" width="120" />
நன்மைகள்: browser-ஆல் cache செய்யப்படுகிறது, HTML-ஐ சுத்தமாக வைக்கிறது, எளிமையானது. தீமைகள்: உங்கள் CSS/JS கொண்டு அதன் உள்ளமைப்புகளை நீங்கள் style செய்யவோ script செய்யவோ முடியாது — இது ஒரு opaque image ஆகும்.
Need to recolor/animate/interact with the SVG → inline SVG
Static logo/illustration, want caching + clean HTML → <img src=".svg">
Many repeated icons → an SVG sprite (<use>) or an icon component
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
inline-க்கும் <img> SVG-க்கும் இடையே தேர்வு செய்வது, நீங்கள் graphic-ஐ style/animate செய்ய வேண்டுமா (inline) அல்லது வெறுமனே திறமையாக display செய்ய வேண்டுமா (<img>) என்பதைப் பொறுத்தது.
hover அல்லது theme-இல் color மாறும் icons inline ஆக செல்கின்றன (பெரும்பாலும் components ஆக); static brand assets <img> வழியாக செல்கின்றன.
எப்படியிருந்தாலும், vectors ஒவ்வொரு resolution-இலும் தெளிவாக இருக்கும் — icons மற்றும் logos-க்கு ஏற்றது.