Vloženie SVG do HTML - Tu je postup

Grafika SVG ponúka oproti konvenčným formátom obrázkov niekoľko výhod. Tento praktický tip vám ukáže, ako integrovať grafiku SVG do súborov HTML.

Integrujte obrázky SVG priamo do HTML

Existuje niekoľko spôsobov, ako integrovať SVG do HTML. Väčšina však má určité nevýhody.

• Je zvlášť ľahké integrovať SVG pomocou "". Ak to chcete urobiť, jednoducho otvorte SVG v editore kódu (napr. Notepad ++) a skopírujte kód do svojho HTML kódu.
• Zdrojový kód vášho súboru HTML môže byť veľmi dlhý, pretože SVG zaberá veľa miesta.

Zahrňte SVG ako komponent obrázka do HTML

Jednoduchý spôsob vloženia súboru SVG do HTML je použitie značky „img“.

• Pomocou značky „img“ ste vložili SVG ako každý iný obrázok. Aj keď je to ľahké, tiež to zabraňuje použitiu JavaScriptu a odkazov v SVG.

Vložte SVG so záložnou reklamou do HTML

Táto voľba je vhodná, ak používate súbor SVG, ale tiež chcete zachovať konvenčný obrázok pre staršie prehliadače.

• V značke „SVG“ môžete použiť značku „image“, v ktorej máte skutočný SVG aj iný obrázok s atribútom „xlink: href“ a „src“. Prehliadače, ktoré nepodporujú SVG, ignorujú atribút „xlink: href“. Všetci ostatní vydávajú obraz SVG.

Ďalší praktický tip vám povie, ako otvoriť súbor SVG v počítači.