Uvod v SVG HTML
Uporaba slik v HTML je super za večpredstavnostna spletna mesta. Vse, kar morate storiti, je, da dodate oznako v kodo HTML in violo, vaš brskalnik bo prikazal in celo dodal povezavo do slike po vaši izbiri. V težavah, ko veste, da se slika ali diagram povečata, se poveča, ker JPG.webp ali PNG ne bosta pokazala nobenih nadaljnjih podrobnosti, ko se povečata v svoji ločljivosti. SVG je rešitev tega problema. SVG pomeni Scalable Vector Graphics. Kot že ime pove, jih je mogoče povečati, kolikor je potrebno, in podrobnosti nikoli ne izginejo. SVG-ji niso izključno spletna tehnologija, vendar jih je mogoče uporabljati v HTML-ju resnično lepo.
SVG je uporaben za diagrame, vektorje, grafikone in grafe v brskalniku. Spoznajmo, kako jih lahko podrobno uporabite tukaj.
Sintaksa vdelave SVG v HTML
Kot je uporaba platna v HTML5, obstaja preprosta oznaka, ki jo lahko uporabite za vdelavo SVG na strani HTML5. Skladnja je naslednja:
…. …. …. ….
Primeri SVGs v HTML
Zdaj si oglejmo nekaj primerov vektorjev, ki jih je mogoče ustvariti in vdelati v HTML5:
Primer # 1 - Risanje pravokotnika prek SVG v HTML
Koda:
Sorry but this browser does not support inline SVG.
Izhod:
Primer # 2 - Risba kvadrata z zaobljenimi vogali v SVG
Za kvadrat z zaobljenimi vogali bomo morali določiti polmer vogalov z uporabo rx, ry poleg velikosti in dimenzij kvadrata.
Koda:
Sorry but this browser does not support inline SVG.
Izhod:
Primer # 3 - Narišite krog v SVG z obrisom in barvnim vložkom v njem
Koda:
Sorry but this browser does not support inline SVG.
Izhod:
Primer # 4 - Risanje ravne črte s SVG v HTML5
Z oznako lahko narišemo ravno črto v SVG-jih HTML5, določimo lahko tudi barvo, debelino črte in njen položaj.
Koda:
Izhod:
Primer # 5 - Risanje mrka prek SVG v HTML5
Z oznako lahko narišemo mrk v SVG-jih HTML5, barvo in položaj le-te lahko določimo skupaj z matrico s polmerom.
Koda:
Sorry but this browser does not support inline SVG.
Izhod:
Primer # 6 - Ustvarjanje poligona s SVG v HTML5
Oznako lahko uporabite v SVG-jih za ustvarjanje poligonov. V oznaki moramo omeniti položaje vsake točke. Barve, debelina obrisa itd. Se lahko določijo tudi v kodi.
Koda:
Sorry but this browser does not support inline SVG.
Izhod:
Primer # 7 - Ustvaritev poline z SVG v HTML5
Polilin se uporablja za risanje oblike, ki bo sestavljena samo iz ravne črte. Upoštevajte, da morajo biti tudi te vrstice povezane. Tu je primer izvajanja poline v HTML5.
Koda:
Sorry but this browser does not support inline SVG.
Izhod:
Primer # 8 - Risanje besedila s SVG v HTML5
Besedilo bi lahko bilo potrebno v katerem koli SVG v številnih situacijah, kot je na primer označevanje grafikona itd. Na srečo v SVG obstaja oznaka, ki jo je mogoče uporabiti. Besedilo lahko nastavite na kateri koli položaj v SVG in lahko prilagodite tudi njegovo barvo in druge podrobnosti.
Koda:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
Izhod:
Primer # 9 - Risba zvezde s SVG v HTML5
Zdaj, ko smo končali z osnovami, ustvarimo zvezdo, ki bo narejena s pomočjo SVG.
Koda:
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.
Izhod:
Primer # 10 - Uporaba linearnega gradienta v SVG
Lahko uporabite linearni in radialni Gradient v velikem vrstici HTML Canvas. Gradient mora biti ugnezden v oznaki. Ta oznaka je nato označena v SVG oznaki za označevanje njene uporabe. Oglejmo si primer, ki Gradient uporablja v mrku.
Koda:
Sorry but this browser does not support inline SVG.
Izhod:
Zaključek
V primeru mest, kjer naj bi se uporabljali diagrami in grafikoni, so SVG-ji rešilci. Večina sodobnih spletnih brskalnikov podpira tudi SVG in ne more biti razširljiv. Druga prednost uporabe SVG je njegova velikost datoteke. Ker gre le za malo kode, imajo SVG-ji lahko zelo majhen odtis pomnilnika in pasovne širine v primerjavi s tradicionalnimi slikami.
Priporočeni članki
To je vodnik za HTML SVG. Tukaj razpravljamo o uvodu in najboljših 10 primerih HTML SVG z razlago in implementacijo kode. Če želite izvedeti več, si oglejte tudi naslednje članke -
- Html5 Novi elementi
- SVG proti EPS
- Bloki HTML
- Okvirji HTML