Úvod do HTML SVG
Používanie obrázkov v HTML je úžasné pre webové stránky bohaté na multimédiá. Jediné, čo musíte urobiť, je pridať značku do kódu HTML a violu, váš prehliadač zobrazí a dokonca pridá odkaz na požadovaný obrázok. V situáciách, keď viete, že obrázok alebo schéma sa priblíži, bude trochu znepokojujúce, pretože súbor JPG.webp alebo PNG nebude zobrazovať žiadne ďalšie podrobnosti, akonáhle je obrázok priblížený v minulosti v rozlíšení. SVG je riešením tohto problému. SVG je skratka pre škálovateľnú vektorovú grafiku. Ako už názov napovedá, môžu sa zväčšiť podľa potreby a detaily nikdy nezmiznú. SVG nie sú výhradne pre webové technológie, ale ich schopnosť používať v HTML je skutočne elegantná.
SVG je užitočný pre diagramy, vektory, grafy a grafy v prehľadávači. Dozvieme sa tu, ako ich môžete detailne použiť.
Syntax vkladania SVG do HTML
Podobne ako pri použití plátna v HTML5, existuje jednoduchá značka, ktorú môžete použiť na vloženie SVG na stránky HTML5. Syntax je nasledovná:
…. …. …. ….
Príklady SVG v HTML
Pozrime sa teraz na niekoľko príkladov vektorov, ktoré možno vytvoriť a vložiť do HTML5:
Príklad č. 1 - Nakreslenie obdĺžnika pomocou jazyka SVG v HTML
kód:
Sorry but this browser does not support inline SVG.
Výkon:
Príklad č. 2 - Nakreslenie štvorca so zaoblenými rohmi v SVG
Pre štvorec so zaoblenými rohmi budeme musieť definovať polomer rohov pomocou rx, ry okrem veľkosti a rozmerov štvorca.
kód:
Sorry but this browser does not support inline SVG.
Výkon:
Príklad č. 3 - Nakreslenie kruhu vo formáte SVG s obrysom a farbou vo vnútri
kód:
Sorry but this browser does not support inline SVG.
Výkon:
Príklad č. 4 - Nakreslenie priamky so SVG v HTML5
Značku môžeme použiť na nakreslenie priamky v SVG HTML5, je možné definovať aj farbu, hrúbku čiary a jej polohu.
kód:
Výkon:
Príklad č. 5 - Nakreslenie zatmenia pomocou SVG v HTML5
Pomocou značky môžeme nakresliť zatmenie v SVG HTML5, jeho farbu a polohu je možné definovať spolu s polomerom zápustky.
kód:
Sorry but this browser does not support inline SVG.
Výkon:
Príklad č. 6 - Vytvorenie mnohouholníka pomocou SVG v HTML5
Značka sa môže použiť v SVG na vytvorenie polygónov. V značke musíme uviesť polohy každého bodu. V kóde je možné definovať aj farbu výplne, hrúbku obrysu atď.
kód:
Sorry but this browser does not support inline SVG.
Výkon:
Príklad č. 7 - Vytvorenie krivky s SVG v HTML5
Polyline sa používa na kreslenie tvaru, ktorý bude pozostávať iba z priamky. Majte na pamäti, že aj tieto vedenia musia byť spojené. Tu je príklad implementácie polyline v HTML5.
kód:
Sorry but this browser does not support inline SVG.
Výkon:
Príklad č. 8 - Kreslenie textu pomocou SVG v HTML5
Text by mohol byť potrebný v akomkoľvek SVG v mnohých situáciách, napríklad pri označovaní mapy atď. Našťastie v SVG existuje značka, ktorú je možné použiť. Text je možné nastaviť na ľubovoľnom mieste v SVG a môžete si prispôsobiť jeho farbu a ďalšie podrobnosti.
kód:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
Výkon:
Príklad č. 9 - Nakreslenie hviezdy pomocou SVG v HTML5
Teraz, keď sme hotoví so základmi, vytvorme hviezdu, ktorá sa vytvorí pomocou SVG.
kód:
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
Výkon:
Príklad č. 10 - Použitie lineárneho gradientu v SVG
Lineárny a radiálny prechod môžete použiť v SVG riadkoch HTML na mnohých riadkoch. Prechod musí byť v značke vnorený. Táto značka je potom označená v značke SVG na označenie jej použitia. Pozrime sa na príklad, ktorý používa prechod v zatmení.
kód:
Sorry but this browser does not support inline SVG.
Výkon:
záver
V prípade lokalít, na ktorých sa majú použiť diagramy a tabuľky, sú SVG záchrancami. Väčšina moderných webových prehliadačov tiež podporuje SVG a okrem možnosti ich rozšírenia. Ďalšou výhodou použitia SVG je veľkosť súboru. Pretože je to len kúsok kódu, SVG môžu mať veľmi malú stopu v pamäti a spotrebovanú šírku pásma v porovnaní s tradičnými obrázkami.
Odporúčané články
Toto je sprievodca HTML SVG. Tu diskutujeme úvod a 10 najlepších príkladov HTML SVG s vysvetlením a implementáciou kódu. Ďalšie informácie nájdete aj v nasledujúcich článkoch -
- Nové prvky HTML5
- SVG verzus EPS
- Bloky HTML
- Rámčeky HTML